前端面试题——CSS篇

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

1 有两种：IE盒模型、W3C盒模型

2 盒模型：内容(content)、填充(padding)、边框(border)、外边距(margin)

3 区  别：IE的content把border和padding都计算了进去

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

1 id选择器(#id)

2 类选择器(.class)

3 标签选择器(div,p)

4 相邻选择器(h1+p)

5 子选择器(ul>li)

6 后代选择器(div p)

7 通配符选择器(*)

8 属性选择器(img[title="flower"])

9 伪类选择器(a:hover , li:nth-child)

 

可继承的样式：font-size font-family color等

不可继承的样式：border padding margin width height

CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义以最近者为准

!important>id>class>tag

CSS3新增的伪类有哪些？

p:first-of-type

p:last-of-type

p:only-of-type

p:only-child

p:nth-child(2)

 

:after       在元素之前添加内容，也可以用来做清除浮动。

:before     在元素之后添加内容

:enabled

:disabled  控制表单控件的禁用状态

:checked

如何居中div?

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

div{

　　width:200px;

　　margin:0 auto;

}

 

将绝对定位的div居中

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

 

水平垂直居中（一）

div{
    position: absolute;
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px; /* 也可以利用transform: translate(-50%, -50%); */
    background-color: pink;
}

水平垂直居中（二）

使用flex布局，应考虑兼容性

.container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.container div{
    width: 100px;
    height: 100px;
    background-color: pink;
}

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

block             块元素，可设置宽高，换行显示

inline            行内元素，不可设置宽高，同行显示

inline-block   可以设置宽高，同行显示

none            不显示

list-item       像块元素一样显示，并添加样式列表标记

table            以块级表格显示

inherit         从父元素继承display的值

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

absolute  绝对定位，相对于不为static的第一个父元素进行定位

relative   相对定位，相对于其正常位置进行定位

static      默认，按正常来显示

CSS3有哪些新特性？

新增各种css选择器

@font-face

文字渲染（text-decoration）

多列布局（multi-column layout）

圆角（border-raidus）

渐变（线性渐变和径向渐变）

阴影（text-shadow ,box-shadow）

过渡（transition）变换（transform）动画（animation）

弹性盒模型（flex-box）

请解释一下CSS3的Flexbox，以及适用场景？

用flexbox布局是通过嵌套一个Flex容器（flex-container），它所有的子元素自动成为容器成员，称为Flex项目（flex item）。

常规布局是基于块和内联流的方向，而flex布局是基于flex-flow来进行，能对不同屏幕大小自适应。

多用于手机移动端

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

把元素不设宽高，上，右，左三条边隐藏掉

div{
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

经常遇到的浏览器兼容性有哪些？解决的方法是什么？

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

  Firefox下，只能使用getAttribute()来获取自定义属性。

解决方法：同意通过getAttribute()来获取自定义属性。

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

  Firefox下，event对象有pageX,pageY属性，但没有x,y属性

解决方法：条件注释（缺点是在IE下可能会增加额外的HTTP请求）

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

解决方法：

1 用图片，将小于12px的文字内容切出做成图片；

2 建议设计美工图的时候设置大于或等于12px的字体，给客户讲解小于12px浏览器不兼容的问题；

3 可以通过CSS属性 -webkit-text-size-adjust:none; 做到最大兼容。

*超链接访问过后hover样式就不出现了

解决方法：遵循love-hate规则：a:link{ }  a:visited{ }  a:hover{ }  a:avtive{ }

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

li与li之间有空格/回车空白内容，这些空白也会被用于样式，占据空间。

解决方法：把字符大小设为0。

为什么要初始化CSS样式？

不同浏览器默认的样式是不一样的，为了达到页面在不同浏览器中显示一样，所以要初始化CSS样式。

CSS定义的权重

标签权重为1，class的权重为10，id的权重为100。如果权重相同，则后面的样式会起作用。

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

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素会使高度塌陷，导致页面布局不正常显示。

清除浮动的方式：

1 父级div定义height;

2 父级div也一起浮动；

3 加伪元素

.clearfix:after{
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

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

关键选择器。选择器的最后部分为关键选择器；

如果以id选择器作为关键选择器，则不要为其添加标签。过滤掉无关的规则；

提取项目的公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性；

使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）

浏览器是怎样解析CSS选择器？

样式系统从关键选择器开始匹配，然后左移查找选择器的祖先元素。

只要选择器的子树一直在工作，样式系统就会持续左移，直到匹配或因不匹配放弃。

::before和:after中双冒号和单冒号有什么区别？

单冒号（:）用于CSS3的伪类，双冒号（::）用于CSS3的伪元素。

双冒号是当前规范中引入的，用于区分伪类和伪元素。

如何修改chrome记住密码后自动填充表单的黄色背景？

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

设置元素浮动后，该元素的display值是多少?

自动变成了display:block

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing:antialiased;

font-style属性设置为“oblique”是什么意思？

倾斜的字体样式

position:fixed在手机端无效怎么处理？

fixed的元素是相对于整个页面固定位置，你在屏幕上滑动只是移动viewport

原来的网页没问题，fixed的内容也没有变过，

问题的关键在于fixed的元素不是相对于手机屏幕固定

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0,user-scalable=no" />

CSS动画的最小时间间隔是多久？为什么？

多数显示器默认的频率是60HZ，即1秒刷新60次，所以理论上最小间隔为1000/60=16.7ms

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

移除空格，使用margin负值，使用font-size:0,letter-spacing,word-spacing

什么是CSS预处理器/后处理器？

预处理器，如less,sass,用来预编译sass或less，增强了css代码的复用性，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器，如postcss，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效。目前最常做的是给CSS属性添加浏览器的私有前缀，实现跨浏览器的兼容。