书籍:css世界三部曲
Grid？
容器属性
- display: grid
- display: inline-grid
- grid-template-columns: 属性定义每一列的列宽
- grid-template-rows: 定义每一行的行高
-
- repeat(重复次数,重复值)
- auto-fill
- auto-fit
- fr 表示比例关系
- minmax(最小值,最大值)
- auto
- 网格线的名称: 例如: grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]
- grid-gap
-
- grid-row-gap: 行间距
- grid-column-gap: 列间距
- grid-template-areas: 用于定义区域
- grid-auto-flow: row\column\row dense\column dense //定义子元素的排列顺序
- place-items: justify-items\align-items: 设置单元格内容的水平\垂直位置
- place-content: justify-content\align-content: 设置整个内容区域在容器里面的水平\垂直位置
- grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高
项目属性
- 指定项目位置
-
- grid-column
-
-
- grid-column-start属性：左边框所在的垂直网格线
- grid-column-end属性：右边框所在的垂直网格线
-
-
- grid-row
-
-
- grid-row-start属性：上边框所在的水平网格线
- grid-row-end属性：下边框所在的水平网格线
-
- grid-area属性指定项目放在哪一个区域
- place-self: 设置单元格内容的水平\垂直位置,只作用于单个项目
-
- justify-self
- align-self
flex:1 ???
Flex有哪些应用场景？
-
- 网格布局
-
-
- 基本网格布局
- 百分比布局
-
-
- 圣杯布局
什么是css盒模型？如何修改？
BFC?
css3有哪些属性？
-
- content属性、before和after伪元素
- 文本样式
-
-
- text-shadow
- text-overflow文本溢出
- white-space 属性设置如何处理元素内的空白
- word-wrap属性控制文本换行
- word-break属性用来决定自动换行的处理方法
- @font-face 服务器端字符
-
-
- css3颜色
-
-
- opacity
- RGBA
-
-
- 背景
-
-
- background-origin:指定绘制背景图片的起点
- background-clip:用来定义背景图像的裁剪区域
- background-size:背景图片的尺寸大小
-
-
- CSS3设背景渐变色
-
-
- linear-gradient线性渐变
- radial-gradient径向渐变
-
-
- 边框
-
-
- border-image: 图片边框
- border-radius:圆角边框
- box-shadow盒子阴影
-
-
- CSS3变形 transform
- css3过渡 transition
- css3动画 animation
- 多列布局 column
在css中，给子元素设计margin-top值，但是父元素生效了，为什么？如何解决？
-
- 给父容器box加overflow:hidden;属性
- 父容器box加border除none以外的属性
- 用父容器box的padding-top代替margin-top
css3新增的伪类？
伪类、伪元素区别？
-
- CSS伪类：用于向某些选择器添加特殊的效果。
- CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
- 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到
css隔离
css预处理语言的实现原理？
-
- AST
-
- Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
-
-
- 首先less 会转换为ast(抽象语法树）语法
- 然后遍历转换后所有的节点
- 最后再形成css树
-
-
- blog.csdn.net/yushuangyus…
- 取到 DSL 源代码 的 分析树
- 将含有 动态生成 相关节点的 分析树 转换为 静态分析树
- 将 静态分析树 转换为 CSS 的 静态分析树
- 将 CSS 的 静态分析树 转换为 CSS 代码
重排与重绘区别？如何防止？
-
- 重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
- 重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
- 优化方法：
-
-
- 减少布局信息的获取次数，获取后赋值给局部变量，操作局部变量
- 合并多次对DOM 和样式的修改：使用cssText属性
- 合并样式的修改时：修改css的class名称而不是修改内联样式
- 使元素脱离文档流、对其改变后再把元素带回文档中
- 在文档之外创建并更新一个文档片段，然后把它附加到原始列表中
-
文档片段是个轻量级的document对象，用于更新和移动节点。当你附加一个片段到节点中，实际上添 加的是该片段的子节点，而不是片段本身。
