一,盒模型
什么是盒模型?
（英语：box moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型.
盒模型分为标准盒模型和怪异盒模型
二,标准盒模型
标准盒模型又分为:块级盒模型 行内盒模型 行内块盒模型
首先先讲一下边框样式
1.border边框样式
1.第一种写法(是一种复合样式)
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
2.第二种写法
border-style:solid ;
border-color:red;
border-width:1px;
这样子的写法和上面的图片的样式相同
那么小伙伴问可能会问了,我想让四个边框的宽度,颜色,线条都不一样那该怎么办啊?
下面我们就来说说如何设置各个边框的样式
例如:我们要设置一个上边框为5px,右边框为10px,下边框为15px,左边框为20px的宽度 看下面这条代码
border-style:solid ;
border-color:red;
border-width:5px 10px 15px 20px;
会变成这个样子
很明显边框的各个宽度就改变了,它遵从的顺序就是上 右 下 左
当然他的四个边框的颜色也可以自主设定
例如我们要设置一个上边框为红色,右边框为绿色,下边框为黑色,左边框为黄色,看下面这条代码
border-style:solid ;
border-color:red green black yellow;
border-width:5px 10px 15px 20px;
咳咳,虽然这个图片有点丑,但是很易懂不是嘛
当然各个边框的样式也可以设置 这里我就不一一举例了,你们下去可以自己研究一下 我就直接把边框的样式写下来了
border-style:solid实线 dashed 虚线 dotted 圆圈线 double 双线,(顺序也是遵从上右下左的原理)
- 最后在这里给大家扩展一下,有的小聪明就会问了,设置四个值顺序是上右下左,那么设置三个和设置两个顺序又是什么呢
其他的遵从顺序也是如此,不一一举例了 大家下去可以多多敲敲代码 发现新大陆吧
3.第三种写法,如何单一的设置边框?
如果我们只想要上边框为红色,那么该如何设置呢?看下面代码
border-top:1px solid red; 就是左边框为1px的红色边框
top 上 left 左 bottom下 right右
- 又来扩展了,如果复合样式和分开的样式一起出现,后面的会覆盖前面的代码 原因后面的时候可以了解到,现在就不多比比了
2.padding(内边距)
-
什么是内边距呢? 内边距就是content主体内容到border之间的间隙 这里给你举一个我自己做的两个效果图你就明白了
没添加padding的图片
添加padding:10px的效果图
- padding:20px;也是复合样式 也是遵循上右下左的顺序 这里就不一一演示了(也有 padding-top;20px;等等
- 还要注意一点 内容会扩大盒子的大小
margin(外边距)
-
什么是外边距呢? 我就不用名词来解释了 ,用白话来讲就是两个盒子之间的距离
还是先用图片举例子 先了解这是什么
我们先建立两个没有加入margin盒子 看下面效果图
没有加入margin
当我们向盒子之中加入margin:20px;看看会是什么样子
第一个盒子加入margin:20px;
- 相信各位小聪明们一定会发现这个也是一个复合样式 margin也是遵循上右下左的顺序原理 这里就不再次写了 也有left top....等功能.
盒子如何居中?
盒子居中 margin: 0px auto; 这样子盒子就可以居中了
上下 左右自动计算
- 扩展:父子级外边距合并问题 当我们一个盒子嵌套一个盒子时,还想让里面的盒子在父级发生移动时直接写margin,会和我们预期的一样吗?
当我们图一转变成图二,直接在绿盒子里面加入margin会成为我们理想中图二的效果吗? 并不会这样
想要变成图二这样子的理想样子的解决办法是:需要给父级添加一个border边框属性
二,怪异盒模型
- 写法 :box-sizing:border-box;
跟标准盒模型的不同是
1.会自动计算元素的大小
2.设置的width,height是多少 就是多少 不会被主体内容挤压
三,颜色的几种表达方式
- 单词 red ,green....等
- 十六进制 0-9 a-f()
- rgb(25,25,250) * 0-255*
- rgba(25,25,250,0.5) 在rgb的基础上设置透明度 透明度是0-1
- hsl 0-360
- hsla 0-360 可以设置透明度
网友评论