前端面试题1--CSS面试题1.如何理解HTML语义化？让人更容易读懂（增加代码可读性）让搜索引擎更容易读懂（SEO

1.如何理解HTML语义化？

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

2.块状元素&内联元素？

独占一行 display:block/table;有div h1 h2 table ul ol p 等
display:inline/inline-block;有span img input button 等

3.盒模型宽度计算

offsetWidth = (内容宽度+内边距+边框)，无外边距
box-sizing:border-box;

4.margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的p标签也会发生重叠

5.margin负值问题

margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响

6.BFC理解与应用

什么是BFC？如何应用？

Block format context,块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素形成BFC的常见条件
float不是none(对元素设置float);
position是absolute或fixed;
overflow不是visible；
diaplay是flex inline-block 等； BFC的常见应用
清除浮动

.bfc {
    overflow: hidden; /*触发元素BFC*/
}
.left {
    float: left;
}
/*实现图片撑开容器，文字正常显示*/
<body>
    <div class="bfc">
        <img src="xx" class="left">
        <p class="bfc">某一段文字</p>
    </div>
</body>

7.float布局

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页圣杯布局和双飞翼布局的技术总结：
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin 圣杯布局

/*圣杯布局通过padding为两边留白*/
.container {
    padding-left: 200px;
    padding-right: 150px;
}
.container div{
    float: left;
}
.center {
    width: 100%;
}
.left {
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
.right {
    width: 150px;
    margin-right: -150px;
}
<div class="container clearfix">
    <div class="center">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

双飞翼布局

/*双飞翼布局通过margin为两边留白*/
body {
    min-width: 550px;
}
body div {
    float: left;
}
.main {
    width: 100%;
    height: 200px;
}
.left {
    width:190px;
    height: 200px;
    margin-left: -100%;
}
.right {
    width:190px;
    height: 200px;
    margin-left: -190px;
}
<body>
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

8.手写clear fix

/*手写clear fix*/
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /*兼容IE低版本，可不写*/
}

9.flex 画三个点的色子

常用语法

flex-direction 主轴方向
justify-content 主轴对齐方式
align-items 交叉轴对齐方式
flex-wrap 换行
align-self 子元素在交叉轴的对齐方式

/*flex 画三个点的色子*/
.box {
    display: flex; /*flex 布局*/
    justify-content: space-between; /*两端对齐*/
}
.item {
    /*背景色、大小、边框等*/
}
.item:nth-child(2) {
    align-self: center; /*第二项居中对齐*/
}
.item:nth-child(3) {
    align-self: flex-end; /*第三项尾对齐*/
}

10.absolute和relative定位

relative 依据自身定位
absolute 依据最近一层的定位元素定位(relative,fixed,body)

11.居中对齐的实现方式

水平居中

inline元素：text-align: center;
block元素：margin: auto;
absolute元素：left: 50%; + margin-left 负值；垂直居中
inline元素：line-height的值等于height值；
absolute元素：top: 50%; + margin-top 负值；
absolute元素：transform(-50%,-50%);
absolute元素：top,left,bottom,right = 0 + margin: auto;

12.line-height如何继承

写具体数值，如 30px，则继承该值；
写比例，如 2/1.5，则继承该比例；
写百分比，如 200%，则继承计算出来的值；

13.rem是什么

rem是一个长度单位

px，绝对长度单位，最常用；
em，相对长度单位，相对于父元素，不常用；
rem，相对长度单位，相对于根元素，常用于响应式布局；

14.响应式布局的常用方案

media-query，根据不同的屏幕宽度设置根元素font-size;
rem，基于根元素的相对单位

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度 (320px) 比例设置 font-size 
    375px/320px = 100px/86px
    */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /*iphone6p 或者更大的尺寸，以iphone6p 的宽度(414px)比例设置font-size
    375px/414px = 100px/110px
    */
    html {
        font-size: 110px;
    }
}
body {
    font-size: 0.16rem;
}

15.vw/vh

rem的弊端： "阶梯"性
网页视口尺寸：
```
window.screen.height // 屏幕高度
```

window.innerHeight // 网页视口高度

document.body.clientHeight // body高度

vh 网页视口高度的 1/100
vw 网页视口宽度的1/100
vmax 取两者最大值； vmin 取两者最小值 // window.innerHeight === 100vh
// window.innerWidth === 100vw