匿名网友
1. 盒子模型
标准盒子模型：盒子模型范围包括了margin\border\padding\content.但content(width)不包括其他部分。
IE的盒子模型的content(width)包括了border和padding
目前css3中属性box-sizing可以解决IE7以上的问题。
重新定义盒子大小，解决盒模型在不同的浏览器中表现不一致的问题。
box-sizing: content-box | border-box;
content-box : 定义的width和height就直接是内容的宽度
border-box: 内容的宽度是 width -边框的宽度－padding
CSS定位
2. 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
普通流：元素的位置由它在HTML中的位置决定的。
块级框：从上到下，一个接一个，垂直距离由框的垂直空白边决定的
行内框：水平布置。可使用水平填充，边框可调节水平间距。
position属性
相对定位的盒子仍在标准流中，相对于它原本的位置，通过偏移（left、right）指定的距离，到达新的位置。它对父块没有任何影响。
使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
3.元素选择器，优先级及匹配原理 选择器种类详解
css匹配原理
从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。所以在使用less的时候要防止层叠过多。
css权重
通配选择符的权值 0,0,0,0
标签的权值为 0,0,0,1
类的权值为 0,0,1,0
属性选择的权值为 0,0,1,1(0,0,1,0)
伪类选择的权值为 0,0,1,0
伪对象选择的权值为 0,0,0,1
ID的权值为 0,1,0,0
important的权值为最高 1,0,0,0
使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
从上面我们可以得出两个关键的因素：
1.权值的大小跟选择器的类型和数量有关
2.样式的优先级跟样式的定义顺序有关
总结：比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：
!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承
ID选择器的效率是最高，而伪类选择器的效率则是最低
4. Css水平居中
基础布局对以后的开发很有作用。
自动空白边居中
缺点：IE5/6不支持，需要hack，并需要对两个元素添加样式
<body> <div id=”wrapper”> </div></body>
body{
text-align: center; /*text-align:center让IE中的元素居中*/
min-width: 760px;
}
.wrapper{
margin: 0 auto;
width: 720px;
text-align: left; /* 防止继承父类 */
}
2. 使用定位和负值空白边
.wrapper{
position: relative;
width: 720px;
left: 50%;
margin-left: -360px;
//对应的垂直居中也好处理了
top: 50%;
}
3. 神奇的弹性盒子 flex
IE10+，Android2.1+ ,IOS safire3.2(添加-webkit-)兼容，所以目前移动端可以大量使用。
body{
display: flex;
justify-content: center; //水平居中
//垂直居中
align-items: center; //当然需要设置容器的高度值
}
5. BFC
BFC(box , formatting context)，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
BFC布局规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。(所以有左边宽度自适应)
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
<b>哪些元素会触发BFC</b>
根元素
float属性不为none
position为absolute或fixed
display为 inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
<b>IE如何解决？Layout </b>
position:absolute;
float: left|right;
display: inline-block;
width: value;
height: value;
zoom:value(非normal); //通常zoom:1;
具有以上优点，BFC实际中的作用
自适应布局、清除浮动、防止margin重叠。
6.布局问题
移动端高清、多屏适配方案
1）响应式布局原理
检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度。
因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。
现在CSS3有了个更为实用的 media query。而移动终端的浏览器（都是基于webkit内核的浏览器）基本已经完全支持了css3.他可以为你获取各种终端的数据。
栅栏系统（响应式）
响应式图片
浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过 http://screensiz.es/phone查询。
解决方案：响应式图形的草案：新定义标签<picture>。
高清：通常指的是分辨率高，如iphone6的dpr=2,6plus的dpr=3。
2）静态、自适应、流式、响应式四种网页布局有什么区别
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
把响应式布局看作是流式布局和自适应布局设计理念的融合
7. CSS3新特性
选择器，文本、多列布局、渐变效果、css盒子、边框、背景、动画、转换
8.CSSHack
1.什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
2.方式
1).一般是针对IE浏览器处理
只在IE下生效
<!–[if IE]>
这段文字只在IE浏览器显示
<![endif]–>
只在IE6下生效
<!–[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]–>
只在IE6以上版本生效
<!–[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]–>
只在IE8上不生效
<!–[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]–>
非IE浏览器生效
<!–[if !IE]>
这段文字只在非IE浏览器显示
<![endif]–>
2).类内属性前缀法
hack 写法
* *color
+ +color
– -color
_ _color
# #color
\0 color:red\0
\9\0 color:red\9\0
!important color:blue !important;color:green;
9. link与@import的区别
1. link是HTML方式， @import是CSS方式
2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
3. link可以通过rel=”alternate stylesheet”指定候选样式
4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
5. @import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import
10. display 属性 主要把以下值区别开
display: inline | block | inline-block | inherit ;
1.inline
a) 元素显示方式：”文本方式”，1个挨着1个，不独自占有1行；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
b) 内嵌的元素也必须是内联元素：如<a></a>,不能在里面嵌入<div></div>等块级元素
c) 常用的标签有：<a>、<input>、<label>、<img>
2.block
a) 元素显示方式：每个元素独自占有1行，相当于前后都带有换行符；
b) 内嵌的元素可以是内联或块级元素；
c) 常用的元素有：<h1>~<h6>、<div>、<hr>等等；
3.inline-block(IE8+)
对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格
11. display: none;与visibility: hidden;的区别
共性： 都能隐藏元素
特性：
1. display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
2. display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
3. 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
4. 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容
12. CSS reset
浏览器样式重置。HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。
YUI为我们提供了一个很好的CSS reset，可以直接下载使用，这段代码很成熟，推荐大家使用。YUI的CSS reset主要做了下面几点：
• 白色背景，黑色字体
• margin和padding设为0
• 去掉table的边框
• 去掉列表样式（ol，ul，dl）
• 所有文字字号设为100%
• font-style和font-weight设为normal
• 更好（但不完全）的表格字体继承
• 减小sup和sub对line-height的影响
13. 瀑布流
实现方式：
1. 传统多列浮动
* 各列固定宽度，并且左浮动；
* 一列中的数据块为一组，列中的每个数据块依次排列即可；
* 更多数据加载时，需要分别插入到不同的列上；
优点:
布局简单，应该说没啥特别的难点；
不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
缺点:
列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
滚动加载更多数据时，还要指定插入到第几列中，还是不方便。
2. CSS3 定义,多列布局
#container {
-webkit-column-count: 5；
/*-webkit-column-gap: 10px；
-webkit-column-rule: 5px solid #333；
-webkit-column-width: 210px；*/
-moz-column-count: 5；
/*-moz-column-gap: 20px；
-moz-column-rule: 5px solid #333；
-moz-column-width: 210px；*/
column-count: 5；
/*column-gap: 10px；
column-rule: 5px solid #333；
column-width: 210px；*/
}
column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度； 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏； 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏； 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。
优点:
直接 CSS 定义，最方便了；
扩展方便，直接往容器里添加内容即可。
缺点:
只有高级浏览器中才能使用；
还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。
3.绝对定位（最优方案）
方便添加数据内容，窗口变化，列数/数据块会自动调整
缺点:
需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。
14. 什么是FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。同时加载css文件会阻塞文件下载，在FF下，添加<script> </script>(中间有空格)
解决方法：把样式表放到文档的head
15. 渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
