CSS面试题2
时间：2023-03-28 18:06:25
HTML
h1{字体大小：12px;color:#000;风格优先1.InterlineInterlinestyle2.Inlineh1{字体大小：12px;color:#000;3.外部4.重量规则！important>inline>id>class>Elementboxcollapse概念：原本在box里面的元素跑到外面解决方法：1.设置box的宽高2.给外部父box添加float，脱离文档流3.为父框添加overflow属性
4.在父框底部引入一个清晰的浮动块
5.使用after伪元素为外框清除浮动块after伪元素设置clear属性，然后隐藏。bootstrap框架清除浮动的方式6.给父框添加边框7.给父框设置padding-top为什么父元素设置为size，当子元素设置为float属性时，子元素会跳出父元素的边界，尤其是当父元素的高度为auto，且父元素中没有其他浮动元素时，父元素的高度将直接折叠为零。伪类和伪元素的区别1.伪类和伪元素分别用单冒号:和双冒号::表示2.伪类是基于普通dom元素的不同状态，是一定的特性dom元素的使用3.伪元素能够创建DOM树中不存在的抽象对象，并且可以访问这些对象。内联元素的margin/paddingHorizo??ntaldirection:ValidVerticaldirection:InvalidMin-width/max-widthandmin-height/max-height属性很多覆盖规则1.max-width会覆盖width，即使width是内联样式或者已经设置！important2.min-width将覆盖max-width。当min-width和max-width冲突时，会出现此规则。浏览器如何解析css选择器？CSS选择器是从右到左解析的。如果发现从左到右的匹配不符合规则，就需要回溯，这样会损失很多性能。如果是从右向左匹配，先找到所有最右边的节点，对于每个节点，查找其父节点，直到找到满足条件的根元素或匹配规则，则本分支遍历结束。两种匹配规则的性能差别很大，因为从右到左匹配在第一步中筛选掉了大量不合格的最右节点（叶子节点），而从左到右匹配规则的性能是全部浪费在失败的查找上。CSS解析完成后，需要将解析的结果连同DOMTree的内容一起进行分析，建立RenderTree，最终用于绘图。在创建RenderTree（WebKit中的“Attachment”过程）时，浏览器必须根据CSS分析结果（StyleRules）来决定为DOMTree中的每个元素生成什么样的RenderTree。布局未知高度元素垂直居中1.绝对定位+css3.warp{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}2.css3flexlayout.wrap{display:flex;justify-content:center;}.child{align-self:center;}3.tablelayout.wrap{display:table;text-align:center;}。child{background:#ccc;display:table-cell;vertical-align:middle;}.childdiv{width:300px;height:150px;background:red;margin:0auto;}实现图片垂直居中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:middle3。使用绝对定位实现垂直居中*父元素position:relative,子元素img设置position:absolute*img的top设置为50%*img的parentmargin是img宽度的一半,margin-left:-var(width/2）像素；文本元素居中且水平居中1.text-align:center;只对display的容器有效：inline/inline-block2.它有向下传递性，会继续传递垂直居中给子元素1.line-height=height2.父元素的高度不固定，设置填充：50px自动；上下padding就够了3.父元素高度固定，设置vertical-align:middle/display:table-cell
