前端基础——CSS

1、css盒模型有哪几种？怎么设置？区别是什么?

分为标准盒模型和怪异盒模型（IE盒模型）
box-sizing:content-box(标准盒模型)、border-box（怪异盒模型）
标准盒模型：宽度=内容的宽度（content）+ border + padding + margin
怪异盒模型：宽度=内容宽度（content+border+padding）+ margin

2、设置一个元素居中的几种方式？

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

display: flex;
justify-content: center;
align-items: center;

3、CSS3有哪些新特性？

• RGBA和透明度
• background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
• word-wrap（对长的不可分割单词换行）word-wrap：break-word
• 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
• 圆角（边框半径）：border-radius 属性用于创建圆角
• 盒阴影：box-shadow: 10px 10px 5px #888888

4、display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

5、对BFC规范(块级格式化上下文：block formatting context)的理解？怎么触发？

BFC指一个独立的渲染区域或者说是一个隔离的独立容器。

触发条件：

• float的值不为none（默认）
• overflow的值不为visible（默认）
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

6、伪类和伪元素的区别

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

7、flex布局子元素默认高度和父元素同高，怎么让子元素保持自己的高度

父元素设置：align-item: flex-start。或者子元素设置：align-self: flex-start