前端开发面试题 — css篇 - Red-Plum

来源：cnblogs　　作者：Red-Plum　　时间：2021/4/19 8:42:43　　对本文有异议

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
（3）区别： IE的content部分把 border 和 padding计算了进去;

2.CSS选择符有哪些？哪些属性可以继承？

选择符
（1）id选择器（ # myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（4）相邻选择器（h1 + p）
（5）子选择器（ul > li）
（6）后代选择器（li a）
（7）通配符选择器（ * ）
（7）属性选择器（a[rel = "external"]）
（9）伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, ul li dl dd dt
不可继承的样式：border padding margin width height

3.CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准；
载入样式以最后载入的定位为准；

优先级:

同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）>外部样式表（外部文件中）。
!important > id > class > tag
important 比内联优先级高

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        单选框或复选框被选中

5.如何居中div？

（1）水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{
    width:200px;
    margin:0 auto;
}

（2）让绝对定位的div居中

div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: pink;	/* 方便看效果 */
}

（3）水平垂直居中一

已知容器的宽高 宽500 高 300 
设置层的 'margin'
div {
    position: relative;		/* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
    background-color: pink;	 	/* 方便看效果 */
}

（4）水平垂直居中二

未知容器的宽高
利用 'transform' 属性
div {
    position: absolute;		/* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;	 	/* 方便看效果 */
}

（5）水平垂直居中三

利用 'flex' 布局
实际使用时应考虑兼容性
.container {
     display: flex;
     align-items: center; 		/* 垂直居中 */
     justify-content: center;	/* 水平居中 */
}
.container div {
     width: 100px;
     height: 100px;
     background-color: pink;		/* 方便看效果 */
}

6.display有哪些值？说明他们的作用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示；
none 元素不显示，并从文档流中移除；
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示；
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示；
list-item 象块类型元素一样显示，并添加样式列表标记；
table 此元素会作为块级表格来显示；
inherit 规定应该从父元素继承 display 属性的值。

7.position的值relative和absolute定位原点是？

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。

8.CSS3有哪些新特性？

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
缩放,定位,倾斜,动画,多背景

transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

9.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。

10.用纯CSS创建一个三角形的原理是什么？

原理：把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

11.一个满屏品字布局如何设计？

实现方式：

上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可

12.css多列等高如何实现？

利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

13.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。

解决方案：

最简单的方法，但是不建议使用，具体可以参照 第15条初始化样式
*{
    margin:0;
    padding:0;
}

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离，如：

#box{ 
    float:left; 
    width:10px; 
    margin:0 0 0 100px;
}
这种情况之下IE会产生20px的距离

解决方案：

#box{ 
    float:left; 
    _display:inline; // '_'这个符号只有ie6会识别
    width:10px; 
    margin:0 0 0 100px;
}

渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{
    background-color:red; /*所有识别*/
    background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff; /*IE6、7识别*/
    _background-color:#1e0bd1; /*IE6识别*/
}

IE下,可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
Firefox下，只能使用getAttribute()获取自定义属性。

解决方案： 统一通过getAttribute()获取自定义属性。

IE下，even对象有x，y属性,但是没有pageX，pageY属性；
Firefox下，event对象有pageX，pageY属性，但是没有x，y属性。

解决方案： （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法： 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了

解决方案：

改变CSS属性的排列顺序: L-V-H-A
a:link {} a:visited {} a:hover {} a:active {}

14.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

15.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法：（强烈不建议）

* {
    padding: 0; 
    margin: 0;
}

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin:0; padding:0; 
}
body, button, input, select, textarea { 
    font:12px/1.5tahoma, arial, \5b8b\4f53; 
}
h1, h2, h3, h4, h5, h6 { 
    font-size:100%; 
}
address, cite, dfn, em, var { 
    font-style:normal; 
}
code, kbd, pre, samp { 
    font-family:couriernew, 
    courier, monospace; 
}
small{ 
    font-size:12px; 
}
ul, ol { 
    list-style:none; 
}
a { 
    text-decoration:none; 
}
a:hover { 
    text-decoration:underline; 
}
sup { 
    vertical-align:text-top; 
}
sub{ 
    vertical-align:text-bottom; 
}
legend { 
    color:#000; 
}
fieldset, img { 
    border:0; 
}
button, input, select, textarea { 
    font-size:100%; 
}
table { 
    border-collapse:collapse; 
    border-spacing:0; 
}

16.css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100

/* 权重为1 */
div{ }
/* 权重为10 */
.class1{ }
/* 权重为100 */
#id1{ }
/* 权重为100+1=101 */
#id1 div{ }
/* 权重为10+1=11 */
.class1 div{ }
/* 权重为10+10+1=21 */
.class1 .class2 div{ }

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

17.请解释一下为什么需要清除浮动？清除浮动的方式

why? 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

方式：
（1）父级div定义height；（要求能够详细计算出实际高度，否则容易布局混乱，不推荐使用。）
（2）父级div 也一起浮动；（与父元素相邻的元素的布局会受到影响，如果全部浮动的话，太麻烦也不利于后期维护，不推荐使用。）
（3）父级div定义 overflow: hidden；（无法显示溢出部分，会触发BFC，不推荐使用。）
（4）浮动元素的父级div定义伪类:after

div::after,div::before{
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
div {
    *zoom: 1;
}

解析原理：

（1）display:block 使生成的元素以块级元素显示，占满剩余空间；
（2）height:0 避免生成内容破坏原有布局的高度；
（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；
（4）通过 content:" "生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:""，有些版本可能content里面内容为空,一丝冰凉是不推荐这样做的，firefox直到7.0 content:"" 仍然会产生额外的空隙；
（5）zoom：1 触发IE hasLayout。

18.什么是外边距合并？

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

19.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上