前端面试题总结整理，css第二篇
2017-09-10 本文已影响0人
起风了_点点
1. 标准的盒子模型(W3C)？与低版本IE盒子模型有什么差异？
- 区别是标准盒子的宽高就是纯粹的content内容的宽高，而在IE5,IE6(怪异的模式)的盒子宽高是content+padding值+border值
- 之后W3C在CSS3中新增了个box-sizing的样式属性，其有两个值：
- 值一为border-box，元素设置的width就等于整个盒子的width(不会因为元素中了再设置了padding和border改变了)。
- 为content-box,元素设置的width+padding+border就等于盒子的width
2. style标签写在body后与body前有什么区别？
- 要解决这个问题，在这里我们首先要了解下浏览器的渲染过程是怎样的？
- creat/update DOM and request css/image/js: 将HTML解析成树状结构DOM（创建/更新），同时对css/image/js发起请求。
- creat/update render CSSOM: CSS文件加载完成，开始构建CSSOM树状结构
- creat/update reder tree: 所有CSS文件下载完成，CSSOM和DOM一起渲染成render tree
- layout: 这棵大树所有结构渲染完后，要做什么呢，就是layout(布局)，就是根据代码来布局每个节点在屏幕所处的位置！！
- painting: 顾名思义，painting画，就是通过显卡把内容画到屏幕上了。
总结：DOM渲染，同时发出JS/image/css请求→CSSOM渲染→DOM和CSSOM结合成整棵render tree→layout布局→painting画
- 上面说了这么多，可以得出原因：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
-
解决方法：使用LINK标签将样式表放在文档HEAD中。
加载顺序.jpg
3. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
- 子绝父相法，代码如下
<style>
body { height: 100%; padding: 0; margin: 0; }
.box { height: 400px; position: relative; }
.div1 { height: 100px; background: #ff0000; }
.div2 { background: #00ff00; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0;}//让top值等于第一个子div的height,而left,bottom,right为0，这样就可以自动填满剩下的空间了，达到高度自适应的目的
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
- 弹性盒子解法,代码如下
<style>
.box {
width:200px;
height:300px;
background:red;
display:flex;
display: -webkit-flex;
flex-direction:column;
-webkit-flex-directioncolumn;
}
.a {height:100px;background:green;}
.b {background:blue;flex:1}
</style>
</head>
<body>
<div class="box">
<div class="a">
</div>
<div class="b">
</div>
</div>
</body>
- box-sizing方法
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>
<style>
.wrap{
height: 400px; padding: 200px 0 0; box-sizing: border-box;
}
.div1{
height: 200px; margin: -200px 0 0; background-color: red;
}
.div2{
height: 100%; background-color: blue;
}
</style>
4. 为什么li元素在设置display: inline-block后 相邻的li之间会出现空隙，怎么解决？
- 原因：
百度的题目，经过实验，所有的block元素设置为dispaly: inline-block后都会出现这种情况的。造成这种现象的原因是 因为代码中这些元素之间的空白字符（即换行）被浏览器渲染成了一个空格，所以出现了空隙了。
- 解决方法:
- 元素写在一行，不换行，缺点是这样不美观
- 为元素设置浮动，因为浮动的特性是让元素紧贴。缺点：有些容器是不能设置浮动，如左右切换的焦点图等
- 包裹这些元素的父元素，比如ul>li，ul设置font-size:0 .缺点：由于继承，导致ul其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
- 包裹元素，如ul的字符间隔设置letter-spacing: -999px(这里试验了下，发现网上设置的-8px,-4px,最后还会存在一点空隙，所以直接设置-999了，请自己再做实验)。然后也是因为继承性，li要设置letter-spacing: normal
