css interview questions

120 阅读5分钟

在学完css和HTML章节的课程后,发现自己的基础知识有很多不足,决定对学过的知识进行总结,加深印象,更好的应对面试。

HTML面试题

1. 如何理解 HTML语义化?

定义

语义化简单理解就是让机器可以读懂内容,Html语义化是指使用语义恰当的标签,使页面有良好的结构,让页面元素有含义。

作用

  • 去掉样式后页面呈现清晰的结构,让人比较容易阅读和理解(增加代码可读性)
  • 利于浏览器搜索引擎收录(SEO)
  • 便于团队项目的可持续运作及维护,让开发人员读懂结构。

举例子说明
下面右边代码即HTML语义化,相对于左边而言更易阅读和理解 image.png

2. 默认情况下,哪些HTML标签是块级元素,哪些是内联元素?

  • display:block/table,有div,h1,h2,table,ul,ol,p等,特定要独占一行显示
  • display:inline/inline-block;有span img input button等,特点不在一行显示

CSS-布局

1. 盒子模型的宽度如何计算?

定义: CSS 的盒子模型有两种:IE 盒子模型、标准的 W3C 盒子模型 IE 的 content 部分包含了 border 和padding;

举例说明:
请问以下div1的offsetWidth是多大?

<style>
       #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,然后100px就会包括padding和border

2. margin纵向重叠的问题

举例说明:AAA和BBB之间的距离是多少?

<style>
       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>标签也会重叠

3. margin负值的问题

具体问题:对margin的top,left,right,bottom设置负值,有何效果?

  • margin-top和margin-left负值,元素向上,向左移动
  • margin-right负值,右侧元素左移,自身不受影响
  • margin-bottom负值,下方元素上移动,自身不受影响
<style>
       body{
           margin: 20px;
       }
       .float-left{
           float: left;
       }
       .clearfix:after{
           content:'';
           display: table;
           clear: both;
       }
       .container{
           border: 1px solid #ccc;
           padding: 10px;
       }
       .container .item{
           width: 100px;
           height: 100px;
       }
       .container .border-blue{
           border: 1px solid blue;
       }
       .container .border-red{
           border: 1px solid red;
       }
</style>
     
      <p>用于测试margin top bottom 的负数情况</p>
    <div class="container">
        <div class="item border-blue">this is item 1</div>
        <div class="item border-red">this is item 2</div>
    </div>

    <p>用于测试margin left right 的负数情况</p>
    <div class="container clearfix">
        <div class="item border-blue float-left">this is item 3</div>
        <div class="item border-red float-left">this is item 4</div>
    </div>

以上是代码演示,可通过设置margin-top,margin-bottom,margin-right,margin-left测试实际item盒子的变化

4. BFC的理解和应用

什么是BFC?如何应用?

  • block format context,块级格式化上下文
  • 一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
  • 形成BFC的常见条件:float不是none,position是absolute或fixed,overflow不是visible,display是flex inline-block等
  • BFC常见应用:清除浮动
  • 代码演示
 <div class="container bfc">
        <img src="webp.webp.jpg" alt="" class="left" >
        <p class="bfc">这是一段文字</p>
     </div> 
     
     <style>
       .container{background-color: #ccc;border: 1px solid red;}
       .left{float: left;}
       img{margin-right: 10px;}
       .bfc{overflow: hidden;}
    </style>

以上示例中添加的bfc类用于渲染一个独立区域,只影响内部元素,不影响区域外元素

5. float布局的问题,以及clearfix

如何实现圣杯布局和双飞翼布局

目的:

  • 三栏布局,中间一栏最先加载和渲染(内容最重要)
  • 两侧内容固定,中间内容随着宽度自适应
  • 一般用于pc网页

技术总结

  • 使用float布局
  • 两侧使用margin负值,以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖,一个用padding,一个用margin
<style>
        body{min-width: 550px;}
        header{background-color: #f1f1f1;text-align: center;}
        #left{background-color: red;width: 200px;margin-left: -100%;position: relative;right: 200px;}
        #center{background-color: yellow;width: 100%;}
        #right{background-color: green;width: 100px;margin-right: -100px;}
        footer{background-color: #f1f1f1;text-align: center;clear: both;}
        .container{padding-left: 200px;padding-right: 100px;}
        .container .column{float: left;}
    </style>
    
    <header>this is head</header>
    <div class="container">
        <div id="center" class="column">中间</div>
        <div id="left" class="column">左边</div>
        <div id="right" class="column">右边</div>
    </div>
    <footer>this is foot</footer>

以上是圣杯布局的示例,一定要理解左边和右边元素样式布局的问题

<title>双飞翼布局</title>
    <style>
        body{min-width: 550px;}
        #main{background-color: #ccc;width: 100%;height: 190px;}
        #left{background-color: red;width: 200px;height: 190px;margin-left: -100%;}
        #right{background-color: green;width: 200px;height: 190px;margin-left: -200px;}
        .main-wrap{margin:  0 200px 0 200px;}
        .col{float: left;}
    </style>
    
     <div id="main" class="col">
        <div class="main-wrap">中间</div>
    </div>
    <div id="left"  class="col">左边</div>
    <div id="right"  class="col">右边</div>

以上代码是双飞翼布局示例,注意左边元素和右边元素是如何布局的

两者的区别:

  • 双飞翼使用margin给左右留白,圣杯布局使用padding给左右留白
  • 双飞更简洁易懂,圣杯相对负责些

手写clearfix(10s之内写出来)

/* 手写 clearfix */
        .clearfix:after{content: '';display: table;clear: both;}
        .clearfix{*zoom:1}  /*兼容IE低版本 */

6. flex画色子

flex实现一个三点的骰子

常用语法回顾:flex-direction,justify-content,align-items,flex-wrap,align-self(子元素)必须掌握,其他可以查文档

<style>
        /* 用flex画一个骰子 */
        .container{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .item{
            width: 40px;
            height: 40px;
            background-color: #ccc;
            border-radius: 50%;
        }
        .item:nth-child(2){
            align-self: center;
        }
        .item:nth-child(3){
            align-self: flex-end;
        }
    </style>
<div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

css-定位

absolute和relative分别依据什么定位?

  • relative依据自身定位
  • absolute依据最近一层的定位元素定位
  • 定位元素:absolute,fixed
  • 代码示例:

居中对齐有哪些实现方式?

水平居中(例子对应3-11 定位-解题-2)

  1. inline元素:text-align:center
  2. block元素:margin:auto
  3. abolute元素:left:50%+margin-left负值 垂直居中
  4. inline元素:line-height的值等于height值
  5. absolute元素:top:50%+margin-top负值
  6. absolute元素:transform(-50%,-50%)(不知宽高可以用)
  7. absolute元素:top,left,bottom,right=0+margin:auto(不知宽高可以用,兼容性比第三种好)

css-图文样式

line-height的继承问题

代码问题:

image.png

  • 写具体数值,如30px,则继承该值(比较好理解)
  • 写比例,如2/1.5,则继承该比例(比较好理解)
  • 写百分比,如200%,则继承计算出来的值(考点)
  • 代码演示:

css-响应式

rem是什么?

  • rem是一个长度单位
  • px,绝对长度单位,最常用
  • em,相对长度单位,相对于父元素,不常用
  • rem,相对长度单位,相对于根元素,常用于响应式布局
  • 代码演示:

如何实现响应式?

响应式布局的常见方案?

  • media-query,根据不同的屏幕宽度设置根元素font-size
  • rem,基于根元素的相对单位
  • 代码演示:要理解media的用法,不一定会写

vw/vh

rem的弊端:‘阶梯’性

image.png

网页视口尺寸

  • window.screen.height // 屏幕高度(宽度同理)
  • window.innerHeight // 网页视口高度(除开浏览器的头部和尾部)
  • document.body.clientHeight // body 高度
  • 例子演示:

image.png

  • 以上截图示例中667是screen.height,553是innerHeight ,左边红色方块是document.body.clientHeight
  • vw/vh
    • vh 网页视口高度的1/100
    • vw网页视口宽度的1/100
    • vmax取两者最大值;vmin取两者最小值
    • 代码演示