HTML+CSS面试题汇编

1、BFC

Block Formatting Context 块级格式化上下文

BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

bfc功能 ：解决高度塌陷、解决margin边距重叠、实现两栏自适应布局、功能链接：BFC功能

怎样触发bfc ？
overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

2、弹性盒模型

弹性盒子是 CSS3 的一种新的布局模式
主轴（main axis）、交叉轴（cross axis）

主轴对齐justify-content
属性值：flex-start、flex-end、center、space-around、space-between、space-evenly（弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等）
侧轴对齐align-items（单行）
属性值：flex-start、flex-end、center、stretch（默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器）
侧轴对齐align-content（多行）
属性值：flex-start、flex-end、center、space-around、space-between
设置主轴方向flex-direction
属性值：row 行, 水平(默认值)、column *列, 垂直、row-reverse 行, 从右向左、column-reverse 列, 从下向上
flex-wrap
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
弹性子元素的属性
1、order
定义项目的排列顺序。（数值越小，排列越靠前，默认值为0）
2、flex-grow
定义项目的放大比例。（默认值为0）
3、flex-shrink
定义了项目的缩小比例。（默认值为1）
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
该属性不支持负值
4、flex-basis
定义了在分配多余空间之前，项目占据的主轴空间。
默认值为auto，即项目本来的大小。
flex-basis: | auto;
浏览器根据这个属性，计算主轴是否有多余空间。
5、flex
该属性是flex-grow，flex-shrink，flex-basis的简写（默认值为0 1 auto）
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6、align-self
该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性的取值除了auto，其他均与align-items属性完全一致。

3、块级元素垂直水平居中

1、弹性盒给父元素设置

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

2、定位+margin
父元素relative给子元素添加

        position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;

3、定位+transform
父元素position: relative;

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

4、行内块元素

          text-algin:centerline-height:100px;font-size:子元素的高;

4、响应式布局

1、多端响应式布局pc ipad  移动端 媒体查询     @media screen
2、自适应大小

媒体查询@media

     @media screen and (min-width:1200px) {html {font-size: 30px;}}@media screen and (min-width:401px) and (max-width:1199px) {html {font-size: 20px;}}@media screen and (max-width:400px) {html {font-size: 12px;}}

引用js文件（内容不用看）

      function getRem(design_w, unit) {var html = document.getElementsByTagName("html")[0];var real_w = document.documentElement.clientWidth;(real_w > design_w) &amp;&amp; (real_w = design_w);html.style.fontSize = real_w / design_w * unit + "px";}getRem(750, 100);//window.addEventListener("resize",getRem);window.onresize = function () {getRem(750, 100)};

5、兼容（特型手机的兼容问题）

如iphoneX 刘海屏
方法1、iphonex 提供的 meta 头属性设置 cover：网页内容完全覆盖

<meta name="viewport" content="viewport-fit=cover">

方法2、css 预定义变量
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
刘海全屏的时候值依次设置为 0 0 44px 34px

方法3、css 函数 env() 和 constant()

方法4、使用@media 媒体查询

其他：折叠手机？？

6、动画使用

animate.css 动画 :纯CSS制作的动画效果网站–性能非常高

7、canvans

可以用来做签名你画我猜
图表都是它做的折线图、柱状图、饼状图等
echarts 就是用canvans — svg

8、回流（重排）和重绘

1、回流---布局改变了（宽高等）
2、重绘---布局没改变（渲染颜色等）