CSS盒子模型

一、CSS三大特性

目标:能认识不同选择器的优先级公式，能够进行CSS权重叠加计算，分析并解决CSS冲突问题

学习路径:

1. 继承性
2. 层叠性
3. 优先级

3.1优先级的介绍

➢特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式  （越精准级别越高）

➢优先级公式:

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

➢注意点:

1. !important写在属性值的后面，分号的前面!

2. !important不能提升继承的优先级， 只要是继承优先级最低!

3.实际开发中不建议使用 !important。

3.2权重叠加计算

二、Chrome调试工具

三、盒子模型

1.1盒子模型的介绍

1. 盒子的概念

1. 页面中的每一 个标签,都可看做是一 个“盒子”，通过盒子的视角更方便的进行布局

2.浏览器在渲染 (显示)网页时，会将网页中的元素看做是- -个个的矩形区域，我们也形象的称之为盒子

2.盒子模型

➢CSS中规定每个盒子分别由:内容区域(content) 、内边距区域(padding) 、边框区域(border) 、外边距区域(

margin)构成，这就是盒子模型

3. 记忆:可以联想现实中的包装盒

2.1内容的宽度和高度

➢作用:利用width和height属性默认设置是盒子内容区域的大小

➢属性: width / height

➢常见取值:数字+ px

3.1边框(border) -连写形式

➢属性名: border

➢属性值: 单个取值的连写， 取值之间以空格隔开

●如: border : 10px solid red;

➢快捷键:bd+tab

3.2边框(border) -单方向设置

➢场景:只给盒子的某个方向单独设置边框

➢属性名: border -方位名词

➢属性值:连写的取值

3.4盒子实际大小初级计算公式

4.1 CSS3盒模型(自动内减)

➢需求:盒子尺寸300*300,背景粉色，边框10px实线黑色，. 上下左右20px的内边距，如何完成?

给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?

➢解决方法①:手动内减

●操作:自己计算多余大小，手动在内容中减去

缺点:项目中计算量太大,很麻烦

➢解决方法②:自动内减

操作:给盒子设置属性box-sizing : border-box ;即可

优点:浏览器会自动计算多余大小，自动在内容中减去

5.7外边距折叠现象-①合并现象

➢场景:垂直布局的块级元素, .上下的margin会合并

➢结果: 最终两者距离为margin的最大值

➢解决方法: 避免就好

●只给其中一个盒子设置margin即可

5.8外边距折叠现象-②塌陷现象

➢场景:互相嵌套的块级元素，子元素的margin-top会作用在父元素上

➢结果:导致父元素-起往下移动

➢解决方法:

1.给父元素 设置border-top或者padding-top (分隔父子元素的margin-top)

2.给父元素设 置overflow: hidden

3.转换成行内块元素

4.设置浮动