CSS总结（3）

CSS总结（3）

一、CSS三大特性

1、层叠性

• 相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题
• 层叠性的原则：
样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式；
样式不冲突，不会层叠。
例如：颜色样式被覆盖了，而字体样式没被覆盖

2、继承性

• 子标签会继承父标签的某些样式，如 text- 、font- 、line- 、color 这些样式。简单理解就是：子承父业
• 行高的继承性：
行高可以跟单位也可以不跟单位，纯数字就是相当于当前文字大小的多少倍
不跟单位写法的优势是里面子元素可以根据自己文字大小自动调整行高，例如body{
font：12px/1.5 } 1.5倍；实际开发常见写法

3、优先级

• 当同一个元素指定多个选择器，就会有优先级的产生；选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行
• 选择器的权重（挺重要）：
继承或者 * ，权重为0 （0，0，0，0）
标签选择器，权重为1 （0，0，0，1）
类选择器和伪类选择器，权重为10 （0，0，1，0）
id选择器，权重为100 （0，1，0，0）
行内样式 style=“”，权重为1000 （1，0，0，0）
！important ，权重为无穷大
• 从下往上开始判断就行
• 优先级等级判断从左向右，如果某一位数值相同，则判断下一位数值
• 继承的权重为0，不管父元素权重多高，子元素得到的权重都是0
• 权重的叠加：
对于复合选择器，会有权重的叠加，需要进行计算
权重虽然会叠加，但是永远不会有进位

二、页面布局

1、页面布局的三大核心

盒子模型、浮动、定位

2、网页布局过程

• 先准备好相关的网页元素，网页元素基本都是盒子Box
• 利用CSS设置好盒子样式，然后摆放到相应位置
• 往盒子里面装内容

3、传统网页布局的三种方式

• 普通流（标准流/文档流）
标准流就是标签按照规定好默认方式排列（块级元素会独占一行，从上向下顺序排列；行内元素会按照顺序从左到右排列，碰到父元素边缘则自动换行）
• 浮动
• 定位

4、网页布局的准则

• 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
• 先设置盒子的大小，再设置盒子的位置

三、盒子模型

1、盒子模型组成

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

2、盒子模型之边框（border）

• border 可以设置元素的边框。边框由三部分组成：边框宽度/粗细、边框样式、边框颜色
• 用法：
border：border-width粗细 border-style边框样式 border-color边框颜色
• 常用边框样式有：solid、dashed、dotted
• border-top / bottom/ left / right 可分别设定上下左右边框属性
• 表格的细线边框（挺重要的）：
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框；
border-collapse：collapse 表示相邻边框合并在一起
• 边框会影响盒子的实际大小（测量时要注意）

3、盒子模型之内边距（padding）

• padding属性用于设置内边距，即边框与内容之间的距离
• 用法：padding-top / bottom / left / right ：10px；
• padding 复合属性（要记住）：
padding：5px； 表示上下左右均有5像素内边距
padding：5px 10px； 表示上下5像素，左右10像素
padding：5px 10px 20px； 表示上5像素，左右10像素，下20像素
padding：5px 10px 20px 30px； 表示上、右、下、左 顺时针
• padding 内边距也会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子；
解决方式：量出来的盒子高度和宽度减去内边距就是最终的盒子高宽度，注意看用不用减去两倍哦
• 文字数不同时可以只设置左右padding使其美观
• 如果盒子本身没有指定 width / height 属性，则此时padding不会撑开盒子大小
• 一个小的知识点：块级元素里面再放块级元素，如果子元素没定义高宽，则与父元素宽度相同，但是高度不同

4、盒子模型之外边距（margin）

• margin 属性用于设置外边距，即控制盒子和盒子之间的距离
• 用法：
margin-top / bottom / left / right
• margin 的复合写法和意义与 padding 完全一致
• 外边距可以让块级盒子水平居中，但是必须满足两个条件：
一是盒子必须指定了宽度，二是盒子左右的外边距都设置为auto，常用写法是 margin：0 auto；（重要）
• 行内元素或者行内块元素想水平居中给其父元素添加 text-align：center 即可
• 相邻块元素垂直外边距的合并：当上下两个块元素相遇时，它们之间的垂直间距并不是 bootom 和 top 之和，而是取两个值中较大的一个；因此我们尽量只给一个盒子添加 margin 值
• 嵌套块元素垂直外边距的塌陷：对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值;但是浮动的盒子并不会有这种问题出现
解决方法：可以为父元素定义上边框、可以为父元素定义上内边距、可以为父元素添加 overflow：hidden； 还有其他的方法：例如浮动、固定、绝对定位的盒子不会有塌陷的问题，之后再总结
• 清除内外边距：网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在网页布局之前，首先要清除网页元素的内外边距
做法：* { padding：0； margin：0；} （这句话也是我们CSS的第一行代码）

5、盒子模型小总结

• 标签都是有语义的，合理的地方用合理的标签，比如产品的标题就用 h ，大量文字段落就用 p
• 页面上展现的盒子像素包括了：边框+内边距+你自己定义的盒子高度和宽度，开发时要注意
• 行内元素尽量只设置左右的内外边距，不设置上下的内外边距，因为好像设置了也不起作用