前端面试题系列一(css) 小灰灰 2022-10-17 10:48 147阅读 0赞 ### 文章目录 ### * * 什么是外边距重叠?重叠的结果是什么? * rgba()和 opacity 的透明效果有什么不同? * 如何垂直居中一个浮动元素? * 哪些 css 属性可以继承? * css 优先级算法如何计算? * 浏览器的内核分别是什么? * CSS3 新增 伪类有那些? -------------------- ## 什么是外边距重叠?重叠的结果是什么? ## 外边距重叠就是 margin-collapse。 在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合 成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为 折叠外边距。 折叠结果遵循下列计算规则: 1. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。 2. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值 3. 两个外边距一正一负时,折叠结果是两者的相加的和。 -------------------- ## rgba()和 opacity 的透明效果有什么不同? ## rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素 内的所有内容的透明度, 而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承 透明效果!) -------------------- ## 如何垂直居中一个浮动元素? ## 方式一:已知元素的高度 #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的 height,width margin-left: -100px; } 方式二:未知元素的高度 #div2{ width: 200px; height: 200px; background-color: #6699FF; margin:auto; position: absolute; //父元素需要相对定位 left: 0; top: 0; right: 0; bottom: 0; } 如何垂直居中img #imgcontainer{ display:table-cell; text-align:center; vertical-align:middle; } ## 哪些 css 属性可以继承? ## 可继承: font-size font-family color, ul li dl dd dt; 不可继承 :border padding margin width height ; ## css 优先级算法如何计算? ## !important > id > class > 标签 !important 比 内联优先级高 * 优先级就近原则,样式定义最近者为准; * 以最后载入的样式为准; ## 浏览器的内核分别是什么? ## IE 浏览器的内核 Trident、 Mozilla浏览器的内核 Gecko、 google 浏览器的内核 WebKit、 Opera 浏览器的内核 Presto; ## 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 元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked,单选框或复选框被选中。
还没有评论,来说两句吧...