CSS （3）

1 CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突样式。主要解决样式冲突

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构进，就执行哪个样式。

样式不冲突，不会层叠。

1.2 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号

子元素可以继承父元素的样式（text- , font-, line-这些元素开头可以继承，以及color属性）

行高的继承

body {
    font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高为1.5

此时子元素的行高：当前子元素的文字大小*1.5

1.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，执行层叠性

选择器不同，根据选择器权重执行

选择器	选择器权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important重要的	无穷大

body {
    color: pink!important;
}

优先级注意点：

1、权重是有4组数字组成，但是不会有进位

2、可以理解为类选择器永远大于元素选择器，id选择器用于大于类选择器

3、等级判断从左到右，如果某一位数值相同，则判断下一位数值

4、 继承权重是0，如果钙元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

2 盒子模型

 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

 2.1 边框 

border可以设置元素的边框。边框有三部分组成:边框宽度、边框样式、边框颜色。

border: border-width || border-style ||border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

边框简写：

border: 1px solid red;没有顺序

边框分开写法：

border-top: 1px solid red;

2.2 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse: collapse;

border-collapse: collapse;表示相邻边框合并在一起 

2.3 内边距

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素内边距
padding:5px 10px;	2个值，代表上下内边距5像素，左右内边距10像素
padding:5px 10px 20px;	3个值，代表上内边距5像素，左右边距10像素 下内边距20像素
padding:5px 10px 20px 30px;	4个值，代表上5像素，右10像素 下20像素 做30像素 顺时针

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

2.4 外边距

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

2.4.1 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定宽度
2. 盒子左右的外边距都设置为auto

margin:0 auto;

2.5 外边距合并

2.5.1 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow:hidden

2.6 清除内边距

网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前， 首先要清除下网页元素的内外边距。

* {
    padding:0;
    margin:0;
}