编辑代码

// 1、如何理解HTML语义化标签
易于人类理解，让机器容易读懂，使代码易于维护，且利于seo
比如h1标签和div标签，h1标签让人一下子知道这个是标题，机器也知道，而div人类可以通过上下文理解，机器却不行

// 2、哪些是块级标签，哪些是内联标签
// 块级标签：div,p,h1-h6,section,ol,ul,
// 内联标签：span,a,i,b,input,button,img


// 3、盒子模型的宽度如何计算
content,padding,border,margin
box-sizing可设置content-box,padding-box以及border-box
#div1 {
    width: 100px;
    padding: 10px;
    border: 10px solid #ccc;
    margin: 10px;
}
offsetWidth = width + padding + border = 100 + 10 * 2 + 10 * 2
想要offsetWidth = 100,就设置box-sizing: border-box



// 4、margin纵向重叠问题
涉及到BFC，BFC规定纵向排列margin会重叠，解决方式就是套一层BFC
p {
    margin-top: 10px;
    margin-bottom: 15px;
}
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
AAA与BBB的距离为15px


// 5、margin负值问题
margin-left和margin-top，自身向反方向移动
margin-bottom则是下方元素上移
margin-right则是右方元素左移

// 6、BFC理解
有着一套渲染规则的容器，表现形式为：
1、垂直方向一个接一个排列
2、相邻margin会重叠
3、计算高度时，浮动元素也会参与计算
4、不会与浮动元素重叠
5、每个BFC区域互不影响，容器里面的元素不影响外面的元素

形成为BFC的条件：
1、float不为none
2、overflow不为visible
3、display为inline-block、table-cell-table-caption、flex、inline-flex
4、position为absolute、fixed

// 7、float布局以及clearfix
左浮动右浮动，当浮动时不参与高度计算，解决方式为设置为BFC模式下，

三栏布局，中间一栏优先加载渲染，两侧内容固定，中间自适应
圣杯布局：
<div class="container">
    <div class="center column">
        阿婆都爱送到卡松发展项目，才能咖啡年卡是否能卡萨诺开心农场可能开发开发年卡说你看你看你们程序控制奥斯卡你的卡是
        爱上的口岸睡咯看到了面临这些迈出了走向
        阿萨德撒老大说
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>
.container {
    padding: 0 200px; // 200px的原因是左右固定200px，不设置这个左右两边的会覆盖中间的文字
}

.column {
    float: left;
}
.center {
    background-color: #f00;
    width: 100%; // 必须设置100%
}
.left {
    background-color: #ff0;
    width: 200px;
    margin-left: -100%; // margin + float特性，超过自身width值大小，会浮起来上一层
    position: relative; // 配置container的padding
    left: -200px; // 配置container的padding
}
.right {
    background-color: #f0f;
    width: 200px;
    margin-left: -200px; // 刚好浮上去一层
    position: relative;
    right: -200px;
}


双飞翼布局：
<div class="container">
    <div class="center column">
        <div class="center-inner">
            阿婆都爱送到卡松发展项目，才能咖啡年卡是否能卡萨诺开心农场可能开发开发年卡说你看你看你们程序控制奥斯卡你的卡是
            爱上的口岸睡咯看到了面临这些迈出了走向
            阿萨德撒老大说
        </div>
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>
.container {
    
}
.column {
    float: left;
}
.center {
    background-color: #f00;
    width: 100%; // 必须设置100%
}
.center-inner {
    margin: 0 200px 0 200px; // 直接设置margin
}
.left {
    background-color: #ff0;
    width: 200px;
    margin-left: -100%; // margin + float特性，超过自身width值大小，会浮起来上一层
}
.right {
    background-color: #f0f;
    width: 200px;
    margin-left: -200px; // 刚好浮上去一层
}

.clearfix::after {
    content: ' ';
    display: 'table';
    clear: both;
}

// 8、flex画三点骰子
<div class="flex">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>
.flex {
    display: flex;
    height: 100px;
    justify-content: space-between;
}
.two {
    align-self: center;
}
.three {
    align-self: flex-end;
}


// 9、absolute和relative分别基于什么定位
absolute基于父级元素为relative、absolute、fixed,直到找到body
relative基于自身


// 10、居中对齐方式
flex的justify-content:center或者子元素设置margin: auto;
text-align: center,line-height为盒子的高度
绝对定位50%, translateX(-50%)

// 11、line-height继承问题
子元素默认继承父级的line-height,有如下几个规则
line-height值为数值情况下，子元素的line-height为自身fonts-size * line-height
line-height值为具体像素时，子元素的line-height为那个具体像素值
line-height值为百分比时，则先计算父元素的font-size * line-height，子元素的line-height为那个计算的数值


// 12、rem是什么
基于根元素的相对单位

// 13、如何实现响应式
媒体查询@media，根据不同宽度设置根元素的font-size
子元素统一使用rem单位

// 14、window.screen.height,window.innerHeight,document.body.clientHeight的区别
window.screen.height：整个屏幕的高度，包括statusBar
window.innerHeight：除去statusBar、footerBar的高度
document.body.clientHeight：内容区域的高度，取决于内容到底有多少