css面试题

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

盒子模型包括：内容（content）、内边距（padding）、外边距（margin）、边框（border）。
标准盒模型的宽高 = content
低版本 ie 盒模型的宽高 = content + padding + border （等同于标准盒模型下设置 box-sizing: border-box;）
box-sizing 用于设置盒模型，box-sizing: content-box;（w3c标准盒模型），box-sizing: border-box;（低版本ie盒模型）。

2、开发中为什么要初始化css样式

因为浏览器的兼容问题，不同的浏览器对一些标签的默认值是不同的，如果不做css初始化，那么可能会出现页面显示的差异。

3、css选择器有哪些？哪些属性可以继承？

css选择器：

id选择器(#myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
相邻选择器(h1 + p、h1 ~ p)
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=”external”]）
伪类选择器（a:hover, li:nth-child）

优先级：!important > id > class > tag （!important 比内联优先级高）。
可继承属性：主要是一些文字、文本类的属性。

4、css优先级算法

内联样式：1000
id选择器：100
class选择器、伪类、属性选择器：10
标签选择器、伪元素选择器：1

5、css3新增的选择器和属性有哪些？

属性选择器

[att^="val"] 属性att的值以"val"开头的元素。
[att$="val"] 属性att的值以"val"结尾的元素
[att*="val"] 属性att的值包含"val"字符串的元素

伪类选择器（常见的）

:nth-child() p:nth-child(2) 父元素下的第二个子元素，且刚好是 p 标签的，才选中。
:nth-of-type() p:nth-of-type(2) 父元素下的所以子元素中第二个 p 标签元素。
:first-child 等同于 :nth-child(1)
:enabled :disabled 启用、禁用的表单元素
:checked 被选中的表单元素

新增属性（常见的）

transition
transform
animation
box-shadow
text-shadow
border-radius
box-sizing
opacity 元素不透明度（IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)）
text-overflow text-overflow: ellipsis; 配合 white-space: nowrap; 实现文本内容超出部分显示省略号。
word-wrap word-wrap: break-word; 英文单词换行。
background-size
rgba()

6、水平垂直居中的几种方法

水平居中

1、如果是行内元素，只需在父元素设置 text-align: center; 即可。

2、块级元素，只需设置 margin: 0 auto; 即可。
如下元素结构：

<div id="wrap">
    <div id="box">hello world</div>
</div>

3、absolute + magin
定位位置为 left: 50%; 然后 margin-left: -50px; 向左偏移元素宽度的一半。
缺点：要知道元素的宽度

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

4、absolute + translate
跟上面方法差不多，用 transform: translateX(-50%); 代替 margin-left，这样就不需要知道元素的宽度了。
缺点：transform 的兼容性（ie10）

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

5、absolute + margin auto
元素定位 left: 0; right: 0; margin: 0 auto; 即可。

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

6、flex
弹性布局什么的最喜欢了。
缺点：flex 兼容性（ie11）

#wrap{
    display: flex;
    justify-content: center;
}

垂直居中

垂直居中跟水平居中有很多相似的方法。

1、如果是单行文本，设置 line-height 即可。

2、absolute + magin
定位位置为 top: 50%; 然后 margin-top: -50px; 向上偏移元素高度的一半。
缺点：要知道元素的高度

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

3、absolute + translate
跟上面方法差不多，用 transform: translateY(-50%); 代替 margin-top，这样就不需要知道元素的高度了。
缺点：transform 的兼容性（ie10）

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

4、absolute + margin auto
元素定位 top: 0; bottom: 0; margin: auto 0; 即可。

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

5、display: table-cell
在父元素设置 display: table-cell; 将普通元素变成 table 元素，再设置 vertical-align: middle; 垂直居中。

#wrap{
    display: table-cell;
    vertical-align: middle;
}

6、flex
缺点：flex 兼容性（ie11）

#wrap{
    display: flex;
    align-items: center;
}

参考文章

7、display有哪些值？说说它们的作用

常见的值：

inline 默认值。此元素会被显示为内联元素，元素后面没有换行符。
block 此元素会被显示为块级元素，元素前后会带有换行符（元素独占一行）。
inline-block 行内块级元素。
table 此元素会作为表格元素显示。
list-item 此元素会作为列表项显示。
flex css3弹性布局。
none 次元素不被显示。

8、position有哪些值？

static 默认值。没有定位，按照正常文档流排列。
relative 相对定位，不脱离文档流，正常文档流中定位（多用于配合子元素absolute）。
absolute 绝对定位，脱离文档流，参照最近的非 static 定位的父级元素进行定位。如果父级元素都没有定位属性，则相对根元素（html）进行定位。
fixed 固定定位，脱离文档流，参照浏览器窗口进行定位，如果父元素有 transform 属性，那可能会定位失效（老IE不支持）。

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

弹性盒布局模型给我们提供了一种更高效的方式来进行页面容器布局。在传统的布局方式中，块级元素独占一行由上至下排列，内联元素由左至右排列，再配合浮动、定位来进行页面布局。而弹性布局则没有这么多的限制，比较自由。
使用场景：因为是较新的css3属性，存在一定的兼容性问题，所以弹性布局会更适用于移动端开发。

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

将块级元素的宽高设为0，再设置边框样式，通过某边颜色设置为透明而达到三角形的效果。

11、一个满屏品字布局如何设计?

上面一个块级元素水平居中，下面两个块级元素浮动排列或者定位。

12、a标签link、visited、hover、active

我们都知道a标签由四个状态，一般情况下我们有可能会给 a 标签加上 :hover ，只设这一个还好不会出现什么问题。但如果还加上了 :visited 的话，那么hover可能会失效。这是因为设置a标签的这几个状态样式要严格遵循顺序，顺序是 :link（正常情况下）、:visited（a标签点击触发后）、:hover（鼠标移入时）、:active（a标签点击触发时）。

13、display:none与visibility：hidden的区别

display: none; 不显示该元素，文档布局中不会为此元素分配空间，通俗来说就是该元素不见了。
visibility: hidden; 不显示该元素，但在文档中还占据着空间，也就是说元素还在，只不过变透明了，你看不见。

14、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别

一般情况下 collapse 和 hidden 没有区别，但如果是表格元素会出现类似 display: none; 的情况，低版本IE（IE7以下）visibility: collapse; 还是会正常显示元素。

15、position跟display、overflow、float这些特性相互叠加后会怎么样？

position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

16、谈谈对BFC的理解

什么是BFC

在页面布局中，理论上来讲，父元素里面包含的元素不会影响到父元素外的元素，但实际上并不总是如此。当父元素内的元素影响到了父元素外的元素，这时可以考虑一下BFC了。BFC全称 Block formatting context （块级格式化上下文），意思是当元素触发了BFC，就像形成了一个独立的空间，该元素内包含的与外界互不影响。

解决哪些常见问题

元素浮动造成的父元素高度塌陷问题
浮动元素造成后面元素文本排版异常问题链接
上下元素间的外边距重叠问题

如何触发BFC

float 不为 none
position: absolute / fixed
overflow: auto / scroll / hidden
display: inline-block / table-cell

17、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

元素浮动之后会脱离文档流，在文档流中其父元素感知不到其存在，可能会造成父元素高度无法撑开，影响页面布局，所以需要我们清除浮动。
清除浮动方法：

给父元素加height（傻瓜式，需要知道元素高度）
在最后一个浮动元素后面加入一个块级空元素，并给该块级元素添加css属性 clear: both;（缺点是给文档添加个更多的元素，不是最优方案）
父元素使用 ::after 伪元素来模拟上面方案（最优方案）
触发父元素BFC

posted @ 2020-02-16 23:42 samfung09 阅读(185) 评论(0) 收藏举报

刷新页面返回顶部

samfung09