web前端面试之CSS盒子与选择器（码动未来）
1.1.1、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
2.1.2、CSS选择符有哪些？哪些属性可以继承？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
可继承的样式：font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
2.1.3、CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important比 内联优先级高
2.1.4、CSS3新增伪类有那些？
举例：
p:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。
:after在元素之前添加内容,也可以用来做清除浮动。
:before在元素之后添加内容
:enabled
:disabled控制表单控件的禁用状态。
:checked单选框或复选框被选中。
2.1.5、display:inline-block什么时候会显示间隙？(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
2.1.6、overflow: scroll时不能平滑滚动的问题怎么处理？
1、阻止所有能导致页面滚动的事件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了；
2、bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了；
3、把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上；
4、弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。
2.1.7、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
1、如果外层div高度自适应于内部，就完全不需要额外写规则了，另外一个DIV绝对能撑高外层div，填得紧紧实实的。
2、如果是外层div自适应于它的父级，纯CSS的办法是有的。
3、absolute positioning
外层position: relative；
百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0
QQ技术交流群:815302226
