超详细的学习笔记：CSS盒子模型（附代码示例）

笔记参考b站网课：【前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程】https://www.bilibili.com/video/BV1Kg411T7t9?p=124&vd_source=06e5549bf018e111f4275c259292d0da

目录

一、CSS三大特性

1、继承性

2、层叠性

3、优先级

4、权重叠加的计算

二、PxCook的基本使用

三、盒子模型

1、盒子模型的介绍

2、内容的宽度和高度

3、边框 (border)

1、连写形式

2、单方向设置

3、单个属性

8、内边距（padding）和外边距（margin）（注：本节重点内容都在代码里）

4、CSS3盒模型(自动内减)

5、 清除默认内外边距

7、版心居中

8、外边距折叠现象-合并现象

9、外边距折叠现象-塌陷现象

10、行内元素的垂直内外边距不生效

11、去掉列表前的符号

一、CSS三大特性

1、继承性

见CSS进阶笔记：超详细的学习笔记：CSS进阶（附代码示例）_早八睡不醒午觉睡不够的程序猿的博客-CSDN博客

2、层叠性

 见CSS进阶笔记：超详细的学习笔记：CSS进阶（附代码示例）_早八睡不醒午觉睡不够的程序猿的博客-CSDN博客

3、优先级

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

优先级公式:
继承<通配符选择器<签选择器< 类选择器<id选择器<行内样式<!important

类似于局部变量优先的原则

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

4、权重叠加的计算

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

比较规则:
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
....
如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算!)

注意点: !important如果不是继承，则权重最高，天下第一!

特殊情况：都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效 

 

二、PxCook的基本使用

PxCook用于测量像素大小及颜色值。

若图片为psd形式，在开发模式下，可直接生成CSS代码。

如果公司的UI设计师不太行的话，这个软件真的能救前端开发工程师的命（手动狗头）

三、盒子模型

1、盒子模型的介绍

盒子的概念

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

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

盒子模型
CSS 中