逆战班月总结

1、html+css经典布局

• 左列定宽，右列自适应
  .left{width:100px;float:left;}
  .right{overflow:hidden;}

• 两列顶宽，中栏自适应
  .left{width:100px;float:left;}
  .right{width:100px;float:right;}
  .center{width:100%;margin:0 100px;}

2、BFC

什么是BFC：

BFC（Block Formatting Context）块级格式化上下文。它是一个独立的渲染区域，就是一个独立的容器，并且这个容器里box的布局与容器外的布局没有关系。

BFC的渲染规则：

a、内部的box会在垂直方向一个接一个的放置

b、box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠

c、每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此

d、BFC的区域不会与float box重叠

e、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

f、计算BFC的高度时，浮动元素也参与计算

如何产生BFC：

a、根元素

b、float不会none

c、position为absolute或fixed

d、display为inline-block、table-cell、table-caption、flex、inline-flex

e、overflow不为visible

BFC的作用：

a、自适应两栏布局

b、清除内部浮动

c、防止垂直margin重叠（放在两个BFC里）

3、什么是精灵图，它的原理是什么，优点是什么

a、将导航背景图片、按钮背景图片等有规则的图片合成一张背景图，然后用background-position来实现背景图片的定位技术。

b、减少对服务器的请求次数，提高页面的加载速度；减小图片体积

4、清除浮动的几种方式

a、给父元素添加overflow:hidden

优点：简单代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸会被隐藏

b、给父元素添加height

优点：简单代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样，会产生问题

c、在浮动元素下方添加空的div标签，并设置样式：　　div{clear:both}

优点：代码少，容易掌握

缺点：增加了空标签，会导致代码冗余

5、visibility:hidden和display:none的区别：

visibility:hidden　　仍然占着位置　　子元素可以继承　　c3的transition属性支持visibility:hidden

display:none　　不占位　　子元素不能继承　　c3的transition属性不支持display:none

6、什么是css样式表？优先级算法如何计算？

层叠样式表

重要性和来源的优先级从低到高是：

a、浏览器默认样式

b、class/id……选择器的权重

c、内部或外部（书写顺序）

d、行内样式

e、!iimportant

7、标准盒模型和怪异盒模型的区别，他们的组成部分

标准盒模型：content+border+padding　　实现：box-sizing:border-box

怪异盒模型：content　　实现：box-sizing:content-box

8、主流浏览器的前缀有哪些

-ms-　　IE

-moz-　　火狐

-webkit-　　谷歌

-o-　　Opera

9、渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

10、rem布局的缺点

a、做出来的效果与效果图有些许偏差

b、雪碧图定位问题

c、rem单位最好不要用在PC端