目录
display 的 block、inline、和 inline-block 的区别
盒子模型
包含： margin、border、padding、content
标准模型（默认）W3C：
盒子总宽度： width+padding+border+margin
盒子总高度： height+padding+border+margin
也是就，width+height 只是内容（content），不包含 padding 和 border 值
怪异模型（box-sizing：border-box）：
值 解析 content-box 默认值，元素的 width/height ，不包含 padding，border，与标准盒子模型表现一致 border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致 inherit 指定 box-sizing 属性的值，应该从父元素继承
选择器
类型 与 优先级
名称
形式
作用
优先级
id选择器
#box
选择 id 为 box 的元素
100
类选择器
.one
选择类名为 one 的所有元素
10
标签选择器
div
选择标签为 div 的所有元素
1
后代选择器
#box div
选择 id 为 box 元素内部所有的 div 元素
0
子类选择器
one>one_1
选择父元素为 .one 的所以 .one_1 元素
0
相邻选择器
.one+.two
选择紧接在 .one 子后的所有 .two 元素
0
群类选择器
div,p
选择div、p 的所有元素
0
伪类选择器
:hover
鼠标指针浮动在上面的元素
10
伪元素选择器
::after
选择器在被选元素的内容后面插入内容
1
属性选择器
[attribute]
选择带有 attribute 属性的元素
10
层次选择器
p~ul
选择前面有 p 元素的每个 ul 元素
0
通配符先择器
*
选择所有元素
0
伪元素和伪类的区别和作用
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素
p::after{ width: 50px; height:50px; background-color: red; }伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。
a:hover{ color: #fff }总结： 伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变
无继承性的属性与右继承性的属性
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align 垂直文本对齐 text-decoration 规定添加到文本的装饰 text-shadow 文本阴影效果 white-space 空白符的处理 unicode-bidi 设置文本
3、盒子模型的属性： width、height、margin、border、padding
4、背景属性：
background 合成 background-color 背景颜色 background-image
背景图片 background-repeat 是否重复 background-position 定位图片 background-attachment 固定图片 5、定位属性：
float 浮动 clear 清除 position 定位 overflow 溢出元素处理 z-index 堆叠顺序
6、轮廓样式属性：
outline-style 样式 outline-width 边宽宽度 outline-color 边框颜色 outline 合成
7、页面样式：size、page-break-before、page-break-after
8、声音样式：pause-before、pause-after、pause、cue-before、cue、play-
during
二、有继承性的属性
1、字体系列属性
font-family 字体系列 font-weight 字体的粗细 font-size 字体的大小 font-style 字体的风格 2、文本系列属性
text-indent 文本缩进 text-align 文本水平对齐 line-height 行高 word-spacing 单词之间的间距 letter-spacing 中文或者字符之间的间距 text-transform 控制文本大小写（uppercase、lowercase、capitalize） color 文本颜色 3、元素可见性
visibility 控制元素显示隐藏 4、列表布局属性
list-style 列表风格，包括list-style-type、list-style-image 5、光标属性
cursor 光标显示为何种形态
CSS3 新增属性
| 新增各种CSS选择器 | （:not(.input):所有 class 不是“input”的节点） |
| 圆角 | border-radius |
| 多列布局 | multi-column |
| 阴影和反射 | shadoweflect |
| 文字特效 | text-shadow |
| 文字渲染 | text-decoration |
| 线性渐变 | gradient |
| 旋转 | transform |
| 增加了旋转，缩放，定位，倾斜，动画，多背景 |
单位 em/px/rem/vh/vw
1、px
表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中
2、em相对长度单位
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）
em 的值并不是固定的
em 会继承父级元素的字体大小
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
任意浏览器的默认字体高都是 16px
<style> html {font-size: 10px; } /* 公式16px*62.5%=10px */ .big{font-size: 1.4rem} .small{font-size: 1.2rem} </style>3、rem相对单位
相对的只是HTML根元素font-size的值
特点：
rem单位可谓集相对大小和绝对大小的优点于一身
和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
html {font-size: 62.5%; } /* 公式16px*62.5%=10px */4、vh、vw
就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
在桌面端，指的是浏览器的可视区域
移动端指的就是布局视口
5、%
百分比宽泛的讲是相对于父元素
对于普通定位元素就是我们理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于 ViewPort（可视窗口）
响应式设计
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大小和位置 实现方式：
rem 百分比 % vw/vh 媒体查询 meta 媒体查询：响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
width = device-width 自适应手机屏幕的尺寸宽度 maximum-scale 缩放比例的最大值 inital-scale 缩放的初始化 user-scalable 用户的可以缩放的操作
媒体查询的理解
媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜⾊。媒体查询，添加⾃CSS3，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身，适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配
媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效。
<!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
BFC
是什么
相关概念： 元素之间的相互影响，导致了意料之外的情况，这涉及到BFC概念
BFC概念： 块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则。
特点：
内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的两个响铃的盒子的margin会发生重叠，与方向无关 每个元素的左外边距与包含块的左边界相接触（从左到有），即使浮动元素也是如此 BFC的区域不会与float的元素区域重叠 计算BFC的高度是，浮动子元素也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 目的：BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
触发条件：
根元素 body 元素设置浮动 float 除 none 以外的值 元素设置绝对定位 position（absolute、fixed） display inline-block、table-cell、table-caption、flex overflow hidden、auto、scroll BFC的作用：
- 解决 margin 的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题
<style> .wrap { overflow: hidden;// 新的BFC } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p > <div class="wrap"> <p>Hehe</p > </div> </body>- 解决高度塌陷的问题：在对子元素设置了浮动后，父元素会发生高度塌陷。也就是父元素的高度变为0。解决这个问题，值需要吧父元素变成一个BFC，每常用的办法是给父元素设置overflow:hidden
- 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; overflow: hidden; } </style> <body> <div class="aside"></div> <div class="main"></div> </body>
Css性能优化
加载性能：
- css压缩：将写好的css进行打包压缩，可以减小文件体积
- css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin：top 0 bottom 0；但 margin-bottom:bottom;margin-left:left;执行效率会更高
- 减少使用 @import，建议使用link。因为后者在页面加载时一起加载，前者时等待页面加载完成之后再进行加载
选择器性能：
- 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符时从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否指定的元素；
- 如果规则有用ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
- 避免使用统配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
- 尽量少的去对标签进行选择，而是用class
- 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择其的深度降到最低，最高不超过三层，更多的使用类来关联每一个标签元素
- 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
渲染性能：
- 慎重使用高性能属性：浮动、定位
- 尽量减少页面重排、重绘
- 去除空规则：{}。空规则的产生原因一般来说是伪类预留样式。去除这些空规则无疑能减少css文档体积
- 属性值为0时，不加单位
- 属性值为浮动小数0.**，可以省略小数点之前的0
- 标准化各种浏览器前缀，它会影响CSS的加载速度
- 选择器优化嵌套，尽量避免层级过深
- 正确是使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能
- 不滥用web字体
可维护性、健壮性：
- 将具有相同属性的样式抽离出来，整合并通过class再页面中进行使用，提高css的可维护性
- 样式与内容分离：将css代码定义到外部css中
回流与重绘
回流
是什么：
布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
触发时机：
- 获取一些特定属性的值
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
- 页面一开始渲染的时候（这避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
重绘
是什么：
当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
触发时机：
- 触发回流一定会触发重绘
- 文本方向的修改
- 阴影的修改
- 颜色的修改
减少回流重绘
如果想设定元素的样式，通过改变元素的class类名（尽可能再DOM树的最里层） 避免设置多项内联样式 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算 对于哪些复杂的动画，对其设置 position：fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素地影响 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流
避免使用CSS的JavaScript表达式 再使用HavaScript动态插入多个节点时，可以使用DocumentFragment创建后一次插入，就能避免多次的渲染性能
离线操作：可以通过设置元素属性display：none，将其从页面上去掉，然后再进行后续操作，这些操作不会触发回流与重绘
display的属性及其作用
属性值 作用 none 元素不显示，并且会从文档流中移除 block 块类型。默认宽度为父元素宽度，可设置宽度，换行显示 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示 list-item 像块类型元素一样显示，并添加样式列表标记 table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承display属性的值
display 的 block、inline、和 inline-block 的区别
| block | 会独占一行，多个元素会另起一行，可以设置width、height、margin和paddinig |
| inline | 元素不会独占一行，设置width、height无效，但可以设置水平方向的margin 和 padding属性，不能设置垂直方向的padding和margin |
| inline-block | 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同用一行 |
行内元素：
| 设置宽高无效 |
| 可以设置水平方向的margin 和 padding，不能设置垂直方向的margin 和padding |
| 不会自动换行 |
块级元素：
| 可以设置宽高 |
| 设置margin和padding都有效 |
| 可以自动换行 |
| 多个块状，默认排列从上到下 |
对 requestAnimationframe 的理解
transition 和 animation 的区别
transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。他类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧
animation是动画属性，它的实现不需要触发事件，设定好事件之后可以自己执行，且可以循环一个动画，它也类似与flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画
为什么有时候用 translate 来改变位置而不是定位
translate 是 transform 属性的一个值，改变transform或opacity不会触发浏览器重新布局（reflow）或者重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而吃法重绘和复合。transform使浏览器为元素创建一个GPU图层，但改变绝对定位会使用到CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况、
隐藏页面元素
- display：none
元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘 消失后，自身绑定的时间不会触发，也不会有过度效果 特点：元素不可见，不占据空间，无法响应点击事件 - visibility：hidden
从页面上仅仅时隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘 给人的效果是隐藏了，所以他自身的事件不会触发 特点：元素不可见，占据页面空间，无法响应点击事件 - opacity：0
不会引发重排，一帮情况下也会引发重绘 由于其仍然是存在与页面上的，所以他自身的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的 需要注意的是：其子元素不能设置opacity来达到显示效果 特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件 - height：0；width：0
- position：absolute
- clip-path
水平垂直居中
布局
- 利用定位+margin：auto
父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高 这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了 - 利用点位+margin：负值
初始位置方块1的位置 当设置left、top为50%的时候，内部子元素为方块2的位置 设置margin为负数时，使内部子元素到方块3的位 这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作 但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移动 - 利用定位+transform
translate(-50%, -50%)将会将元素位移自己宽度和高度的-50% 这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高 - table布局
设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中 - flex布局
display: flex时，表示该容器内部的元素将按照flex进行布局 align-items: center表示这些元素将相对于本容器水平居中 justify-content: center也是同样的道理垂直居中 - grid布局（兼容性差）
文本
单行文本父元素确认高度 line-height === height 多行文本父元素确认高度 display: table-cell; vertical-align: middle
line-height 的理解及其赋值方式
- line-height的概念
line-height指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height决定 一个容器没有设置高度，那么撑开容器高度的是line-height，而不是容器内的文本内容 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中 line-height 和 height 都能撑开一个高度 - line-height的赋值方式
带单位 px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高 纯数字 会把比例传递给后代。例如，父级行高为1.5，子元素字体18px，则子元素行高为 1.5*18 = 27px 百分比 将计算后的值传递给后代
单行/多行文本显示
单行文本溢出：
overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不进行换行多行文本溢出：
webkit：
overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 display:-webkit-box; // 作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 -webkit-line-clamp:3; // 显示的行数伪元素 + 定位：
<style> .demo { position: relative; line-height: 20px; height: 40px; overflow: hidden; } .demo::after { content: "..."; position: absolute; bottom: 0; right: 0; padding: 0 20px 0 10px; } </style> <body> <div class='demo'>这是一段很长的文本</div> </body>
画三角形
原理分析：
边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的 当仅有邻边时， 两个边会变成对分的三角 当保留边没有其他接触时，极限情况所有东西都会消失
判断元素是否到达可视区域
window.innerHeight 是浏览器可视区的高度 document.body.scrollTop
document.documentElement.scrollTop是浏览器滚动过的距离 imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离） img.offsetTop<window.innerHeight+
document.body.scrollTop内容达到显示区域
z-index属性在什么情况下会失效
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。
失效情况：
父元素position为relative时，子元素的z-index失效。
解决：父元素position改为absolute或static元素没有设置position属性为非static属性。
解决：设置该元素的position属性为relative，absolute或是fixed中的一种元素在设置z-index的同时还设置了float浮动。
解决：float去除，改为display：inline-block
Sass、Less是什么？为什么要使用他们？
他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)
为什么使用？
结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
