CSS面试题

1. flex布局和栅格布局

含义：
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

1. 任何一个容器都可以指定为Flex布局。
2. 行内元素也可以使用Flex布局。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2. display有哪些属性

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inherit 规定应该从父元素继承 display 属性的值。
inline-block 行内块元素。（CSS2.1 新增的值）
table 此元素会作为块级表格来显示（类似

），表格前后带有换行符。

3. 块级元素和行内元素

优质文章：https://www.cnblogs.com/stfei/p/9084915.html

标签分为两种等级，行内元素和块级元素。

区别：
行内元素与其他元素并排，不能设置宽高，默认的宽度就是文字的宽度。
块级元素霸占一行，不能与其它任何元素并列，能接受宽高，若不设置宽度，宽度将为父级的100%。

分类：

在HTML的角度来讲，标签分为：

　　　1.　文本级标签：p , span , a , b , i , u , em

　　　2.　容器级标签：div , h系列 , li , dt ,dd

　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。

从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

　　　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。

　　　　块级元素：所有的容器级标签，都是块级元素，以及p标签。

转换：

我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换。

1.　　display：inline;

　　那么这个标签将变为行内元素，即：

　　　　1，此时这个div将不能设置宽度和高度了。

　　　　2，此时这个div可以和其他行内元素并排了。

2.　　同样的到了我们也可以用display将行内元素(比如span)转行成块级元素。

　　display：block；

　　那么这个span标签将变为块级标签，即：

　　　　1，此时这个span能够设置宽度，高度。

　　　　2，此时这个span必须独占一行，其他元素无法与之并排。

　　　　3，如果不设置宽度，将占满父级。

 

4. 标准文档流

含义：
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

等级：

分为两种等级：块级元素和行内元素；

在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

温馨小提示：
(1).容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。

标准流里面的限制特别多，标签的性质也特备恶心。标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。

浮动：

1. 浮动的四大特性：

　　1，浮动的的元素脱标，

　　2，浮动的元素互相贴靠。

　　3，浮动的元素由"子围"效果。

　　4，收缩的效果。

所有的标签一旦设置浮动，就能够并排且不区分块元素或行内元素，换言之，能够设置宽高了。
那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！
所以我们要清除浮动！

2. 清除浮动的方法：

　　1，给父盒子设置高度。

　　2，clear：both;

　　3，伪元素清除法

　　4，overflow：hidden；

5.尺寸单位有哪些