盒子模型
- 就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括IE 盒子模型和标准的 W3C 盒子模型。
- 标准盒子模型的盒子宽度：width
- IE 盒子模型的盒子宽度：左右 border+左右 padding+width
- 在 CSS3 中引入了 box-sizing 属性，box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式。
- 当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
- 当设置box-sizing:border-box时，采用怪异模式进行计算；
link 标签和 import 标签的区别
- 本质区别：link属于HTML标签，无兼容性问题，而@import完全是CSS提供的一种方式。
- 加载顺序的差别： 当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
- JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
Flex 布局
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。
BFC
块级格式化上下文，决定块级盒的布局及浮动相互影响范围的一个区域。
BFC的布局规则例如以下：
- 内部的盒子会在垂直方向，一个个地放置；
- 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
- 每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float重叠；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；
- 计算BFC的高度时，浮动元素也參与计算。
介绍过了BFC的布局规范，再来说说哪些元素会产生BFC：
- 根元素。
- float的属性不为none；
- position为absolute或fixed；
- display为inline-block。table-cell，table-caption。flex；
- overflow不为visible。
未知高度块级元素进行垂直居中
- 设置position：absolute；和transform:traslate(x,y)实现水平垂直居中
.content{ position: absolute; margin：auto； top: 50%;\
left: 50%;\
transform:translate(-50%,-50%); /*针对元素本身向左以及向上移动50%* / }
- 居于视口单位的解决方案：可通过使用margin-top: 50vh;配合transform:translateY(-50%);实现视口居中
.content{ width: 18em;\
margin-top: 50vh; /*50vh表示视口高度的50%* /\
transform: translateY(-50%); /*相对元素自身向上移动50%* / }
- 通过display:table-cell和vertical-align:middle;实现垂直居中
.parent{ display: table;\
width: 50px; /*建议设置宽高，以便于查看效果*/\
height: 500px; }
.content{ display: table-cell;\
vertical-align: middle;\
}
- 基于flex的解决方案
.parent{ display: flex; background-color: beige; }
.content{ margin: auto; /*自动相对于父元素水平垂直居中*/ background-color: aqua; }
块元素和行元素
- 块元素：独占一行，并且有自动填满父元素，可以设置 margin 和pading 以及高度和宽度
- 行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的padding 和margin会失效
position 属性
- 固定定位 fixed
- 相对定位 relative
- 绝对定位 absolute
- 粘性定位 sticky
- 默认定位 Static
- inherit: 规定应该从父元素继承 position 属性的值
浮动清除
当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
- 使用带clear属性的空元素：在浮动元素后使用一个空元素如
<div class="clear"></div>。 - 使用CSS的overflow属性给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动. 在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
- 给浮动的元素的容器添加浮动：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
- 使用邻接元素处理：什么都不做，给浮动元素后面的元素添加clear属性。
- 使用CSS的:after伪元素：结合 :after 伪元素,给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
总结：
- 一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
- 二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素。
css3新特性
- CSS3边框：border-radius；
- CSS3背景：background-size、background-origin；
- CSS3文字效果：ext-shadow、word-wrap；
- CSS3 2D转换：transform、translate()；
- CSS3 3D转换：rotateX()、rotateY()；
隐藏页面中某个元素的方法
- opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的。
- visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
- display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。
重绘和重排，怎么去减少重绘和重排
定义：
- 重绘是一个元素外观的改变导致的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素新的属性呈现新的外观。
- 重排是DOM元素被js触发某种变化，渲染树需要重新计算。浏览器对DOM 树进行重新排列；这便是重排。排列完成之后重新绘制元素则是重绘。
常见的触发重排的操作：
- DOM元素的几何属性变化
- DOM树的结构变化（例如节点的增减、移动）
- 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
- 改变元素的一些样式（例如调整浏览器窗口大小）
两者的区别
- 重绘不会带来重新布局,并不一定伴随着重排.重排一定会重绘。
在实践中应该尽量减少重排次数和缩小重排影响范围，有以下几种方法。
- 将多次改变样式属性的操作，合成一次操作。
- 将需要多次重排的元素,嗯，position属性。设为absolute。或fixed。使其脱离文档流，这样，他的变化就不会影响到其他的元素。
- 在内存中多次操作节点。完成后再添加到文档中去。
- 如果对一个元素进行复杂的操作，可以将display属性设为none嗯使其隐藏。操作完后再显示。
- 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。
.css 布局
圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网格布局。
css 预处理器
less，sass 等。
css 选择器和优先级
- id选择器（#box），选择id为box的元素
- 类选择器（.one），选择类名为one的所有元素
- 标签选择器（div），选择标签为div的所有元素
- 后代选择器（#box div），选择id为box元素内部所有的div元素
- 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
- 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
- 群组选择器（div,p），选择div、p的所有元素
- 通配符选择器(*) ,选择页面所有元素
- 伪类选择器
- :link ：选择未被访问的链接
- :visited：选取已被访问的链接
- :active：选择活动链接
- :hover ：鼠标指针浮动在上面的元素
- :focus ：选择具有焦点的
- :first-child：父元素的首个子元素
- 伪元素选择器
- :first-letter ：用于选取指定选择器的首字母
- :first-line ：选取指定选择器的首行
- :before : 选择器在被选元素的内容前面插入内容
- :after : 选择器在被选元素的内容后面插入内容
- 层次选择器（p~ul），选择前面有p元素的每个ul元素
- 伪类选择器
- :first-of-type 父元素的首个元素
- :last-of-type 父元素的最后一个元素
- :only-of-type 父元素的特定类型的唯一子元素
- :only-child 父元素中唯一子元素
- :nth-child(n) 选择父元素中第N个子元素
- :nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
- :last-child 父元素的最后一个元素
- :root 设置HTML文档 :empty 指定空的元素
- :enabled 选择被禁用元素
- :disabled 选择被禁用元素
- :checked 选择选中的元素
- :not(selector) 选择非(selector)元素的所有元素
- 属性选择器 [attribute*=value]：
- 选择attribute属性值包含value的所有元素 [attribute^=value]：
- 选择attribute属性开头为value的所有元素 [attribute$=value]：
- 选择attribute属性结尾为value的所有元素
