CSS盒子模型

CSS三大特性

前面讲述了三大特性中的继承性与层叠性，这节讲述优先级

优先级

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

优先级公式：继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important （选择器范围越广优先级越低）

注意点：

!important写在属性值后面分号前面
!important不能提升继承的优先级，只要是继承优先级就是最低
实际开发中不建议使用!important

优先级权重叠加计算

如果是复合选择器，此时需要通过泉州叠加计算方法，判断哪个选择器优先级会最高生效

权重叠加计算公式：（0，0，0，0），分别对应复合选择器中：行内样式个数，id选择器个数，类选择器个数，标签选择器个数

比较规则：

1.先比较第一级数字，如果比较出来，后面不看

2.若第一级数字相同，此时比较第二级数字，以此类推

3.如果最后所有数字都相同，则优先级相同，此时比较层叠性，即：写在下面的生效

PxCook基本使用

我们可以使用PxCook工具代替PS测量设计图的尺寸和颜色，能够从psd文件中获取数据

常用快捷键：

放大设计图：ctrl++
缩小设计图：ctrl+-
移动设计图：空格按住不放，鼠标拖动

常用工具：量尺寸，吸颜色

盒子模型

什么是盒子模型

盒子的概念：页面中的每一个标签，都可看作是一个盒子，通过盒子的视角更方便进行布局。

浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。

盒子模型：CSS中规定每个盒子分别由：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）着就是盒子模型

内容的宽度和高度

我们可以利用width和height属性默认设置盒子内容区域大小。

常见取值：数字+px

边框

作用：设置盒子的边框粗细，边框样式，边框颜色效果

内边距

作用：设置边框与内容之间的距离

属性名：padding

常见取值：数字+px

一个值：上下左右都设置
两个值：分别代表上下，左右
三个值：分别代表上，左右，下
四个值：分别代表上，右，下，左

单方向设置：padding-方位名词

盒子实际大小终极计算公式：

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

不会撑大盒子的特殊情况

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度。此时给子盒子设置左右的padding或者左右的border就不会撑大盒子了

盒模型自动内减

给盒子设置属性box-sizing:border-box属性，浏览器会自动计算多余大小，自动在内容中减去。即可解决盒子被撑大的问题

外边距

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

一个值：上下左右都设置
两个值：分别代表上下，左右
三个值：分别代表上，左右，下
四个值：分别代表上，右，下，左

单方向设置：margin-方位名词

清除默认外边距

浏览器会默认给不放标签设置默认的margin和padding，但一般在项目开始前需要前清除这些标签默认的margin和padding，后续自己设置

结局办法：

*{
margin:0;
padding:0;
}

外边距折叠现象--合并

水平布局的盒子，左右的margin正常互补影响，在浏览器中显示的两者距离为左右margin之和

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

外边距折叠现象--塌陷

在位行内元素设置margin和padding是，水平布局有效，垂直方向无效

CSS盒子模型 | 青训营笔记