# HTML面试题
- 如何理解HTML的语义化 1，让人更容易读懂(增加代码可读性) 2，让搜索引擎更容易读懂（SEO）
- 块状元素
display:block/table 有div h1 ... table ul ol p - 内联元素
display:inline/inline-block； 有span img input button...
# CSS面试题
# 盒模型宽度计算
标准模式：offsetWidth = （内容宽度 + 内边距 + 边框），无外边距
所以下面div1的宽度是122（100+10×2+1×2）
补充问题：如果offsetWidth等于100px应该怎么做？
回答：添加一句代码：box-sizing:border-box;
<style>
#div1{
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<div id="div1">
演示盒模型
</div>
<script>
document.getElementById('div1').offsetWidth
</script>
</body>
# 补充知识：CSS3 box-sizing属性
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
默认情况下，元素的宽度(width) 和高度(height)计算方式如下：
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
默认值:content-box
继承:no
版本:CSS3
JavaScript 语法:object.style.boxSizing="border-box"
box-sizing: content-box|border-box|inherit
<style>
#div1{
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid red;
}
#div2{
box-sizing: border-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid cyan;
}
</style>
</head>
<body>
<h4>box-sizing 属性</h4>
<h6>box-sizing: content-box (默认):</h6>
<p>高度和宽度只应用于元素的内容:</p>
<div id="div1">
这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!
</div>
<h6>box-sizing: border-box:</h6>
<p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p>
<div id="div2">不管如何这里的完整宽度为300px!</div>
</body>
# margin纵向重叠问题
AAA 与 BBB之间距离是多少？
相邻元素的 margin-top margin-bottom会发生重叠
空内容的p标签 <p></p>也会重叠，之间距离0
AAA 与 BBB 的距离15px
<style>
p{
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
background-color: cyan;
}
</style>
<body>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>
# margin 负值
margin-top 和 margin-left 负值，元素向上，向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响
从上面可以看出来特殊的就是margin-right和margin-bottom都是自身不受影响
<style type="text/css">
body{
margin: 20px;
}
.float-left{
float: left;
}
.clearfix:after{
content: '';
display: table;
clear: both;
}
.container{
border: 1px solid cyan;
padding: 10px;
}
.container .item{
width: 100px;
height: 100px;
}
.container .item1{
margin-top:-10px;
margin-bottom: -20px;
}
.container .item3{
margin-left:-10px;
margin-right: -20px;
}
.container .border-blue{
border: 1px solid blue;
}
.container .border-red{
border: 1px solid red;
}
</style>
</head>
<body>
<p>用于测试 margin top bottom 的负数情况</p>
<div class="container">
<div class="item item1 border-blue">
this is item1
</div>
<div class="item item2 border-red">
this is item2
</div>
</div>
<p>用于测试margin left right 的负数情况</p>
<div class="container clearfix">
<div class="item item3 border-blue float-left">
this is item3
</div>
<div class="item item4 border-red float-left">
this is item4
</div>
</div>
<p>测试margin负值</p>
<div style="border:1px solid cyan;width: 100px; height: 100px;margin-right:-10px;margin-bottom: -10px;margin-top:-10px;margin-left:-10px;">
测试
</div>
<div style="border:1px solid purple;width:100px;height:100px;"></div>
</body>
# BFC的理解和应用
Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
- 形成BFC的常见条件
float 不是none
position是absolute或者fixed
overflow不是visible
display是flex inline-block等
- BFC常见应用:清除浮动
<style type="text/css">
.container{
background-color: cyan;
}
.left{
float: left;
}
.bfc{
overflow: hidden;
}
</style>
<div class="container bfc">
<img src="./5.jfif" alt="百度图片" width="200" height="80" class="left" style="margin-right:10px">
<p class="bfc">某一段文字.....</p>
</div>
# CSS定位
absolute和relative分别依据什么定位？
- relative依据自身定位
- absolute依据最近一层的定位元素定位
居中对齐有哪些实现方式？
- 水平居中：
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;
<style type="text/css">
body{
margin: 20px;
}
.relative{
position: relative;
width: 400px;
height: 200px;
border: 1px solid purple;
}
.absolute{
position: absolute;
width: 200px;
height: 100px;
border: 1px solid cyan;
}
</style>
<body>
<p>absolute 和 relative 定位问题</p>
<div class="relative">
<div class="absolute">
this is absolute
</div>
</div>
</body>
# CSS 定位垂直居中对齐
<style type="text/css">
.container{
border: 1px solid pink;
margin: 10px;
padding: 10px;
height: 200px;
}
.item{
background-color: purple;
}
/*inline元素： line-height的值等于height值**/
.container-1{
text-align: center;
line-height: 200px;
height: 200px;
}
/**absolute元素：top:50% + margin-top 负值 (必须知道子元素的尺寸大小)***/
.container-2{
position: relative;
color: #fff;
}
.container-2 .item{
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
}
/*
absolute元素：transform(-50%,-50%)
不需要知道子元素的宽度和高度
但是如果项目比较老，因为用到transform是CSS3属性兼容性不是很好。
**/
.container-3{
position: relative;
color: #fff;
}
.container-3 .item{
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/*
absolute元素：top，left,bottom,right = 0 margin:auto
可以兼容低版本
也不需要知道子元素宽高
*/
.container-4{
position: relative;
color: #fff;
}
.container-4 .item{
width: 200px;
height: 50px;
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is block item
</div>
</div>
<div class="container container-3">
<div class="item">
this is absolute item
</div>
</div>
<div class="container container-4">
<div class="item">
this is absolute item
</div>
</div>
# CSS定位水平居中对齐
<style type="text/css">
.container{
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
.item{
background-color: #ccc;
}
/* inline元素
text-align:center */
.container-1{
text-align: center;
}
.container-2{
}
/* block元素
`margin:auto*/
.container-2 .item{
width: 500px;
margin: auto;
}
/* absolute元素
left:50% + margin-left 负值 */
.container-3{
position: relative;
height: 100px;
}
.container-3 .item{
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
}
</style>
<body>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is block item
</div>
</div>
<div class="container container-3">
<div class="item">
this is absolute item
</div>
</div>
</body>
# line-height 如何实现继承
line-height 如何继承
写具体数值，如30px,则继承该值
写比例，如2/1.5，则继承该比例
写百分比，如200%，则继承计算出来的值
<style type="text/css">
body{
font-size: 20px;
/**
*line-height:50px 这个地方p标签就是继承的50px的，比较常规好理解
**/
/* line-height: 50px; */
/**
* line-height:1.5 这个地方p标签line-height是24，
p本身font-size是16px 所以16×1.5=24
*/
line-height: 1.5;
/**
* line-height:200% 这个地方比较特殊，p继承过来的line-height是20×200% 等于 40px
这个地方是需要重点注意的考点
**/
/* line-height: 200%; */
}
p{
background-color: cyan;
font-size: 16px;
}
</style>
<body>
<p>这是一行文字</p>
</body>
# float布局
如何实现圣杯布局和双飞翼布局
手写clearfix
圣杯布局和双飞翼布局的目的
** 三栏布局，中间一栏最先加载和渲染（内容最重要）**
** 两侧内容固定，中间内容随着宽度自适应**
** 一般用于PC网页**
圣杯布局和双飞翼布局的技术总结
** 使用float布局**
** 两侧使用margin负值，以便和中间内容横向重叠**
** 防止中间内容被两侧覆盖，一个用padding一个用margin**
# 圣杯布局
<style type="text/css">
body{
min-width: 550px;
}
#header{
text-align: center;
background-color: #f1f1f1;
}
#container{
padding-left: 200px; /**左边宽度*/
padding-right: 150px; /*右边宽度**/
background-color: purple;
}
#container .column{
float:left;
}
#center{
background-color: cyan;
width: 100%;/**因为这个地方是100%，要想左右能挪到上面，父容器要留有位置，所以要对父元素#container做左右padding的处理，上面17行，18行代码**/
}
#left{
position: relative; /**相对于自身移动200px*/
background-color: yellow;
width: 200px;
margin-left:-100%; /*这一步很重要，回忆上面的margin负值，margin-left负值是向左移动多少，这个时候left和center横向重合了，所谓的100%就是#left的父元素（#cotainer）的宽度值**/
right:200px;
}
#right{
background-color: pink;
width: 150px;
margin-right: -150px; /*这个地方比较难理解，和前面的margin负值有关系，回忆上面的margin-right:-10px 右侧元素左移，自身不受影响，这个地方特殊在#right右侧已经没有元素了，在外界看来，设置margin-right:-150px（150px就是其自身宽度）就相当于完全没有宽度了，有宽度的时候会浮动下去，现在相当于没有宽度了，就不占地方了**/
}
#footer{
/* clear: both; 这个去掉之后在container中添加上class='clearfix' */
text-align: center;
background-color: #f1f1f1;
}
/* 手写clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom: 1; /*兼容ie低版本**/
}
</style>
<body>
<!-- 通过padding为两边留白的 -->
<div id="header">这是头部</div>
<div id="container" class="clearfix">
<div id="center" class="column">这是中间宽度是100%</div>
<div id="left" class="column">这是左边宽度是200px</div>
<div id="right" class="column">右边150px</div>
</div>
<div id="footer">这是尾部</div>
</body>
# 双飞翼布局
双飞翼布局相对于圣杯布局比较好理解，但是原理都是差不多
<style type="text/css">
body{
min-width: 550px;
}
.col{
float: left;
}
#main{
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap{
margin: 0 190px 0 190px;
}
#left{
width: 190px;
height: 200px;
background-color: cyan;
margin-left: -100%; /****/
}
#right{
width: 190px;
height: 200px;
background-color: pink;
margin-left: -190px; /*****/
}
</style>
<body>
<!-- 通过margin为两边留白 -->
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">this is left</div>
<div id="right" class="col">this is right</div>
</body>
# flex布局
<!-- flex画三个点的色子 -->
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 2px solid blue;
border-radius: 10px;
padding: 20px;
display: flex; /*flex布局**/
/**justify-content 主轴对齐方式***/
justify-content: space-between; /**两端对齐***/
}
.item{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #F00;
}
.item:nth-child(2){
align-self: center; /*第二项居中对齐**/
}
.item:nth-child(3){
align-self: flex-end;/*第三项尾对齐**/
}
</style>
<body>
<!--
flex常用语法：
flex-direction：主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式（和主轴垂直的那个轴）
flex-wrap：换行（容器常用设置）
align-self：子元素在交叉轴的对齐方式
-->
<!--
flex 实现三点色子
-->
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
# 响应式布局
<style type="text/css">
/*
rem 是相对于根元素的，根元素html是100px
所以div font-size:0.16rem就是16px(100px就是1rem)
任何可以使用长度的地方都可以使用rem，比如width,height,padding,margin...
*/
html{
font-size: 100px;
}
div{
background-color: cyan;
margin-top: 10px;
font-size: 0.16rem;
}
</style>
<body>
<!--
响应式实现方案
1，rem是什么？
rem是一个长度单位
1.1 px 绝对长度单位，最常用，任何情况下都是长一个样子。
1.2 em 相对长度单位，相对于父元素，不常用，没有统一标准，在响应式这个地方不好用
1.3 rem 相对长度单位，相对于根元素，常用于响应式布局
2，响应式布局的常见方案
-->
<!-- 核心代码演示 -->
<!-- 0.1rem就是10px -->
<p style="font-size: 0.1rem;">rem 1</p>
<!-- 0.2rem就是20px -->
<p style="font-size: 0.2rem;">rem 1</p>
<!-- 0.3rem就是30px -->
<p style="font-size: 0.3rem;">rem 1</p>
<p>rem 1</p>
<p>rem 1</p>
<!-- 1rem 就是100px -->
<div style="width:1rem">this is div1</div>
<!-- 1rem 就是200px -->
<div style="width:2rem">this is div1</div>
<!-- 1rem 就是300px -->
<div style="width:3rem">this is div1</div>
</body>
# 响应式布局常用方案
<style type="text/css">
@media only screen and (max-width:374px) {
/* iphone5 或者更小的尺寸，以iphone5的宽度（320px）比例设置font-size */
html{
font-size: 86px;
}
}
@media only screen and (min-width:375px) and(max-width:413px) {
/* iphone6/7/8 和 iphonex */
html{
font-size: 100px;
}
}
@media only screen and (min-width:414px) {
/* iphone6p或者更大的尺寸，以iphone6p的宽度比例设置font-size*/
html{
font-size: 110px;
}
}
body{
font-size: 0.16rem;
}
#div{
width: 1rem;
background-color: cyan;
}
</style>
<body>
<!--
media-query就是所谓的媒体查询，
根据不同的屏幕宽度设置根元素font-size
rem,基于根元素的相对单位
-->
<div id="div1">
this is div test
</div>
</body>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#container{
background-color: cyan;
width: 10vw;
height: 10vh;
}
</style>
<body>
<!-- rem的弊端：“阶梯”性 -->
<!--
window.screen.height //屏幕高度 667
window.innerHeight // 网页视口高度 553（和浏览器有关系，去掉上面的头和下面的尾巴）
document.body.clientHeight // body高度
-->
<!--
vh 网页视口高度的1/100
vw 网页视口宽度的1/100
vmax 取两者最大值
vmin 取两者最小值
-->
<p>vw vh测试</p>
<div id="container"></div>
<script>
// window.innerHeight === 100vh
// window.innerWidth === 100vw
</script>
</body>