CSS级联样式表 5.0

浮动（float）

由来：用于图文布局的文字环绕

延伸：块级元素的横向排列

默认元素的普通流（文档流）布局：浏览器默认一个块级元素在父元素内的排列规则是从上到下，从左到右，一个块元素占一行

文档流是网页的基础，我们创建的元素均在文档流中排列

普通文档流后面的元素比前边的元素层级更高

浮动起初是为了文本环绕而产生的

提升了对应元素的层级

浮动元素

块级元素（感受不到浮动元素）

文字（inline inline-block 能感受到浮动元素）

简单将页面元素分级

背景>块级元素>浮动层>文本（inline/inline-block）

浮动层和文本元素互相排斥，不会重合

浮动样式的核心原理

设置时尽量登高，对页面布局更友好

可选值：

• float ：none；默认值 所有元素不浮动
• float ：left；元素向左浮动
• float ：right；元素向右浮动
• float ：inherit；继承父元素浮动属性

浮动元素的特性

1. 浮动元素的水平排列，如果一行排列不下就“换行排列”

   • 没有解析空格
   • 没有对应的垂直外边距的问题
   • margin：0 auto；失效

2. 浮动元素具有包裹性和强制块状化性

   • 浮动会强制将元素转换为块元素，具备所有块元素的特性，除了独占一行和父元素宽度100%的特性，而是由里面的元素所撑开，这就是包裹性，表现出行内块的性质

3. 浮动元素高度塌陷

   • 高度塌陷：大盒子如果不设置高度，内部所有子元素浮动就会高度塌陷，子元素撑不开大盒子
   • 解决方法：
     • 定高（设置高度），不推荐，并非所有子元素的高度都是已知的，不灵活
     • BFC 块级格式化上下文 最简单的BFC就是给元素设置 overflow ：hidden；
     • 给子元素的后面添加一个空div，为其清除浮动，不推荐使用，造成不必要的代码冗余

4. 浮动元素会半脱离文档流

   • 块级元素会感受不到浮动元素 文字可以感受到浮动元素

5. 换行方式变得奇怪

   • 原地向下缩再向前进，不会向上走

6. 伪元素清除浮动来解决高度塌陷问题

   • 清除浮动：不挨着浮动元素，遇到浮动元素之后换行，清除浮动元素对当前元素所产生的影响

     • 可选值：

     • clear ：left；清除左侧浮动元素对当前元素的影响

     • clear ：right；清除右侧浮动元素对当前元素的影响

     • clear ：both；有左边清除左边，有右边清除右边 一般只用这个性质

     • 设置清除浮动之后，浏览器会自动为元素添加一个上外边距，使其位置不受其他元素影响

     • .clearfix::after{
       	content:"";
       	display:block;
       	clear:both;
       } 
       

浮动实现网页布局

1. 划分区域
2. 分别对各个区域进行布局

定位（position）

一种更高级的布局手段，我们通过定位可将元素摆放在任意位置

可选值：

1. static 默认值 静态定位 top left bottom z-index 均无效，遵循正常的文档流，相当于对元素不进行定位设置
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位
5. sticky 粘连定位（了解）

确定元素位置

1. 有定位的参照物
2. 根据参照物去移动位置

相对定位（relative）

参照物：自身 相对于自身进行定位移动

移动位置需要四个属性

1. top：向下移动
2. left：向右移动
3. right：向左移动
4. bottom：向上移动

一般只用top和left，top和bottom冲突了，以top的值为准，left和right冲突了，以left为准 左上方向优先级更高

特点

1. 开启相对定位不设置偏移量不会有任何变化和对页面的影响
2. 相对定位参照自身
3. 相对定位不会脱离文档流，相对移动后不会影响其他元素布局，只是这个盒子表现在页面的位置发生了变化
4. 相对定位不会改变元素性质
5. 相对定位会提升元素的层级

作用

1. 相对定位元素可以做绝对定位的参考盒子，变为绝对定位的参照物
2. 微调元素位置
3. 非常适合用作参照物

绝对定位（absolute）

参照物：有定位属性（非static）的最近的祖先元素，都没有时，将以body为参照物进行定位

根据参照物可移动到页面任意想要去的位置

一般写法

父相子绝

父元素采用相对行为，子元素采用绝对定位

百分比偏移 相对于参照物的padding-box（内容+padding）计算位置 不包含padding

性质

1. 会完全脱离文档流 完全不保留位置，对其他元素不产生干扰，
2. 会对其他元素进行覆盖，影响页面布局
3. 同级绝对定位盒子叠加，后写的在上面
4. 强制转化为块级元素，不具有父级宽度100%、独占一行，由里面的内容进行撑开
5. 绝对定位会使浮动失效
6. 绝对定位会使margin：0 auto；失效
7. 绝对定位子元素宽度百分比也会按照最近一层定位属性的祖先元素去进行计算
8. 高度塌陷
   • 只能通过设置宽高进行解决高度塌陷问题

固定定位（fixed）

所有的性质均可参考绝对定位，参照物除外

参照物：相对于浏览器视口

应用：返回顶部，楼层导航

粘连定位（sticky 了解）

又称：磁贴定位、粘性定位、吸附定位

相对定位和固定定位的结合 制造一个吸附效果

参照物：最近有滚动的祖先元素

绝对定位实现水平垂直居中

方法一：

1. 父元素设置
   • position ：relative；
2. 子元素设置
   • position ：absolute；
   • left:50%；
   • top:50%；
   • margin-left：-50%*子元素整体宽度（包括padding）；
   • margin-top：-50%*子元素整体高度（包括padding）；

**方法二：**必须明确子元素宽高

1. 父元素设置
   • position ：relative；
2. 子元素设置
   • position ：absolute；
   • left：0；
   • top:0；
   • right：0；
   • bottom：0；
   • margin ：auto；

网页的层级（z-index）

七层层叠结构

z-index为负值>背景>块级元素>浮动==文本>z-index为0（默认值 也可是auto）>z-index为正值

同级元素中，后面的层级会高于前面的层级

父子元素中，子元素的层级高于父元素层级

使用z-index可调整同级元素中，z-index越大，层级越高

z-index 可选值

• auto 默认值为0
• 可设置大于或等于0的正整数或者小于0的负整数，只在定位元素内生效
• 设置越大，层级越高
• 小于0的负整数层级最低

样式书写顺序和CSS优化

样式书写顺序

注意样式书写顺序的原因

1. 减少浏览器reflow（重排），提升浏览器渲染dom树的性能

   1. 解析html构建dom树，解析css构建cssom树：将html解析成树形数据结构，将css解析成树形的数据结构
   2. 构建render树：DOM树和CSS树合并后形成render树
   3. 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和及它们的从属关系，从而计算出每个节点在屏幕中的位置
   4. 绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上

   css样式解析到显示至浏览器屏幕上就发生在2、3、4步骤，可见浏览器并不是一获取到css样式就马上开始解析，而是根据css样式的书写顺序将之按照dom树的结构分布render样式，万郴第2步，然后开始遍历每个数结点的css样式进行解析，此时css样式的遍历顺序完全按照之前的书写顺序

2. 样式书写顺序对网页的影响

   • 当浏览器解析到display时，突然发现元素是块级元素，而之前是按照行内元素渲染的，这时不得不回头重新渲染，再按照块级元素解析该行内标签。正确定做法是将display写在样式的最前面，从一开始就以块级元素渲染该行内标签
   • 解析到position时，发现元素定位是绝对定位，需要脱离文档流，而之前都是按照普通文档流解析，又不得不重新渲染
   • 绝对定位是根据已经定位的父元素定位到，如果父元素大小不一样，就会出现盒子大小被重新改变，使页面闪动
   • 大量的重绘页面会导致页面一闪一闪的，影响用户体验

重排（reflow）和重绘（repaint）

• 元素位置是相对的，一个元素位置移动，可能会改变其他元素位置移动，这个过程就叫重排（reflow）
• 一些属性不会影响位置变化，之影响元素外观风格的过程称为重绘

区别：重排必将重绘，重绘未必重排

顺序

1. 定位顺序
   • display
   • position（left top right bottom）
   • float
   • overflow
   • clear
   • z-index
   • content
   • list-style
   • visibility
   • opacity
2. 自身属性
   • width
   • height
   • padding
   • border
   • margin
   • background
3. 文字样式
   • color
   • font-family
   • font-size
   • font-style
   • font-weight
   • font-variant
4. 文本属性
   • text-align
   • vertical-align
   • text-wrap
   • text-transform
   • text-indent
   • text-decoration
   • letter-spacing
   • word-spacing
   • white-space
   • text-overflow
5. CSS3中的新增属性
   • box-shadow
   • cursor
   • border-radius
   • background ：linear-gradient（）/radial-gradient（）；
   • transform……
   • animation

选择器优化

• 不要使用嵌套过多、过于复杂的选择器，保持简单，可以通过样式直接选择，不要画蛇添足
• 避免过多的通配符选择器
• 移除无匹配的样式

其他优化

• 提取公用部分
• 避免使用CSS @import导入CSS
• 简写颜色属性值
• 删除css属性值为0的单位