CSS总结CSS盒子模型盒子模型是装载页面元素的矩阵区域，分为IE盒子模型和标准的W3C盒子模型。包括 margi

CSS盒子模型

盒子模型是装载页面元素的矩阵区域，分为IE盒子模型和标准的W3C盒子模型。

W3C盒子模型

IE盒子模型

包括 margin(外边距)、border(边框)、padding(内边距)、content(内容区)。

区别

W3C盒子模型：width = content_width

IE盒子模型：width = border + padding + content_width

CSS3中引入box-sizing属性，box-sizing:content-box(默认);表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

box-sizing：改变盒子模型

box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框

border-box：为元素设定的宽度和高度决定了元素的边框盒，

inherit：继承父元素的box-sizing

transition和animation的区别

transition 需要触发一个事件才能改变属性，animation不需要触发任何事件的情况下才会随着事件改变属性值。transition 触发一次播放一次；而 animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等

Flex布局

Flex布局又称弹性布局，用来为盒子模型提供最大的灵活性，解决传统布局方案中依赖display，position，float属性，这些不易于实现垂直居中。

容器属性

flex-direction：决定主轴的方向

flex-wrap：决定换行规则

justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

元素属性

order：定义项目的排列顺序，顺序越小，排列越靠前，默认为0

flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小

flex-basis属性：定义了在分配多余的空间，项目占据的空间。

flex: 1

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为1 1 0%; 实现自适应。

flex实现水平垂直居中

1.给父元素设置

body{
  display: flex;
  align-items: center; //定义body的元素垂直居中（主轴居中-主轴默认是x轴）
  justify-content: center; //定义body的元素水平居中//侧轴居中-主轴默认是y轴）
}

BFC

BFC：块级格式化上下文，元素隐含的属性，默认是关闭的。当开启元素的BFC以后，元素会变成一个独立的布局区域，将会具有如下的特性：

1.父元素的垂直外边距不会和子元素重叠(给子元素设置margin，移动父元素)

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

开启BFC：

~~1. 设置元素浮动 float:left (宽度缺失)~~ ~~2. 设置元素为inline-block~~ 3.元素的overflow设置为一个非visible的值 4.设置元素绝对定位 / 固定定位 5.display: flex / inline-block / table-cell

margin塌陷和margin合并

margin塌陷: 父子元素的margin-top取两者中最大值。 margin合并: 两个元素margin-bottom和margin-top合并了，并且显示的是较大值。解决方法：开启BFC

高度坍塌：

在浮动布局中，父元素高度默认是被子元素撑开的，当子元素浮动后会脱离文档流，无法撑起父元素高度，导致父元素高度丢失。

解决方法：

固定父元素的高度
清除浮动：通过伪元素在父元素的底部增加一个块元素，清除浮动，撑起父元素的高度原理：给父元素底部增加一个块元素，添加clear:both后，该块元素会生成margin-top属性，值为浮动元素的高度，从而撑开父元素。

.clearfix::before, /* 垂直外边距不重叠*/
.clearfix::after{ /* 解决高度塌陷*/  
        clear:both; /*清除两侧浮动*/
        content: '';
        display: table;
      }

开启BFC

垂直居中

margin:auto 定位为上下左右为0，margin：0

div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

2.margin-top,margin-left为height和width的一半

.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;

3.table-cell 设置父元素的 display:table-cell,并且vertical-align:middle，

css:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}

JS动画和css3动画的差异

渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成，js动画则会在main thread执行。

区别：

js功能比css多
css3比js更加简单,css动画有天然事件支持
css3有兼容性问题

block, inline, inline-block 区别

block(块元素)：独占一行，前后有换行符，并且有自动填满父元素，可以设置margin和pading以及高度和宽度

inline(行元素)：不会独占一行，width和height会失效，margin/padding在竖直方向上无效。

inline-block(行内块元素)：能设置宽度高度，margin/padding水平垂直方向都有效，前后无换行符。

为什么img是inline还可以设置宽高

实际上img是可替换元素，展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。实际类似于inline-block。典型可替代元素(<iframe>、<video>、<embed>、<canvas>)

position属性

fixed：固定定位。相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
relative：相对定位。通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
absolute：绝对定位。相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<Html>
sticky：粘性定位。相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。相当于fixed + relative
static：默认定位
inherit：继承

CSS3新特性

边框：border-radius，box-shadow

背景：background-size，background-origin

文本：text-overflow: ellipsis (溢出显示...)

动画：Transition，Transform，animation

属性选择器：[attribute^=value]: 选择某元素attribute属性是以value开头的。

伪类选择器：E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。

CSS3选择器(常用)

id选择器
class选择器
标签选择器
伪元素选择器
伪类选择器
通配选择器
属性选择器

选择器优先级：id 选择器 > class 选择器 > 标签选择器

样式优先级：!important > 内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

伪类和伪元素

区别：伪类一般用单冒号 (双冒号会失效)，伪元素可以用单/双冒号。伪元素可以理解成加了一个在DOM种不可见的节点。

常用伪类： :hover :active :nth-child 常用伪元素： ::before ::after

元素消失

display:none (在页面中彻底消失，但还是可以通过DOM进行操作)改变页面布局，回流和重绘
visibility:hiddent (隐藏)不改变页面布局，仅仅重绘
opacity:0 不改变页面布局

图片在某个容器中居中

父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
父元素固定宽高开启relative，子元素设置position: absolute，margin：auto平均分配margin
css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。
父元素设置成display: table, 子元素设置为单元格 display: table-cell。
弹性布局display: flex。设置align-items: center; justify-content: center

三栏布局实现

三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应

//两侧定宽中间自适应
  <style>
  .left {
      float: left;
      height: 200px;
      width: 100px;
      margin-right: 20px;
      background-color: red;
  }
  .right {
      width: 200px;
      height: 200px;
      float: right;
      margin-left: 20px;
      background-color: blue;
  }	
  .main {
      height: 200px;
      overflow: hidden;
      background-color: green;
  }
  </style>

圣杯布局和双飞翼布局

定义三个div:head, main, footer 并设置初始样式
定义main中三个div: center, left, right(center),设置样式
center、left、right 向左浮动, 并给main清除浮动
left设置margin-left: -100%; right设置margin-left: -300px;
圣杯布局 开启相对定位，给 left 和 right 设置相对定位，将它们移动到相应的位置。
双飞翼布局 给center 加一个子元素 inner。给inner设置左margin 和右margin，将inner挤到中间显示。

calc属性

Calc属性用于动态计算长度值，运算符前后都需要保留一个空格。

例如：width: calc(100% - 10px)；

display: table 和 table区别

display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。

层叠上下文(z-index)

z-index只对开启定位的元素有效，设置一个定位元素沿z轴的位置，值越大，离我们越近

background-color

background-color设置的背景颜色会填充元素的content、padding、border区域

回流(重排)和重绘

回流(重排, Layout): DOM元素宽高发生变化时，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排。

页面渲染初始化
浏览器窗口改变尺寸
元素位置 / 大小改变 (外边距，内边框，边框大小，高度/宽度)
添加 / 删除DOM
获取属性 (offset / scroll / client / width / height)

重绘(Painting):浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘。

减少重绘和重排

分离读写操作
样式集中改变
缓存布局信息
DOM离线，使用DocumentFragment
position属性设置为absolute或fixed，重排开销比较小
使用 visibility:hidden / opacity: 0 替代 display: none
使用resize事件时，做防抖和节流处理

overflow原理

BFC

CSS 画0.5px的线

transformer