源网站
01. 如何将下面的代码修改的更有语义化？
<div>
<div>这是一个标题</div>
<div>这是一段文字</div>
<div>
<div>列表1</div>
<div>列表2</div>
</div>
</div>考察点：是否理解语义化
参考答案：
<div>
<h1>这是一个标题</h1>
<p>这是一段文字</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</div>语义化的意义：能够增加代码的可读性，有利于所有引擎优化，会根据标签权重值爬取关键字
02. 哪些标签是块标签？有哪些是行内标签？
考察点：是否了解块标签与行内标签的概念、写H5新增标签会加分
参考答案：
<!-- 块标签 -->
div、p、h1-h6、ul、li、header、footer、nav、main、aside、section、article
<!-- 行内标签 -->
span、a、b、i
<!-- 行内块标签 -->
img、input03. 行内标签与块标签的区别
考察点：是否了解块标签与行内标签的概念、写H5新增标签会加分
参考答案：
<!-- 块标签 -->
默认宽是父级100%、独占一行、可设置宽高、可设置四个方向的padding/margin、可以嵌套其他标签（p除外）
<!-- 行内标签 -->
默认宽是内容撑开的、共享一行、不可设置宽高、只能设置左右的padding/margin，不能嵌套块标签
<!-- 行内块标签 -->
可设置宽高、共享一行、可设置四个方向的padding/margin04. 阅读下面代码，div的offsetWidth是多少？
<style>
#box {
width:100px;
height:100px;
padding:10px;
border: 1px solid red;
margin: 20px;
}
</style>
<div id="box"></div>考察点：盒子模型
参考答案：
/* 盒子模型宽高=width/height + padding + border */
*{
box-sizing: border-box;
}
/* 设置了这个就代表：盒子模型=width/height */05. 阅读以下代码，“文字”与“标题”的间距是多少
<style>
p {
font-size:16px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
</style>
<p>文字</p>
<p></p>
<p></p>
<p></p>
<p>标题</p>考察点：margin塌陷、上下方向塌陷，谁的值大谁的
参考答案：
15px引申问题：左右的margin会产生塌陷吗？
06. margin设置top、left、right、bottom负值后，会发生什么
考察点：margin负值问题
参考答案：
margin-top、margin-left 设置负值，自身元素会往上移，左移
margin-right 设置负值，会让右边元素向左移
margin-bottom 设置负值，会让下边元素向上移引申问题：margin负值有哪些应用？
07. 什么是BFC？如何应用
考察点：对BFC概念的考察
参考答案：
Block Format Context 块级格式上下文
一个独立渲染的区域，元素内渲染不影响外边界元素
形成BFC的条件
* float:left/right
* voerflow:hidden
* position:absolute/fixed
* display:flex/inline-block
BFC常用于清浮动08. 如何实现圣杯布局
考察点：margin负值、考察项目经验
概念：
-
两边定宽，中间100%
-
中间部分优先渲染，提升用户体验
-
圣杯布局缺点:当中间区域宽度小于两边时，布局会破碎
使用display:flex;
<style>
.search {
display: flex;
height: 44px;
background-color: pink;
}
.search-left,
.search-right {
width: 40px;
height: 100%;
background-color: violet;
}
.search-middle {
flex: 1;
background-color: orange;
}
</style>
<div class="search">
<div class="search-left"></div>
<div class="search-middle"></div>
<div class="search-right"></div>
</div>浮动布局
<style>
.search {
height: 40px;
background-color: pink;
min-width: 500px;
}
.search-left,
.search-right {
width: 40px;
height: 100%;
background-color: violet;
}
.search-left {
float: left;
}
.search-right {
float: right;
}
.search-middle {
width: 100%;
height: 100%;
padding: 0 40px;
background-color: orange;
}
</style>
<div class="search">
<div class="search-left"></div>
<div class="search-right"></div>
<div class="search-middle"></div>
</div>09. 如何清除浮动？手写clearfix
考察点：态度
参考答案：
overflow:hidden
display:inline-block
clear:both
clearfix:
:after{
display:block/table
content:""
clear:both
}10. div水平垂直居中？
注意：固定宽高？
参考答案：
-
margin负值+绝对定性/固定定位
-
display:flex
-
transform:translate(-50%,-50%); + 定位
-
display:table;
11、px/%/em/rem/vw/vh有什么区别？
px 像素
% 根据父级大小计算百分比
1em = 1个当前对象的font-size
1rem = 一个相对HTML根元素的font-size
vw = 可视窗口宽度的1%
vh = 可视窗口高度的1%12. visibility:hidden 与display:none 有什么区别？
visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。
display:none将元素的显示设为无，即在网页中不占任何的位置。
13.给元素设置了 box-sizing：border-box; 会产生什么影响？
考察点：盒子模型
参考答案：
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）
没有设置box-sizing:border-box属性，宽高会加上padding和border的值
加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里14.阅读下面的代码，文字应该是什么颜色？
<style>
#box #wrap {
color: green;
}
span {
color: blue;
}
</style>
<body>
<div class="box" id="box">
<p class="wrap" id="wrap">
<span class="text" id="text">文字</span>
</p>
</div>
</body>考察点：css选择器的优先级
参考答案：blue
解析：
!ipmortand -> 行内样式 -> id -> class -> 元素/标签 -> 通配符/*
注意：继承的样式永远没有给的大15、定位
position:
fixed 固定定位，根据可视区定位
absolute 绝对定位，根据最近的有定位父级
relative 相对定位，相对自己
strtic 没有定位
sticky 粘性定位