css面试题二

样式优先级

1.行间

<h1 style="font-size:12px;color:#000;">行间样式</h1>

2.内联

<style type="text/css">
h1{
    font-size:12px;
    color:#000;
}
</style>

3.外部

<link rel="stylesheet" href="css/style.css">

4.权重规则
!important >内联>id>class>元素

盒子塌陷

概念：本来在盒子内部的元素跑到了外部

解决方法：

1.设置盒子的宽高

2.给外部的父盒子也添加浮动，脱离文档流

3.给父盒子添加overflow属性

<div style="overflow:hidden"></div>

4.给父盒子最下方引入清除浮动块

<br style=“clear:both”/>

5.用after伪元素清除浮动，给外部盒子的after伪元素设置clear属性，再隐藏,bootstrap框架清除浮动的方式

<style>
.clearfix{
    *zoom:1;
}
.clearfix:before,.clearfix:after{
    display:table;
    line-height:0;
    content:"";
}
.clearfix:after{
    clear:both;
}
</style>

6.给父盒子添加border

7.给父盒子设置padding-top

为什么出现盒子塌陷

当父元素设置了大小，而子元素设置了浮动属性，子元素就会跳出父元素的边界，尤其当父元素的高度为auto,而且父元素中没有其它浮动元素，父元素的高度就会直接塌陷为零。

伪类与伪元素

区别

1.伪类和伪元素分别用单冒号:和双冒号::来表示

2.伪类是基于普通dom元素而产生的不同状态，他是dom元素的某一特征

3.伪元素是能够创建在dom树中不存在的抽象对象，而且这些对象时能够访问的。

行内元素的margin/padding

水平方向：有效
垂直方向：无效

min-width/max-width和min-height/max-height属性间多的覆盖规则

1.max-width会覆盖width,即使width是行内样式或者设置了！important
2.min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候

浏览器怎么解析css选择器

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS解析完毕后,需要将解析的结果与DOM Tree的内容-起进行分析建立-棵Render Tree，最终用来进行绘图。在建立Render Tree时(WebKit 中的「Attachment」过程)， 浏览器就要为每个DOM Tree中的元素根据CSS的解析结果(Style Rules)来确定生成怎样的Render Tree。

布局

未知高度元素垂直居中

1.绝对定位+css3

.warp{
position:relative;
}
.child{
position:absolute；
top:50%;
left:50%；
transform:translate(-50%,-50%);
}

2.css3的flex布局

.wrap{
display:flex;
justify-content:center;
}
.child{
align-self:center;
}

3.table布局

.wrap{
display:table;
text-align:center;
}
.child{
background:#ccc;
display:table-cell;
vertical-align:middle;
}
.child div{
width:300px;
height:150px;
background:red;
margin:0 auto;
}

实现图片垂直居中

1.使用flex实现图片垂直居中，display:flex;align-items:center;ie8，9不支持

2.利用display:table实现图片垂直居中,给最外层的div设置display属性为table,text-align:center,img的父元素div设置display:table-cell,vertiacl-align:middle

3.用绝对定位实现垂直居中

* 父元素position:relative,子元素img设置position:absolute
* img的top设置为50%
* img的父margin为img宽度一半， margin-left:- var(width/2)px;

文本元素居中

水平居中

1.text-align:center;只对display:inline/inline-block的容器有效

2.具有向下传递性，会不断地向子元素传递

垂直居中

1.line-height=height

2.父元素高度不固定，设置padding: 50px auto;上下padding即可

3.父元素高度固定，设置vertical-align:middle/display:table-cell