文章目录
一、HTML部分面试常见题总结
1. 如何理解HTML语义化 ？
2. 默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
二、CSS部分面试常见题总结
CSS布局
1.盒子模型的宽度如何计算？
2.margin纵向重叠的问题
3. margin负值的问题
4. BFC理解和应用
5. float布局的问题，以及clearfix
6.flex画骰子
CSS定位
7.absolute和relative分别依据什么定位？
8.居中对齐有哪些实现方式？
CSS图文样式
9.line-height的继承问题
CSS响应式
10.rem是什么？
11.如何实现响应式？
答案
**HTML：**1. 如何理解HTML语义化 ？
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
参考
2. 默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
- 块级元素（display：block/table）：div，p，h，ul，ol,table等
- 内联元素（display：inline）：a,span,br,i,em,strong等
- 内联块状元素（display:inline-block）：img,input等
参考
CSS：
1.盒子模型的宽度如何计算？
offsetwidth(盒子实际宽度)=border-left + padding-left + content-width + padding-right + border-right
offsetwidth=10*2+2+100=122px（无外边距）
若要让width=100px，可通过设置box-sizing属性（box-sizing：border-box）
参考
2.margin纵向重叠的问题
AAA和BBB之间的距离为15px
当两个盒子是父子关系或者上下兄弟关系时，设置margin-top，margin-bottom。两个盒子之间的margin-top，margin-bottom会合并，取最大的值当作共同的外边距。
参考
3.margin负值的问题
当元素不存在 width 属性或者(width: auto) 的时候：
负 margin-left和margin-right 会增加元素的宽度，margin-top 为负值不会增加高度，
相应的会减少自身的高度，进而产生向上位移margin-bottom 为负值不会产生位移，会减少自身的供 css 读取的高度。
当元素存在 width 属性：
参考
4.BFC理解和应用
参考
参考
5.float布局的问题，以及clearfix
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先
渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中
间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布
局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和
margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相
对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right
共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。
简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“，而不是说”去掉relative"就是双飞翼布局“。
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* 防止页面过小，影响布局 */
min-width:550px;
}
.box{
height: 200px;
border: 1px solid black;
}
.header{
height: 50px;
background-color: #ff6700;
line-height: 50px;
text-align: center;
/* 清除浮动 */
clear: both;
}
.footer{
height: 50px;
background-color: rgb(102, 243, 59);
line-height: 50px;
text-align: center;
clear: both;
}
.container{
height: 100px;
border: 1px solid red;
/* 圣杯使用padding防止中间内容被两侧覆盖 */
padding-left: 200px;
padding-right: 150px;
}
.middle{
background-color: rgb(188, 96, 231);
width: 100%;
float: left;
height: 100px;
}
.left{
position: relative;
float: left;
width: 200px;
background-color: rgb(28, 179, 171);
/* 此处为margin-left */
margin-left: -100%;
left: -200px;
height: 100px;
}
.right{
position: relative;
float: left;
width: 150px;
background-color: rgb(238, 198, 89);
/* 此处为margin-right */
margin-right: -150px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">header</div>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
height: 50px;
clear: both;
background-color: rgb(233, 122, 122);
text-align: center;
line-height: 50px;
}
.footer {
height: 50px;
clear: both;
background-color: rgb(202, 224, 73);
text-align: center;
line-height: 50px;
}
.middle {
background-color: rgb(37, 202, 133);
width: 100%;
height: 100px;
float: left;
text-align: center;
}
.content {
/* 双飞翼使用margin防止中间内容被两侧覆盖 */
margin: 0 200px 0 200px;
height: 100px;
border: 1px solid green;
}
.left {
height: 100px;
background-color: rgb(119, 106, 231);
float: left;
width: 200px;
/* 此处为margin-left */
margin-left: -100%;
text-align: center;
}
.right {
background: red;
height: 100px;
float: left;
width: 200px;
/* 此处为margin-left */
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="middle">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
.item{
border-radius: 50%;
width: 50px;
height: 50px;
background-color: black;
float: left;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
拓展
五点骰子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: space-around;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: black;
display: block;
}
.left, .right{
display: flex;
flex-direction: column;
padding: 5px;
justify-content: space-between;
}
.middle{
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="middle">
<span class="item"></span>
</div>
<div class="right">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</body>
</html>
参考
参考
7.absolute和relative分别依据什么定位？
8.居中对齐有哪些实现方式？
9.line-height的继承问题
p标签的行高为40px（20*200%）
line-height的几种写法：
- 写数值 如20px
- 写比例 如2/1
- 写百分比 如写200%
如果是前两种，则子元素就会直接继承数值或比例，但是如果写百分比还要进行相应的计算
针对不同写法 回答上面p标签的继承line-height如下：
1，如果body中的line-height：20px
那么 p标签中的line-height就是20px
2，如果body中line-height：1.5
那么p标签中的line-height:就是1.5*16px=24px
10.rem是什么？
11.如何实现响应式？
参考
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
