一、盒子模型
1.标准盒子模型和IE盒子模型
- **标准(W3C)盒子模型：**内容content+填充padding+边框border+边界margin
宽高指的是 content 的宽高
- **低版本IE盒子模型：**内容（content+padding+border）+ 边界margin，
宽高指的是 content+padding+border 部分的宽高
2.CSS如何设置这两种模型
box-sizing : content-box
box-sizing : border-box
3.JS如何设置获取盒子模型对应的宽和高
dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置
4.margin塌陷/margin重叠
标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。
-
兄弟元素之间
竖直方向的margin不叠加，以较大的为准
-
父子元素之间
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
5.BFC
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
1.如何生成BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)【最常用】
2.BFC的原理/BFC的布局规则
- BFC 内部的子元素，在垂直方向，边距会发生重叠。
- BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看
举例1） - BFC区域不与旁边的
float box区域重叠。（可以用来清除浮动带来的影响）。（稍后看举例2） - 计算BFC的高度时，浮动的子元素也参与计算。（稍后看
举例3）
3.BFC的应用
-
解决margin重叠
当父元素和子元素发生 margin 重叠时，解决办法：给子元素或父元素创建BFC
-
BFC区域不与float区域重叠
-
清除浮动
参考链接：CSS盒模型及BFC
二、选择器
1.常用CSS选择器
- id选择器(#myid)
- 类选择器(.myclass)
- 标签选择器(div, h1,p)
- 通配符选择器(*)
- 相邻选择器（h1 + p）
- 子选择器(ul > li)
- 后代选择器(li a)
- 属性选择器(a[rel="external"])
- 伪类选择器(:link, :visited, :active , :hover, :before, :after)
2.CSS3新增伪类
- :first-child 匹配父元素中第一个子元素
- :last-child 匹配父元素中最后一个子元素
- :nth-child() 匹配父元素中第n个子元素（n可以是一个数字，一个关键字，或者一个公式）
- 参数n时选中所有行
- 参数为n+i时表示从第i行开始下面的都被选中，如n+3，从第3行开始下面全部选中
- 参数为-n+i时表示选中前i个元素，如-n+6表示选中前6个
- 2n表示2的倍数行被选中，选中偶数行
- 2n+1表示选中奇数行
- 3n表示每个3行选中一次
- odd表示奇数，even表示偶数
- :nth-last-child(n) 匹配倒数第n个同级兄弟元素
- :nth-of-type(n) 匹配同类型中的第n个同级兄弟元素
- :root 根元素
- :not(selector)
三、样式
1.优先级计算规则
- 最近的祖先样式比其他祖先样式优先级高
- "直接样式"比"祖先样式"优先级高
- 内联样式 > ID 选择器 （权重100）> 类选择器 （权重10）= 属性选择器 = 伪类选择器 > 标签选择器 （权重1）= 伪元素选择器
- !important 拥有最高优先级
2.HTML中引入CSS的方式
-
内联方式：直接在 HTML 标签中的 style 属性中添加 CSS
<div style="background: red"></div> -
嵌入方式：在 HTML 头部中的
<style>标签下书写 CSS 代码<head> <style> .content { background: red; } </style> </head> -
链接方式:使用 HTML 头部的
<head>标签引入外部的 CSS 文件<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> -
导入方式指的是使用 CSS 规则引入外部 CSS 文件
<style> @import url(style.css); </style>
比较链接方式和导入方式（link和@import的区别）
- link属于html标签，除了引入css样式以外还可以定义RSS等其他事物，@import是css提供的，只能引入css
- lilnk在页面加载的时候会同时加载，@import引用的css要等页面加载结束后再加载
- link是html标签，没有兼容性，@import只有ie5以上才能识别
3.常见单位
-
px：绝对单位，页面按精确像素展示
-
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
-
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
-
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
-
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%
-
vmin：vw和vh中较小的那个
-
vmax：vw和vh中较大的那个
-
%:百分比
四、字体
1.如何使用自定义字体
通过@font-face添加样式
支持的字体文件类型：
- EOT
- OTF
- TTF
- WOFF
- WOFF2
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.ttf') format('truetype');
}
#text-element {
font-family: 'Open Sans', Arial, sans-serif;
}
2.如何使用字体图标
推荐：阿里巴巴图标库
-
找到网站，搜索需要的图标
-
将图片加入购物车，点击页面右上角的购物车按钮，将所有图标添加到自定义项目中。
-
在弹出的页面中，点击下载至本地。
-
解压下载后的文件夹，我们需要的是fonts文件夹和style.css, 将这个文件放入你的项目中,style.css文件中引入了字体文件，所以会有路径，这个时候你在使用的时候要注意路径问题，代码如下：（这里的多种字体文件是为了兼容浏览器）
@font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?snsrp8'); src: url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?snsrp8') format('truetype'), url('../fonts/icomoon.woff?snsrp8') format('woff'), url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg'); font-weight: normal; font-style: normal;} -
在页面中，我们只要给一个元素添加相应的类名就行，因为在style.css中已经将类名对应的图标写好了。
.icon-account:before { content: "\e900"; } .icon-caifu:before { content: "\e901"; } .icon-edit:before { content: "\e902"; }<span class="icon-account"></span>
3.让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，
但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑
五、文本属性
1.多行文本省略
text-overflow:ellipsis
使用text-overflow时需要满足：
- 块级元素
- overflow:hidden(非visible)
- width:具体值(max-width,flex也可)
- white-space:nowrap|pre;(不折行)
2.CSS有哪些属性可以继承？
- 字体系列属性：如font，font-family，font-size，font-weight，font-style
- 文本系列属性：如color，text-indent(文本缩进)，text-align(文本水平对齐)，line-height，word-spacing(字间隔)
- 元素可见性：visibility
- 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
- 列表属性：list-style-type、list-style-image、list-style-position、list-style
- cursor
参考链接：css有哪些属性可以继承
六、基本视觉格式化
1.display有哪些值
- inline（默认）–内联
- none–隐藏
- block–块显示
- table–表格显示
- list-item–项目列表
- inline-block-内联块
- flex
- grid-网格布局
2.display：inline-block产生间距解决方法
-
为什么产生间距？
归根结底这是一个西文排版的问题。举一个很简单的例子：
I am very happy
南京市长江大桥欢迎您
英文有空格作为词分界，而中文则没有。（这背后延伸出一个中文分词的问题）
这个问题的原因可以上述到SGML(标准通用标记语言)和TeX(排版工具)，它实际上是一个行内（inline）的问题，它由空格、换行或回车所产生空白符所致
-
解决方法
- 改变书写方式：去掉html中的空格
- 在父容器使用 font-size:0
- 使用margin负值
- 使用word-spacing或letter-spacing
3.display:none 与 visibility:hidden 的区别是什么？
-
是否占据空间
display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。 visibility:hidden，该元素空间依旧存在。 即一个（display:none）不会在渲染树中出现，一个（visibility :hidden）会。
-
是否渲染
display:none，会触发reflow（回流），进行渲染。 visibility:hidden，只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。
-
是否是继承属性
display:none，display不是继承属性，元素及其子元素都会消失。 visibility:hidden，visibility是继承属性，若子元素使用 visibility:visible，则不继承，这个子孙元素又会显现出来。
-
读屏器是否读取
读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。
4.visibility:collapse
-
对于一般的元素，它的表现跟display:hidden是一样的。
-
但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
在不同浏览器下的区别：
- 在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
- 在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。
5.rgba和opacity透明有何不同？
-
rgba()只作用于元素自身的颜色或背景色，对元素的内容没有影响。
-
opacity在作用于元素自身的颜色或背景色的同时，也作用于元素内的内容的透明度。
七、定位
1.position有哪些值
-
static：默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）
-
relative：生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流
-
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
-
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）
-
inherit：规定应该从父元素继承 position 属性的值
-
sticky：粘性定位，它主要用在对 scroll 事件的监听上
2. 居中
绝对定位技巧：
定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际宽度
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际高度
1.1 如何居中div？
1.1.1 水平居中
- 行内元素：父元素是块级元素，给父元素设置
text-align:center，父元素不是块级元素，先将父元素设置为块级元素，再给父元素设置text-align:center - 图片：给图片设置
clear:both;display:block;margin:auto; - 块级元素
方案一：（1）宽度定，需要谁居中，就给谁设置margin:0 auto;
（2）宽度不定，默认子元素宽度与父元素宽度一样，给子元素设置display:inline-block;或display:inline,将其转换成行内块级元素/行内元素，给父元素设置text-align:center
方案二：使用定位属性
子元素设置绝对定位，父元素设置相对定位，left:50%,margin-left:-子元素的宽度的一半(宽度定),或者transform:translateX(-50%)(宽度不定)
方案三：使用flexbox布局实现（宽度定不定都行）
父元素设置display:flex;justify-content:center;
1.1.2 垂直居中
-
单行的行内元素：设置 行高=父元素的高
-
多行的行内元素：父元素设置
display:table-cell;vertical-align:middle（行级、块级、图片都通杀） -
块级元素：
方案一：子元素设置绝对定位，父元素设置相对定位，子元素设置
top:50%;``margin-top:-子元素高度的一半(高度定)，transform:translateY(-50%);(高度不定) 方案二：flex布局，给父元素设置
display:flex;align-items:center;（行级、块级、图片都通杀）
1.1.3 水平垂直居中
-
已知高度和宽度的元素
方案一：子元素设置绝对定位，父元素设置相对定位，子元素设置
left:0;right:0;top:0;bottom:0;margin:auto; 方案二：子元素设置绝对定位，父元素设置相对定位，子元素设置
top:50%;left:50%(左上角垂直居中)，margin-top:-子元素高的一半,margin-left:-子元素宽的一半 -
未知高度和宽度的元素
方案一：（定位属性）子元素设置绝对定位，父元素设置相对定位，子元素设置
top:50%;left:50%(左上角垂直居中)，transform:translate(-50%,-50%)(根据自身定位实现偏移) 方案二：（flex布局）父元素定义
display:flex;justify-content:center;align-items:center;
1.2 如何居中绝对定位的div？
1.3 如何居中一个浮动元素？
-
水平居中
- 定宽：relative + margin-left + left
给浮动元素本身设置
position:relative;left:50%;margin-left:-浮动元素宽的一半- 不定宽：父float + 父relative + 子relative
给父元素清除浮动，设置
float:left;，父元素设置position:relative;left:50%;，内部浮动元素设置position:relative;left:-50%;或right:50%;-
不管定宽还是不定宽：flex
父元素设置
display:flex;justify-content:center;
-
垂直居中
- 定高：（父relative + 子absolute + line-height） + top/bottom或margin-top
方式一：relative + absolute + line-height + top/bottom
#outer {
position: relative;
}
#inner {
line-height:100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
方式二：relative + absolute + line-height + margin-top
#outer {
position: relative;
}
#inner {
line-height:100px;
position: absolute;
top: 50%;
margin-top:-50px
}
<div id="outer" style="height:200px;">
<div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div>
</div>
-
- 通用：flex
#outer { display:flex; align-items:center; } <div id="outer" style="height:200px;"> <div id="inner">我是垂直居中的元素</div> </div> -
水平垂直居中
- flex
- 子元素可以设置 mairgin 以及word-wrap:break-word; 方便效果
八、浮动
1.为什么出现浮动
浮动的初衷，是实现类似word里的文字环绕图片的效果。
普通文档流，因为从上到下，从左到右，规定的太死了，每个元素都被限制了位置。所以才引入了浮动，形成丰富的页面效果。
定位的引入，更加增强了，页面布局的可能。
2.浮动的工作原理
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
3.浮动元素引起的问题
-
父元素的高度无法被撑开，影响与父元素同级的元素
-
与浮动元素同级的非浮动元素会跟随其后
-
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
4.清除浮动的方式
-
父级div定义height
-
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
-
优点：简单，代码少，容易掌握
-
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
-
建议：不推荐使用，只建议高度固定的布局时使用
-
-
额外标签法
- 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
- 优点：简单，代码少，浏览器支持好，不容易出现怪问题
- clear属性只适用于块级元素。这个办法会增加额外的标签使HTML结构看起来不够简洁。
- 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
-
父级 div 定义 overflow:hidden
- 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
- 优点：简单，代码少，浏览器支持好
- 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
- 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
-
父级div定义伪类:after和zoom
-
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题
-
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
-
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
-
建议：推荐使用，建议定义公共类，以减少CSS代码
.clearfix:after{ content:"\0020"; //父元素结尾放一个空白符 height:0; //让这个空白字符不显示出来 display:block; clear:both; //确保这个空白字符是非浮动的独立块 } .clearfix{ zoom:1; //兼容IE6 } -
5.设置元素浮动后，该元素的display值是多少？
自动变为display：block
九、Sass、Less、Stylus区别
1.什么是CSS预处理器?
CSS预处理器是一种语言用来为CSS增加一些编程的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处
2.区别
-
基本语法区别
- Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名
-
变量的区别
-
Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的。
-
Less 变量是以@开头的，其余sass都是一样的。
-
Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在stylus中不能用@开头
-
-
三种预处理器都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等
十、flex布局
1.基本概念
- Flex布局元素，称为Flex容器，简称"容器"。它的所有子元素自动成为容器元素，简称"项目"。
- 容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的排列方式：从左到右；交叉轴的排列方式：从上到下;
2.容器的属性
1.flex-direction
属性决定主轴的方向 (即项目的排列方式）
- row 主轴水平方向，起点在左端
- row-reverse 主轴水平方向，起点在末端
- column 主轴垂直方向，起点在上沿
- colunm-reverse 主轴垂直方向，起点在下沿
2.flex-wrap
- nowrap 默认，不换行
- wrap 换行，第一行在上面
- wrap-reverse 换行，第一行在下面
3.flex-flow
是flex-direction 属性和flex-wrap属性的简写，默认值row、nowrap
4.justify-content
属性定义了项目在主轴上的对齐方式
- flex-start 默认值，左对齐
- flex-end 右对齐
- center 居中
- space-between 两端对齐，项目之间间隔相等
- space-around 两端间隔是中间项目的一半
- space-evenly 项目之间间隔均分（包括与两端的间隔）
5.align-items
定义项目交叉轴上如何对齐（单行）
- flex-start 交叉轴起点对齐
- flex-end 交叉轴终点对齐
- center 垂直方向，居中对齐
- baseline 项目第一行文字基线对齐
- stretch 默认值，如果项目未设置高度或设为auto,将占满整个容器的高度
6.align-content
多行轴线对齐，用法痛align-items
3.项目的属性
1.order
定义项目排列顺序，数值越小越靠前，默认为0
2.flex-grow
定义项目放大比例，默认为0
3.flex-shrink
定义项目缩小比例，默认为1，如果空间不足则会缩小，值为0不能缩小
4.flex-basis
定义项目自身大小，默认auto
5.flex
属性是flex-grow，flex-shrink ,flex-basis的简写，默认值为0、1、auto
6.align-self
项目自身对齐
十一、页面布局
参考链接：各种页面常见布局
页面布局
1.两栏式布局
1.1 左列定宽，右列自适应
1.2 左列自适应，右列定宽
1.3 一列不定，一列自适应
2.三栏式布局
2.1 两列定宽，一列自适应
2.2 两侧定宽，中间自适应
1.浮动
左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.layout article div{
height:100px;
}
.layout.float .left{
float:left;
width:300px;
background-color:red;
}
.layout.float .right{
float:right;
width:300px;
background-color:blue;
}
.layout.float .center{
background-color:green;
}
</style>
</head>
<body>
<section class="layout float">
<article class="left-center-right">
<div class="left">
我是left
</div>
<div class="center">
我是center
</div>
<div class="right">
我是right
</div>
</article>
</section>
</body>
</html>
2.绝对定位
左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.layout article div{
height:100px;
}
.layout.absolute .left-center-right {
position: relative;
}
.layout.absolute .left {
position: absolute;
left: 0;
width: 300px;
background: red;
}
/* 【重要】中间的区域，左侧定位300px，右侧定位为300px，即可完成。宽度会自使用 */
.layout.absolute .center {
position: absolute;
left: 300px;
right: 300px;
background: green;
}
.layout.absolute .right {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout absolute">
<article class="left-center-right">
<div class="left">
我是left
</div>
<div class="center">
我是center
</div>
<div class="right">
我是right
</div>
</article>
</section>
</body>
</html>
3.flexbox布局
将左中右所在的容器设置为display: flex，设置两侧的宽度后，然后让中间的flex = 1，即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout article div {
height: 100px;
}
.left-center-right {
display: flex;
}
.layout.flex .left {
width: 300px;
background: red;
}
.layout.flex .center {
flex: 1;
background: green;
}
.layout.flex .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>flex布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
4.表格布局
设置整个容器的宽度为100%，设置三个部分均为表格(display:table-cell)，然后左边的单元格为 300px，右边的单元格为 300px，即可。中间的单元格会自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout.table div {
height: 100px;
}
/* 重要：设置容器为表格布局，宽度为100% */
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right div {
display: table-cell; /* 重要：设置三个模块为表格里的单元*/
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: green;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout table">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>表格布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
5.网格布局grid
设置容器为网格布局，宽度为100%，设置网格为三列，并设置每列的宽度，即可。
方法1：浮动：
- 优点：兼容性好。
- 缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。
方法:2：绝对定位
- 优点：快捷。
- 缺点：导致子元素也脱离了标准文档流，可实用性差。
方法3：flex 布局（CSS3中出现的）
- 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。
方法4：表格布局
- 优点：表格布局在很多场景中很实用，兼容性非常好。因为IE8不支持 flex，此时可以尝试表格布局
- 缺点：因为三个部分都当成了单元格来对待，此时，如果中间的部分变高了，其会部分也会被迫调整高度。但是，在很多场景下，我们并不需要两侧的高度增高。
什么时候用 flex 布局 or 表格布局，看具体的场景。二者没有绝对的优势，也没有绝对的不足。
方法5：网格布局
- CSS3中引入的布局，很好用。代码量简化了很多。
PS：面试提到网格布局，说明我们对新技术是有追求的。
延伸：如果题目中去掉高度已知
问题：题目中，如果去掉高度已知，我们往中间的模块里塞很多内容，让中间的模块撑开。会发生什么变化？哪个布局就不能用了？
分析：其实可以这样理解，我们回去看上面的动画效果，当中间的模块变得很挤时，会发生什么效果？就是我们想要的答案。
答案是：flex 布局和表格布局可以通用，其他三个布局都不能用了。
3.多列布局
3.1 等宽布局
3.2 九宫格布局
3.3 栅格系统
十二、CSS优化、提高性能的方法
-
避免过度约束
-
避免后代选择符
-
避免链式选择符
-
使用紧凑的语法
-
避免不必要的命名空间
-
避免不必要的重复
-
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
-
避免！important，可以选择其他选择器
-
尽可能的精简规则，你可以合并不同类里的重复规则
-
修复解析错误
-
避免使用多类选择符
-
移除空的css规则
-
正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
-
display:inline后不应该再使用width、height、margin、padding以及float。
-
display:inline-block后不应该再使用float。
-
display:block后不应该再使用vertical-align。
-
display:table-*后不应该再使用margin或者float。
-
不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。
-
不滥用web字体
-
对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-
不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。
-
不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。
-
不给h1~h6元素定义过多的样式
-
全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。
-
不重复定义h1~h6元素
-
值为0时不需要任何单位
-
标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：.foo{
-
-moz-border-radius: 5px; border-radius: 5px; }复制代码 -
使用CSS渐变等高级特性，需指定所有浏览器的前缀
-
避免让选择符看起来像正则表达式
-
CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。
-
遵守盒模型规则（Beware of broken box models）
十三、响应式设计
-
响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
-
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
-
对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：
$(window).resize(function () { screenRespond(); }); screenRespond(); function screenRespond(){ var screenWidth = $(window).width(); if(screenWidth <= 1800){ $("body").attr("class", "w1800"); } if(screenWidth <= 1400){ $("body").attr("class", "w1400"); } if(screenWidth > 1800){ $("body").attr("class", ""); } }
