HTML面试题
1.如何理解HTML语义化？
- 让人更加容易读懂（代码的可读性-新人）
- 让机器读懂（搜索引擎-SEO）
2.块元素&内联元素
- display:block/table/;有div h1 h2 table ul ol p 等
- display:inline/inline-block;有sapn img input button 等
布局
1.盒模型宽度的计算
<!-- 计算div1 的offsetWidth -->
<style type="text/css">
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
<div id="div1">
this is div1
</div>
- offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距
- 明显 答案 是 122px
- 如何让offsetWidth = 100px ?
box-sizing: border-box;
2.margin纵向重叠问题
<!-- AAA和BBB 之间的距离? -->
<style type="text/css">
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
- 相邻元素的
margin-top和margin-bottom会发生重叠 - 空白内容的
<p>/<p>也会重叠 - 答案:15px
3.margin 负值问题
margin-top和margin-left负值,元素向上、向左移动margin-right负值，右侧元素左移，自身不受影响margin-bottom负值，下方元素上移，自身不受影响
4.BFC的理解与应用
- Block format context
- 独立渲染区域
形成BFC的条件
- float 不是 none
- overflow 不是 visiible
- position 是absolute 或者fixed
- display 是 flex inline-block
BFC的应用
- 清除浮动
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* 触发元素 BFC */
}
</style>
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px" />
<p class="bfc">某一段文字……</p>
</div>
5.float布局
圣杯布局和双飞翼布局
- 三栏布局，中间最先加载好渲染（内容为主）
- 两侧内容固定，中间内容自适应
- pc为主
圣杯布局和双飞翼布局技术总结
float布局- 两侧使用
margin负值，以便和中间内容横向重叠 - 防止中间内容被两侧覆盖，一个用
padding一个用margin
手写clearfix
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
/* 兼容低版本*/
.clearfix{
zoom:1;
}
6.flex布局
flex 实现一个三点色子
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
定位
absolute和relative定位
relative依据自身定位absolute依据最近一层的定位元素定位（找爸爸）
定位元素
- absolute relative fixed
- body
居中对齐方式
水平居中
- inline 元素：
text-align:center;
block 元素：
margin：auto;
absolute 元素：
left：50% + margin-left负值 (需要子元素宽高)
垂直居中
- inline 元素：
line-height：height
absolute 元素：
top：50% + margin-top负值 (需要子元素宽高)
left: 50%;
top: 50%;
transform（-50%，-50%）
top ，left，right，bottom = 0 + margin：auto
css-图文样式
line-height如何继承
计算P标签的行高？
<!-- P标签的行高 -->
<style type="text/css">
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
<body>
<p>这是一行文字</p>
</body>
P标签的行高：40px
line-height写具体数值 如：20px, 继承该值line-height写比例 如：2/1.5, 继承该值line-height写百分比 如：200%, 继承计算出来的值-（难点）
CSS-响应式
rem -(相对根元素)
html {
font-size: 20px;
}
响应式布局常用方案
- media-query，根据不同屏幕设计根元素
@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 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
html {
font-size: 110px;
}
}
