目录

CSS面试要点复习

本篇为近期准备前端面试的 CSS 部分个人总结,供个人复习使用。

HTML

为什么要 HTML 语义化(semantic HTML)?

  • 代码易读性增强,搜索代码更快捷
  • 方便搜索引擎对网站排序进行优化(SEO)
  • 屏幕阅读器能够更方便地“浏览”网页,对视障人士更为友好

块级元素 vs 行内元素

  • 块状:占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,有display: block / table,有divh1/h2/h3tableformheaderppreol/ul等等
  • 行内:不以新的一行开始,一般只包括数据,只占据对应标签的边框https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries 所包含的空间,有buttonlabelselectaimgcodespantextarea等等

CSS

布局

盒模型宽度计算

  • offsetWidth = 内容 + 内边距 + 边框,可以理解为渲染出来后“看得见”的部分实际占据的宽度,所以不包括外边距
  • 因为 CSS 中定义的widthheight只针对内容,若想 DOM 节点实际的offsetWidth和 CSS 中定义的 width 相等的话,需要定义box-sizing: border-box

margin 纵向重叠

  • 相邻元素的margin-topmargin-bottom会有重叠
  • 空白元素(pdiv等)的margin-topmargin-bottom也不会生效

margin 为负时

  • margin-topmargin-left负值,元素自身向上、向左移动
  • margin-right为负,右侧元素向左移动,自身不受影响
  • margin-bottom为负,下方元素向上移动,自身不受影响

BFC 理解与应用

  • 什么是 BFC: 一块独立的渲染区域,内部元素会被包裹起来,其渲染不受外界影响,也可用于不希望这块区域内部的渲染也影响到整个页面的布局的情况
  • 应用:
    • 不影响整体页面布局,如底部反馈按钮设置为position: absolute; bottom: 50px; right: 50px
    • 清除浮动脱离文档流导致的背景塌陷等副作用,可以把 float 元素的父元素设置为overflow: auto/hidden/scroll或者display: flex/inline-box创建 BFC
  • 清除父子元素外边距塌陷的问题,给子元素添加display: flex/inline-box可以把子元素包裹起来,这时子元素的外边距就是相对父元素而不是父元素外部了
  • 常见方式:
    • position: absolute/fixed
    • float: not none
    • overflow: not visible
    • display: flex/inline-block
    • root: <html>

float 布局

  • 圣杯布局

    • 设置 container 左右的内边距
    • 设置左、右元素的 width 为对应的内边距,设置中央元素宽度为 100%
    • 全部元素float: left
    • HTML 如下:
      1
      2
      3
      4
      5
      
      <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
      </div>
      
    • #left { margin-left: -100% } 相当于左移一个#center元素的宽度,刚好移动到了中央元素左边
    • #right { margin-right: -100% } 相当于把右元素后的元素往左移动,但是因为#right右边没有元素了,所以相当于把自身往右移动 100% 父元素的宽度,也就是#center的宽度
  • 双飞翼布局

    • HTML 布局如下:
      1
      2
      3
      4
      5
      6
      7
      
      <body>
        <div id="main" class="col">
          <div id="main-wrap">this is main</div>
        </div>
        <div id="left" class="col">this is left</div>
        <div id="right" class="col">this is right</div>
      </body>
      
    • 所有colfloat: left
    • #main宽度为 100%,main-wrap设置外边距,对应左右元素的宽度
    • #left { margin-left: -100% }
    • #right { margin-left: <自身宽度> }
  • 手写 clear fix

    1
    2
    3
    4
    5
    
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
    

flex 布局

定位

仔细研读 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

absolute 和 relative 定位

  • relative根据自身定位
  • absolute一层层往上找父元素,直到找到最近的一个定位元素为止
    • 定位元素包含position: absolute/fixed/relative/staticbody

居中对齐

  • 水平居中

    • 对块级元素当中的内容进行水平居中:text-align: center
    • 让块级元素本身在父元素中居中:margin: auto
    • display: absolute,可以left: 50%; margin-left: -<自己一半的宽度>
  • 垂直居中

    • 行内元素:line-height=height
    • display: absolute,可以top: 50%; margin-top: -<自己一半的高度>(显而易见,自身高度必须已知)
    • display: absolute,还可以top: 50%; left: 50%; transform: translate(-50%, -50%)
    • (终极)方案:
      1
      2
      3
      4
      5
      6
      7
      8
      
       {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
      

      其中,top:0; bottom:0; margin: auto可以做到垂直方向居中,left:0; right:0; margin: auto可以做到水平方向居中。

图文样式

line-height 如何继承

仔细阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

  • line-height最好使用数字或像素,因为使用em和百分比都会出现继承问题
  • 使用像素和数字,计算行高时会用自身字体大小
  • 使用em和百分比,计算行高会用父元素字体大小

响应式布局

rem

  • em相对父元素的字体大小
  • rem相对根元素的字体大小(r for root)

media-query

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries