css的特性与综合案例以及盒子模型的初步认知

8.1.1 css的继承性

特性：子元素默认继承父元素样式的特点

可以继承的常见属性：

1.color

2.font-style，weight，size，family

3.text-indent，text-align

4.line-height

5. ......

8.1.2优先级介绍

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

优先级公式：

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

8.1.3 权重叠加计算

如果是复合选择器，通过权重叠加计算，判断最终哪个选择器优先级最高会生效

先比较第一级数字，若比较出来了，之后的统统不看

如果第一级数字相同，再去比较第二级数字，以此类推

如果最终数字都相同，则优先级相同，则比较层叠性，谁写在下面，谁说了算

8.1.3 盒子模型的介绍

1.盒子的概念

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

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

2.盒子模型

css中规定每个盒子分别由：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）构成，即为盒子模型。

3.边框连写形式

属性名：border

属性值：单个取值的连写，取值之间用空格隔开

如：border：10px solid red

单方向设置border，属性名：border—方向名词，top，bottom，left，right

例：bottom-top，bottom-right

4.外边距（margin）

用法与内边距，边框类似

5.清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目中需要先清楚这些默认的标签，后续自己设置

6.外边距折叠现象

1.合并现象

场景：垂直布局的块级元素，上下的margin会合并

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

解决办法：避免就好，只给一个盒子设置margin即可

2.塌陷现象

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

结果：导致父元素一起往下移动

解决办法：

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

2。给父元素设置overflow：hidden

3.转换成行内块元素

4.设置浮动

注：如果想要通过margin或者padding来改变行内标签的位置，无法生效