css面试题
你很棒棒哦
web前端未来攻城狮 一起努力 一起成长
展开
-
CSS面试题31-35
31.zoom:1 的清除浮动原理? 清除浮动,触发hasLayout; zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距(margin) 的重叠,浮动清除,触发ie的haslayout属性等。 来龙去脉大概如下: 当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发 生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。 zoom属性是IE浏览器原创 2020-12-08 14:24:40 · 289 阅读 · 0 评论 -
CSS面试题26-30
26.margin 重叠问题的理解。 相关知识点: 块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin合 并”。 产生折叠的必备条件:margin必须是邻接的! 而根据w3c规范,两个margin是邻接的必须满足以下条件: •必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。 •没有线盒,没有空隙,没有padding和border将他们分隔开 •都属于垂直方向上相邻的外边距,可以原创 2020-12-08 13:57:06 · 301 阅读 · 0 评论 -
CSS面试题21-25
21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别? (1)对于一般的元素,它的表现跟visibility:hidden;是一样的。元素是不可见的,但此时仍占用页面空间。 (2)但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的 表现却跟display:none一样,也就是说,它们占用的空间也会释放。 在不同浏览器下的区别: 在谷歌浏览器里原创 2020-12-08 11:23:51 · 258 阅读 · 0 评论 -
CSS面试题16-20
16.CSS 多列等高如何实现? (1)利用padding-bottom|margin-bottom正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏(overflow: hidden),这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则 父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。 (2)利用table-cell所有单元格高度都相等的特性,来实现多列等高。 (3)利用原创 2020-12-08 10:25:50 · 210 阅读 · 0 评论 -
CSS面试题11-16
11.position 的值 relative 和 absolute 定位原点是? 相关知识点: absolute 生成绝对定位的元素,相对于值不为static的第一个父元素的padding box进行定位,也可以理解为离自己这一级元素最近的 一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。 fixed(老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。 relative 生成相对定位的元素,相对于其元素本身所在正常位置进原创 2020-12-08 10:04:05 · 149 阅读 · 0 评论 -
CSS相关面试题6-10
6.CSS 优先级算法如何计算? 相关知识点: CSS的优先级是根据样式声明的特殊性值来判断的。 选择器的特殊性值分为四个等级,如下: (1)标签内选择符x,0,0,0 (2)ID选择符0,x,0,0 (3)class选择符/属性选择符/伪类选择符 0,0,x,0 (4)元素和伪元素选择符0,0,0,x 计算方法: (1)每个等级的初始值为0 (2)每个等级的叠加为选择器出现的次数相加 (3)不可进位,比如0,99,99,99 (4)依次表示为:0,0,0,0 (5)每个等级计数之间没关联 (原创 2020-12-07 16:52:20 · 136 阅读 · 0 评论 -
CSS相关面试题1-5
1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 相关知识点: (1)有两种盒子模型:IE盒模型(border-box)、W3C标准盒模型(content-box) (2)盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分 IE盒模型和W3C标准盒模型的区别: (1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding (2)IE盒模型:属性width,h原创 2020-12-07 14:30:10 · 213 阅读 · 0 评论