css使两个盒子并列_CSS常见面试题

阅读本文约需要9分钟

大家好，我是小蔡，接下来开始今天的技术分享！上段时间跟大家分享了Vue 之响应式系统的知识，今天跟大家分享下CSS常见面试题的知识。

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

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2 box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

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

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

4 CSS优先级算法如何计算？

元素选择符：1
class选择符：10
id选择符：100
元素标签：1000
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。

5 CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

div：

border

浮动元素的上下左右居中：

border

绝对定位的左右居中：

border

有更加优雅的居中方式就是用flexbox，我以后会做整理。

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

inline

8 position的值？

static

9 CSS3有哪些新特性？

RGBA和透明度

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

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的&#x