HTML CSS 面试题

CSS学习, HTML学习, 面试题 本文总阅读量次

慕课 快速搞定前端技术一面 第三章 笔记

HTML

如何理解HTML语义化

  • 让人更容易读懂（增加代码可读性）
  • 让搜索引擎更容易读懂（SEO）

默认下的块级元素/内联元素

  • 问题：默认情况下，哪些HTML标签是块级元素/内联元素
  • display：block/table；有div h1 h2 table ul ol p等
  • display：inline/inline-block；有span img input button等

CSS

布局

盒模型宽度（offsetWidth）计算

  • offsetWidth包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值，不包括外边距。
  • 问题：例子
    • 错误答案:100+10+1=111px
    • 注意内边距和border是2份！1+10+100+10+1=122px
  • 补充问题：如果让offsetWidth等于100px，该如何做？
    • 答案：设置CSS3属性box-sizing为border-box，这样100px的width就包含了padding、border和width了，在这offsetWidth=padding（20）+border（2）+内容的width（会自动缩小为78）=width（100px）

（块之间的）margin纵向重叠的问题

  • 相邻块元素的margin-top和margin-bottom会发生重叠（只发生在块之间，所以只涉及纵向，inline-block之间不存在margin重叠）
  • 注意：空白内容的<p></p>也会重叠
  • 问题：例子
    • 错误答案：15*4=60px
    • 答案：15px

margin负值的问题

  • 问题：对margin的top left right bottom设置负值，有何效果？
  • 答案：
    • margin-top和margin-left负值，元素向上、向左移动
    • margin-right负值，自身不受影响，右侧元素左移
    • margin-bottom负值，自身不受影响，下方元素上移

BFC理解和应用

  • 问题：什么是BFC
    • 答案： Block format context 块级格式化上下文，是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
  • 问题：形成BFC的常见条件
    • 答案：
      • float不是none
      • position是absolute或fixed
      • overflow不是visible
      • display是flex、inline-block等
        • 建议使用display:flow-root产生无副作用的BFC
        • 注意：块级元素不算BFC！！
  • 问题：常见应用
    • 答案：清除浮动，将浮动元素的父元素设置为BFC
  • 更多可参考“BFC与浮动”

float布局

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

  • 圣杯布局和双飞翼布局的目的：
    • 三栏布局，中间一栏最先加载和渲染（内容最重要）
    • 两侧内容固定，中间内容随着宽度自适应
    • 一般用于PC网页
  • 圣杯布局和双飞翼布局的技术总结（只要是达到这3个要点，细节不同无所谓）：
    • 中间3栏都使用float布局，中间一栏100%宽度放最前面
    • 两侧都是使用margin负值，以便和中间内容横向重叠（同一行）
    • 防止中间内容被两侧覆盖，圣杯用padding，双飞翼用margin
      • 圣杯用3栏的父元素设置padding把三个子盒子往中间挤+左右两个盒子加 相对定位+left/right 往2边分开
      • 双飞翼用3栏中间盒子main内增加一个内层div（main-inner）设置margin空出左右两栏位置
        • 注意：双飞翼一定是给中间盒子增加一个内盒子，如果直接在中间盒子上更改margin整个布局就乱了（图见前端举出-CSS（2））因为中间3个盒子都是浮动的，而float属性对兄弟元素的影响是会贴着旁边float元素，所以中间盒子向右边移动以后左边盒子也会跟着向右边移动，所以需要在中间盒子内部放置块元素来调整margin避免影响其他浮动元素
  • 具体代码实现

手写clearfix

1
2
3
4
5
6
7
.clearfix::after{
    content:"";
    display:block;
    height:0; 
    visibility:hidden;
    clear:both;
}

参考“百度前端技术学院 第五天学习笔记 （CSS浮动）”的“清除浮动-clear-属性”

flex布局

  • 可参考“百度前端技术学院 第七天学习笔记（CSS flexbox）”
  • 基础语法回顾：
    • 父容器中：
      • flex-flow简写flex-direction和flex-wrap属性
        • flex-direction规定子项排列方式及方向
        • flex-wrap规定溢出子项是否换行/如何换行（默认不换行）
      • justify-content定义子项沿主轴的对齐方式
      • align-items定义子项在交叉轴上的对齐方式
      • align-content定义行沿交叉轴的对齐方式
    • 子项中：
      • align-self调整单个子项在交叉轴上的对齐方式（对应父容器的align-items）
      • order顺序
      • flex简写flex-grow、flex-shrink和flex-basis
        • flex-grow子项空间占比（放大比例），**默认为0(即如果存在剩余空间，也不放大)**，不能为负数。
        • flex-shrink弹性收缩（缩小比例），默认为1（即如果空间不足，该项目将缩小），不能为负数。如果是0，则空间不足子项也不缩小
        • flex-basis子项初始大小（最小值），规定在主轴方向上的初始大小

画色子3点面

定位

absolute和relative分别依据什么定位

  • relative依据自身定位
  • absolute依据最近一层的定位元素定位
    • 定为元素：absolute、relative、fixed、body（<html>标签）

居中对齐

  • 水平居中：
    • 行内文本/图片（给父元素设置text-align）/块内文本：text-align：center
    • block元素（子元素宽度未知时）：margin：auto/margin：0 auto
    • position:absolute +left:50%+ transform:translateX(-50%)
    • display:flex + justify-content: center
  • 垂直居中：（必备条件：父元素是盒子容器且高度已设定）
    • inline元素：line-height的值等于height值
    • 块内文本/行内/单元格内 图片/文本/块级元素 垂直居中：父元素设置display: table-cell;vertical-align:middle
      • 注意：vertical-align 不作用于span元素
    • position：absolute +top:50%+ transform:translateY(-50%)/margin-top负值
    • display: flex;align-items: center;
  • 水平垂直居中：（前提是父元素高度确定）
    • display:flex;align-items:center;justify-content:center;
    • absolute元素（子元素宽高未知时）：top：50% + left：50% + transform:translate（-50%，-50%）
    • absolute元素（子元素宽高未知时）：top，left，bottom，right= 0 + margin：auto
      • 让绝对定位元素上下左右都等于0，再通过设置元素的margin自动填充达到居中效果

图文样式 line-height的继承问题

  • 知识点：如何继承取决于父元素的line-height的单位
    • 具体数值，如30px，则直接继承该数值（子元素的line-height=父元素的line-height）
    • 比例，如2/1.5，则直接继承该比例（子元素的line-height=子元素的font-size*父元素的line-height比例）
    • 百分比，如200%，则继承计算出来的值（子元素的line-height=父元素的font-size*父元素的line-height百分比）
  • 问题：问题
  • 答案：20px*200%=40px

响应式

rem、em、px

  • rem是一个相对长度单位，相对于根元素（<html>）的font-size，常用于响应式布局
  • px是绝对长度单位，最常用
  • em是相对长度单位，相对于父元素的font-size，不常用

响应式布局的常用方案

media-query搭配rem：media-query搭配rem
media-query根据不同的屏幕宽度来设置根元素font-size
rem基于根元素的相对单位
注意：最后一定要给<body>单独设置一遍font-size！否则默认的font-size就和设置rem的根元素一致了

vw/vh

  • rem的弊端：“阶梯性”，从上面“响应式布局的常用方案”例子中可以看到布局分为3个“阶梯”，一段一段的布局，vw/vh可以解决这个问题

  • 网页视口尺寸：（高度为例，宽度相似）

    • window.screen.height//屏幕高度（和手机型号有关系）
    • window.innerHeight//网页视口高度
    • document.body.clientHeight//body高度
      window.screen.height与window.innerHeight的例子
      网页视口尺寸例子

  • vw：网页视口宽度的1/100

  • vh：网页视口高度的1/100

  • vmax：取两者（vw/vh）的最大值

  • vmin：取两者（vw/vh）的最小值

CSS3 动画

CSS学习, HTML学习, 面试题