原文章地址
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、input
03. 行内标签与块标签的区别
考察点:是否了解块标签与行内标签的概念、写H5新增标签会加分
参考答案:
<!-- 块标签 -->
默认宽是父级100%、独占一行、可设置宽高、可设置四个方向的padding/margin、可以嵌套其他标签(p除外)
<!-- 行内标签 -->
默认宽是内容撑开的、共享一行、不可设置宽高、只能设置左右的padding/margin,不能嵌套块标签
<!-- 行内块标签 -->
可设置宽高、共享一行、可设置四个方向的padding/margin
04. 阅读下面代码,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;
1、不设置宽高
div {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: aqua;
}
2、不设置宽高
div {
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: aqua;
}
3、设置宽高
div {
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
background-color: aqua;
}
4、弹性盒子
.box {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
}
.box div{
width: 50px;
height: 50px;
background-color: antiquewhite;
}
<div class="box">
<div></div>
</div>
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 粘性定位
面试HTML CSS基础示例代码 下载地址