【CSS盒子模型】

一、CSS特性—优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意点：
1、!important写在属性值的后面，分号的前面！
2、!important不能提升继承的优先级，只要是继承有限级最低！
3、实际开发不建议使用!important

1.1 权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）

比较规则：
1、先比较第一级数字，如果比较出来了，后面通通不看
2、比较第二个…
3、…
4、如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）
注意点：!important如果不是继承，则权重最高！

二、PxCook的基本使用

下载PxCook软件：测量、取色、开发模式等

三、盒子模型

3.1 盒子模型的介绍

1、盒子的概念
（1）页面中的每一个标签，都可看作是一个“盒子”，通过盒子的视角更方便的进行布局
（2）浏览器在渲染（显示）画面时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子
2、盒子模型
CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

3.2 内容区域的宽度和高度

属性：width/height
常见取值：数字+px

3.3 边框(border)

3.3.1 连写模式

属性值：单个取值的连写，取值之间以空格隔开
如：border:10px solid red;
快捷键：bd+tab
线条样式：

属性值	效果
solid	实线
dashed	虚线
dotted	点线

3.3.2 单方向设置

场景：只给盒子的某个方向单独设置边框
属性名：border+方位名词(left、right、top、bottom)
属性值：连写的取值

3.3.3 单个属性

作用：设置边框粗细、边框颜色、边框样式效果
单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

3.4 内边距(padding)

取值：数字+px
padding属性可以当作复合属性使用，表示单独设置某个方向的内边距：

		 /* 四值： 上    右   下   左 */
         padding: 10px 20px 30px 40px;
         /* 三值： 上   左右  下 */
         padding: 10px 30px 50px;
         /* 两值：上下 左右 */
         padding: 10px 20px;

3.5 CSS3盒子模型（自动内减）

操作：给盒子设置属性 box-sizing:borber box;即可
优点：浏览器会自动计算多余大小，自动在内容中减去

3.6 外边距(margin)

-写法与padding完全一致

3.6.1 清除默认内外边距

*{
	margin: 0;
	padding: 0;
}

3.6.2 版心居中

版心：网页的有效内容
代码：margin:0 auto;

3.6.3 外边距折叠现象—合并现象

场景：垂直布局的块级元素上下的margin会合并
结果：最终两者的距离为margin的最大值
解决方法：只给一个盒子设置margin即可

3.6.4 外边距折叠现象—塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起向下移动
解决方法：
1、给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2、给父元素设置overflow:hidden;
3、转换成行内块元素
4、设置浮动

3.6.5 行内元素的内外边距的问题

场景：如果想要用margin和padding改变行内标签的垂直位置，无法生效
1、行内标签的margin-top和margin-bottom不生效
2、行内标签的padding-top和padding-bottom不生效
注意点：可使用line-height来改变上下间距