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负值、考察项目经验

概念：

1. 两边定宽，中间100%

2. 中间部分优先渲染，提升用户体验

3. 圣杯布局缺点:当中间区域宽度小于两边时，布局会破碎

使用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基础示例代码 下载地址