WEB前端-css盒子模型

 WEB前端-css盒子模型

---

 WEB前端-css盒子模型

盒子模型

 盒子模型特性

1.内边距padding

2.外边距margin

3.边框属性

4.盒子模型的bug:

元素的可见性

 伪对象

---

盒子模型

我们说div就是一个块，它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程

小米官网：www.mi.com

图示：

 盒子模型的组成

示意图

 盒子模型特性

4个组成部分：宽高、内间距、边框、外间距

1.内边距padding

	明天休息了！

示意图

注意：

1. 添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小
2. 如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）

2.外边距margin

	明天休息了！

示意图

 多学一招：margin:0 auto;可以让盒子在其父元素中居中

margin:0 auto;和text-align:center;的区别

	margin:0 auto；	text-align:center
针对的对象	盒子---块元素(标签本身)	标签内部的行元素
居中的范围	在父盒子中居中	自己内部

3.边框属性

边框有3要素：边框类型、边框颜色、边框厚度

a) 边框类型

语法：border-style:值

取值：

 （1）solid实线

 （2）dashed虚线

 （3）dotted点线

 （4）double双线

示意图

 

	

		实线
	
	

		虚线
	
	

		点线
	
	

		双线
	

b) 边框颜色

语法：border-color:颜色值

示意图

c) 边框厚度

语法：border-width:尺寸值

示意图

d) 一次性写好

语法：border:类型 颜色 宽度

示意图

e) 单独方向的边框设置

语法：

 （1）上边框：border-top:三要素

 （2）左边框：border-left:三要素

 （3）下边框：border-bottom:三要素

 （4）有边框：border-right：三要素

示意图

 多学一招：可以设置none

示意图

f) 边框圆角

语法：border-radius:值

取值：可以是像素，也可以是百分比

示意图

 

多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系

总结：元素加边框后，元素会变大

4.盒子模型的bug:

a) 盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，以大的边距为准

bug1图示

 bug1效果图

 解决：避免或将这个间距都给到一个元素上面

b) 两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准

bug2图示

 bug2效果图

解决：

 a) 给外部盒子加上边框或者上padding-top

 b) 给外部盒子添加oveflow:hidden

元素的可见性

语法：visibility:值

取值：hidden隐藏，visible可见的

示意图

 多学一招：使用该属性隐藏的元素，在页面中还占用空间

语法：display:none

元素隐藏后在页面中不占用空间

示意图

 伪对象

概念：就是给元素追加一个虚拟标签，由css加载，可以节省html的资源开销，必须有content属性，默认是行元素，可以进行转换。（是加在内容中的）

::after:在指定的标签后面添加一个对象

::before:在指定的标签前面添加一个对象

content：元素里面的内容（内容中不能写标签）

语法：

元素::after{
    content:"";
}

注意：伪对象样式中，必须有content属性，否则伪对象无效

多学一招：官方推荐使用双冒号，但是通常为了兼容性更好，我们使用单冒号

上面两个伪对象选择器需要结合属性content一起使用

效果图

总结：

 1.什么是伪对象？不是实际标签，使用css样式模拟一个标签

 2.元素::after{}/元素::before{}

 3.在伪元素样式中，必须有content属性

 4.伪元素是行元素