从左往右 从上到下依次排序 flex css_CSS 知识总结

前言

近一周学习了CSS的用法，在此对一周所学进行总结。

语法

常用的CSS语法大致可分为四种,：

1. 选择器{属性名: 属性值 /*注释*/}，如

div{background: red;}

2. @charset，用于设置样式表中的字符编码，必须放在第一行，这样下面的代码才能显示正确的字符，如

@charset "UTF-8"

3. @import，用于从其他样式表导入样式规则，如

@import url("test.css");

4. @media，媒体查询，可根据一个或多个规则应用样式表，如

@media (min-width: 100px) and (max-width: 200px) {
  div {
    background: red;
  }
}

文档流

• 流动方向 文档流根据从左到右，从上到下来进行排布
• 宽高 影响inline元素高度的是实际高度（间接由行高决定，之所以是间接因为还可能跟字体有关。参考链接：

方应杭：深入理解 CSS：字体度量、line-height 和 vertical-align​zhuanlan.zhihu.com

• 脱离文档流 使元素脱离文档流的属性：float、position: absolute/fixed
• 盒模型
  • content-box 宽度只包含内容
  • border-box 宽度包含内容、内边距和border

• margin合并 父子和兄弟的margin会进行合并（只有上下会合并，左右不会合并）
  • 如何阻止合并 在相邻要合并的元素之间放入东西挡住如border、hidden等或者使用flex布局

布局

• float布局 给子元素设置宽度和float后需要在父元素加上clearfix
• flex布局
• grid布局

定位

• div的分层 从上到下依次为：background > border > 块级元素 > 浮动元素 > 内联子元素 > 定位元素（相同的元素以后出现的在上）
• position
  • static 默认值，不会脱离文档流
  • relative 相对定位，不会脱离文档流
  • absolute 绝对定位，相对于祖先元素中最近的一个定位元素定位（即属性不是static）
  • fixed 固定定位，会被祖先元素的transform影响，手机上尽量不要使用
  • sticky 粘滞定位，屏幕滑动到拥有该属性的元素位置，该元素会贴到屏幕上方跟随滚动
• 层叠上下文
  • 每个层叠上下文都是一个独立作用域
  • 可以创建层叠上下文的属性
    • z-index，flex，opacity，transform等，参考链接：

层叠上下文​developer.mozilla.org

浏览器渲染原理

• 过程

1. 构建HTML树（DOM）
2. 构建CSS树（CSSOM）
3. 将前两颗树合并成一颗渲染树（render tree）
4. 浏览器对页面进行Layout布局（文档流、盒模型、计算位置大小）
5. 进行Paint绘制（绘制边框、文字的颜色和阴影等）
6. Compose合成（根据层叠关系展现画面）

• 更新样式

一般使用js来更新样式，如

1. div.style.background = 'red';

2. div.classList.add('red);

3.div.remove();

更新样式时并不是所有的方法都会让浏览器重新渲染一遍，会根据更新的不同，更新不同个步骤，大概如下几种方式

渲染性能 | Web | Google Developers​developers.google.cn

CSS动画

• transform常用属性，通常和transition一同使用
  • 位移translate
  • 缩放scale
  • 旋转rotate
  • 倾斜skew
• animation，配合@keyframes使用

参考：

transform​developer.mozilla.org

animation​developer.mozilla.org

一些注意和小技巧

• 首先要注意class是区分大小写的。
• 除了在控制台调试外，还可以使用border大法，即给元素设置border来进行调试。
• 在新的HTML5的标准中元素已经不再区分内联和块级元素了，display设置什么即是什么。
• 不要在inline元素中加block元素。
• block元素默认宽度不是100%，而是在不影响其他元素的情况下尽量的占满，除非特殊情况否则不要设置宽度100%。
• 背景颜色是从边框开始，不是从内边框开始。