html和css前端面试题总结

html
语义化标签？
语义化的标签，旨在让标签有自己的含义。
代码结构清晰，方便阅读，有利于团队合作开发。
HTML中内联元素和块级元素有什么区别?
一、显示方式不同
1、块级元素：是块元素都从新行开始，相邻的块级元素将会在不同行显示。
2、内联元素：一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
二、高度不同
1、块级元素：高度，行高以及外边距和内边距都可控制，以容纳内联元素和其他块元素。
2、内联元素：高度、行高和顶以及底边距都不可改变。
三、宽度设置不同
1、块级元素：宽度缺省是它的容器的100%，除非设定一个宽度。
2、内联元素：宽度就是它的文字或图片的宽度，不可改变。
css:
1、flex常见面试题
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

1 flex-direction:属性决定主轴的方向；
　　　　　　　　　　 row 水平方向，起点在左端
　　　　　　　　　　 row-reverse  水平方向，起点右端
　　　　　　　　　　 column 纵向方向，起点在上
　　　　　　　　　　 column 纵向方向，起点在下
2 flex-wrap:决定是否换行，默认都是排在一行
　　　　　　　no-wrap;(默认)不换行
　　　　　　　wrap; //换行，第一行在上方
　　　　　　　wrap-reverse;//换行；第二行在上方
3 flex-flow:flex-direction和flex-wrap的缩写，默认为row nowrap
　flex-flow:<flex-direction> ||<flex-wrap>

4 justify-content:定义在item在主轴上的对齐方式
　　　　　　　　　　　flex-start 从左到右
　　　　　　　　　　　flex-end   从右到左
　　　　　　　　　　　center     居中
　　　　　　　　　　  space-between 两端对齐
　　　　　　　　　　　space-around   每个item两侧中间相等
5 align-items属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

2、盒模型面试题
什么是盒模型
页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
标准盒模型和IE的盒模型的区别


不同之处就是标准盒模型的内容大小就是content的大小，而IE的则是content + padding +border 总的大小
怎么设置标准盒模型和IE的盒模型
通过设置 box-sizing:content-box/border-box来切换
3，实现一个简单的三角形
元素的border是由三角形组合而成

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

4丶什么是BFC？
在正常的文档流中，块级元素是按照从上自下，内联元素从左到右的顺序排列的。
如果我给里面的元素一个 float 或者绝对定位，它就会脱离普通文档流中。

此时如果我们还想让外层元素包裹住内层元素该如果去做？？
让外层元素产生一个 BFC 。(产生 BFC 的方法 MDN 文档里有写)

这就是 BFC 的第一个作用：使 BFC 内部的浮动元素不会到处乱跑。