css面试题（布局/兼容/盒模型）

css面试题

1、阶段1两栏布局

1使用浮动float（div1:宽200高200左浮动，div2:宽不管高200左外边距200）

<style>
    *{margin:0;padding:0;}
    .wrap{overflow:hidden;border:1px solid red;}
    .left{float:left;width:200px;height:200px;background:purple;}
    .right{margin-left:200px;background:green;height:200px;}
</style>
<div class="wrap">
    <div class="left">左侧固定内容</div>
    <div class="right">右侧内容自适应</div>
</div>

2使用绝对定位absolute（div1:宽200高200左绝对定位，div2:宽不管高200左外边距200）

<style>
*{margin:0;padding:0;}
.wrap{overflow:hidden;position: relative;}
.left{position: absolute; left: 0;top: 0;width: 200px; height: 200px;background: purple;}
.right{margin-left:200px;background:green;height:200px;}
</style>
<div class="wrap">
    <div class="left">左侧固定内容</div>
    <div class="right">右侧内容自适应</div>
</div>

3使用弹性布局flex（div1:宽200高200，div2:高200左外边距200）
等等

------------------
|     |  		  |
|     | 		  |
| 固定 | 自适应区域  |
|     | 		  |
|     | 		  |
--------------------

2、样式兼容

css hack 例如：

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

 1、下划线属性过滤器     属性
语法：.box{ background:blue; _backgroune:red; }
注：只有IE6识别，其他浏览器不识别
2、！important关键词过滤器          属性值
语法：.box{ background:orange !important; background:blue; }
注：除了IE6不识别，其他浏览器都识别
3、*属性过滤器          属性
语法：.box{ background:blue; *background:purple; }
注：只有IE6 IE7识别，其他浏览器不识别
4、\9               属性值
语法：.box{ background:blue; background:yellow\9; }
注：IE6、7、8、9、10识别，其他浏览器都不识别
5、\0               属性值
语法：.box{ background:blue; background:pink\0; }
注：IE8及以上浏览器都识别，其他浏览器不识别

1、双倍浮动bug
   描述：块元素设置浮动后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，2倍关系。
   解决方案：给浮动的块元素设置display：inline；
2、表单元素行高不一致
   解决方案：1、input{ float:left; }
             2、给表单元素添加一致的vertical-align属性值
   扩展：去掉表单元素的外边框
   input{ outline:none; }
3、当图片添加超链接时，在某些浏览器中会出现带有颜色的边框
解决方案：
img{ border:none; }
4、在IE6不能识别较小高度的容器
   解决方案：元素{ overflow:hidden; }
5、在IE6中不能识别min-height属性
   解决方案：_height:100px;
6、图片默认有空隙
   解决方案：
      1、img{ display:block; }
      2、img{ float:left; }
      3、img{ vertical-align:top/middle/bottom; }
      4、给图片所在的父元素添加font-size：0；
7、在IE8及以下浏览器中，不能识别opacity属性    透明属性
解决方案：filter：alpha（opacity=数值）；
8、鼠标指针bug
   表述：cursor：hand；只有IE8及以下的浏览器识别，其他浏览器不识别
   解决方案：cursor：pointer；所有浏览器都支持，将鼠标指针形状设置为手的形状
9、百分比bug
   在IE6下俩个子元素设置宽度50%，加起来大于父元素的宽度100%
   解决方案：给右侧浮动的元素添加clear：right；

3、盒模型

什么是盒模型？

网页布局中CSS布局的思想模型，
主要规定元素和元素之间的关系
例如：内容（content）,内边距（padding）,边框（border）,外边距（margin）

如何设置怪异盒模型，与普通盒模型区别（解决盒子加上了边框，宽度溢出的问题）

表示怪异盒模型（移动布局！！
CSS语法：border-sizing: border-box 
规则：width + margin(左右)（即width已经包含了padding和border值） 

标准盒模型
CSS语法：border-sizing: content-box
规则：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

有几种方式？让元素竖直方向居中

定位
弹性布局
等