CSS面试可能会问到的问题

1、CSS3有哪些新特性

1，针对块容器： 圆角（border-radius:8px）、阴影（box-shadow:10px） 背景的线性/径向渐变（gradient）、边框图片(border-image)、RGBA和透明度
2，文字特效 文字阴影( text-shadow ）、定义自己的字体(font-face)、对长的不可分割单词换行(word-wrap：break-word)
3，transform动态效果 平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）

4，媒体查询（

@media

）：根据浏览器的尺寸变化采用不同的样式

@media only screen and (max-width: 120px) and (min-width:600px){
    .example {background: red;}
}

5，新增了许多选择器 5.1、属性选择器: 选择器[attr] 、选择器[attr=value] 。。。。。。 5.2、结构性伪类选择器：选择器:nth-child(n) 第n个子节点。。。。。。 5.3、其它选择器：:disabled、:enabled、:checked、:first-line 、:first-letter、::selection 选中文本的时候

2、CSS3的flexbox（弹性盒布局模型）,以及适用场景

是什么

flexbox 是 Flexible Box 的缩写，意为”弹性布局”。

任何容器都可以指定为 Flex 布局。块级元素、行内元素都可以使用 Flex 布局。
.box{ display: inline-flex; }
。Webkit 内核的浏览器，必须加上-webkit前缀。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。
优势

使用弹性布局可以有效的分配一个容器的空间，即使我们的容器元素尺寸发生改变，它内部的元素也可以调整它的尺寸来适应空间
适用场景

适用于移动端

更多flex布局参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

3、常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样 {margin:0;padding:0;}
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 通过CSS 属性 -webkit-text-size-adjust: none; 解决
部分浏览器的img标签之间会有个默认的间距 使用float

透明度的兼容

加前缀

.transparent_class {  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}

当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度 超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

更多的兼容参考链接 https://www.cnblogs.com/angel648/p/11392262.html

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

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

5、设置元素浮动后，该元素的display值是多少？

自动变成display:block，因此，可以直接设置浮动元素的宽高

6、移动端的布局用过媒体查询( `@media` )吗

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

方法如下：

方法一 html方法 <link rel="stylesheet" type="text/css" href="xxx.css" target="_blank" rel="external nofollow" media="only screen and (max-device-width:480px)">

方法二 css方法

@media only screen and (max-device-width:480px) {
    /css样式/
 }

7、CSS优化、提高性能的方法有哪些

避免后代选择符
避免链式选择符
避免不必要的重复
避免不必要的命名空间
避免！important
最好使用表示语义的名字

8、浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的，先找到最右侧节点，再向上寻找，若找到满足条件的匹配规则，则该样式有效。若寻找到了根节点，仍无法匹配，则该样式无效。

而在 CSS 解析完毕后，形成的 CSS Tree 与 DOM Tree 一起进行分析建立一棵 Render Tree，最终用来进行渲染页面。

在建立 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style

Rules）来确定生成怎样的 Render Tree。

9、在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系

10、元素竖向的百分比设定是相对于容器的高度吗

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的

当按百分比设定一个元素的高度时，它是相对于父容器的高度计算的

但是，对于一些表示竖向距离的属性，例如

padding-top , padding-bottom , margin-top , margin-bottom

等，当按百分比设定它们时，依据的

是父容器的宽度，而不是高度

。

11、全屏滚动的原理是什么？用到了CSS的哪些属性？

假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过

transform进行y轴定位

，也可以通过margin-top实现

结合

overflow：hidden；transition：all 1000ms ease

来实现动画滚动

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

单双冒号的区别

单冒号(:)用于 CSS3伪类 p:before{content:'序言'} p:after{content:'......'}
双冒号(::)用于 CSS3伪元素 `p:hover::before{}

<!DOCTYPE html>
<html>
<head>
<style>
p:before{
	content:"台词：";
	display:inline-block;
}
p:hover::before{
    content:'滑过台词一: ';
}
</style>
</head>
<body>
     <p>我住在 Duckburg。</p>
</body>
</html>

before、after伪类的作用

before、after 就是定义在

元素主体内容之前/后的一个伪元素

。并不存在于dom之中，只存在在页面之中。

13、怎么让Chrome支持小于12px 的文字

针对谷歌浏览器内核，加webkit前缀，用

transform:scale()这个属性进行缩放

！以达到设置小于12px的字体的效果

p{ 
 font-size:12px;
 -webkit-transform:scale(0.8);     //0.8是缩放比例 ，12*0.8相等于10
}

14、如果需要手动写动画，你认为最小时间间隔是多久，为什么

多数显示器

默认频率是60Hz

，即1秒刷新60次，

所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

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

受代码之间的

空白或回车

等的影响，因为空格也属于字符，也会占据一定的空间，所以会有间隔，解决方法如下：

将<li>代码全部写在一排
浮动
在ul中用font-size：0;

16、display:inline-block 什么时候会显示间隙

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

17、style标签写在body后与body前有什么区别

页面加载解析是自上而下的。

如果style放在body后面，可能会导致页面先行加载后，再去加载样式时，导致页面重新渲染，引起页面的闪烁。

18、文本省略号

多行元素的文本省略号(webkit浏览器实现方法如下，其它的结合js)

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical

单行元素的文本省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

CSS面试可能会问到的问题

1、CSS3有哪些新特性

2、CSS3的flexbox（弹性盒布局模型）,以及适用场景

3、常见的兼容性问题

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

5、设置元素浮动后，该元素的display值是多少？

6、移动端的布局用过媒体查询( `@media` )吗

7、CSS优化、提高性能的方法有哪些

8、浏览器是怎样解析CSS选择器的

9、在网页中的应该使用奇数还是偶数的字体？为什么呢？

10、元素竖向的百分比设定是相对于容器的高度吗

11、全屏滚动的原理是什么？用到了CSS的哪些属性？

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

13、怎么让Chrome支持小于12px 的文字

14、如果需要手动写动画，你认为最小时间间隔是多久，为什么

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

16、display:inline-block 什么时候会显示间隙

17、style标签写在body后与body前有什么区别

18、文本省略号

继续阅读

CSS实现三栏布局的方法(自适应)

css两栏布局

css 元素水平垂直居中

三栏布局的五种办法（双飞翼布局,圣杯布局,flex弹性盒子布局等）

css实现垂直居中的几种方式（布局常用）

用纯css画一个三角形

css清除浮动，以及BFC的学习

前端 css实现内容居中的N中写法

position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？

利用Bootstrap在栅格中左侧图片，右侧文字垂直居中

常用css上下布局-上边高度固定，下边高度自适应

学习CSS盒模型和布局

Flex 布局基础语法篇

Flex布局练习-骰子布局骰子布局

一行内的多行文本(input右侧的一行或多行文本)

CSS面试可能会问到的问题

1、CSS3有哪些新特性

2、CSS3的flexbox（弹性盒布局模型）,以及适用场景

3、常见的兼容性问题

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

5、设置元素浮动后，该元素的display值是多少？

6、移动端的布局用过媒体查询( @media )吗

7、CSS优化、提高性能的方法有哪些

8、浏览器是怎样解析CSS选择器的

9、在网页中的应该使用奇数还是偶数的字体？为什么呢？

10、元素竖向的百分比设定是相对于容器的高度吗

11、全屏滚动的原理是什么？用到了CSS的哪些属性？

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

13、怎么让Chrome支持小于12px 的文字

14、如果需要手动写动画，你认为最小时间间隔是多久，为什么

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

16、display:inline-block 什么时候会显示间隙

17、style标签写在body后与body前有什么区别

18、文本省略号

继续阅读

6、移动端的布局用过媒体查询( `@media` )吗