初学Web第五天

CSS三大特性

层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
原则：①样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。②样式不冲突，不会层叠。

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。
恰当的使用继承可以简化代码，降低CSS样式的复杂性；子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5

优先级

①选择器相同，执行层叠性。②选择不同，则根据选择器权重执行
继承 或者 * | 0，0，0，0
元素选择器 | 0，0，0，1
类选择器，伪类选择器 | 0，0，1，0
ID选择器 | 0，1，0，0
行内样式style=“” | 1，0，0，0
!important | ∞无穷大
注意点：①权重是由4组数字组成，但是不会有进位。
②可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
③等级判断从左到右，若果某一位数值相同，则判断下一位数值。
④继承的权重是0，如果该元素没有直接被选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加：如果是复合选择器，则会有权重叠加

CSS盒子模型

网页布局过程：
1.先准备好相关网页元素，网页元素基本都是盒子Box。
2.利用CSS设置好盒子样式，然后摆放到相应位置。
3.往盒子里面装内容。

盒子模型

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。包括：边框、外边距、内边距、和实际内容
border边框、content内容、padding内边距、margin外边距
边框border
三部分组成：边框宽度（粗细）、边框样式、边框颜色
border-width | 定义边框粗细，单位是px
border-style | 边框的样式（solid实线边框、dashed虚线边框、dotted点线边框）
border-color | 边框颜色
边框简写：border： 1px solid red; 没有顺序
边框分开写法：border-top: 1px solid red;
表格的细线边框：border-collapse：collapse; 表示相邻边框合并在一起
边框会增加盒子实际大小：①测量盒子的时候，不量边框②如果测量的时候包含了边框，则需要width/height减去边框宽度
内边距padding
简写属性：
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像素，顺时针
指定padding后，发生了①内容和边框有了距离，添加了内边距②padding影响了实际盒子大小。
解决方案：让width/height减去多出来的内边距大小
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
外边距margin
margin简写和padding一样
外边距可以让块级盒子水平居中，但必须满足两个条件：①盒子必须制定了宽度width②盒子左右的外边距都设置为auto。
.header{ width:960px;margin:0 auto}
常见写法：margin-left:auto; margin-right:auto; margin:auto; margin:0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可
嵌套块元素处置外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距同事子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：①可以为父元素定义上边框②可以为父元素定义上内边距③可以为父元素添加overflow：hidden
清除内外边距
*{
padding：0；
margin：0；
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素和行内快元素就可以了