html面试题第一弹

陈aijiao
93 阅读2分钟

HTML面试题

1. 如何理解Html语义化

语义化标签：对人比较友好，对机器能看到重点，分清主次关系

让人更容易读懂（增加代码可读性）

让搜索引擎更容易读懂（SEO）

image-20211031210336576

2. 哪些标签是块级元素，哪些是内联元素

image-20211031210616438

CSS面试题

布局：

  1. 盒模型的宽度

image-20211101101408941

offsetwidth = content + padding2 + border2 (border 为外边界)

如果让offsetwidth 值为一百：box-sizing: border-box

此时width为盒子的宽度

4. margin纵向重叠

image-20211101110753911

image-20211101110823221

  1. margin负值 top right bottom left

top | left: 元素向上||向左移动

right: 本身不移动，右侧元素左移

bottom: 本身不移动，右侧元素上移

  1. BFC 理解和应用 image-20211101111126387

  • float布局

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

使用float布局

两侧使用margin负值，以便和中间横向重叠

防止中间被两侧覆盖，一个用padding 一个用margin

双飞翼布局

8.手写clearfix

  1. flex (画色子)

flex布局语法

image-20211101122136638

  1. 定位：

  • absolute relative 依据谁定位

relative依据自身定位

absolute依据最近一层的定位元素定位

定位元素：absolute relative fixed || body

11.居中对齐的实现方式

水平居中

inline元素：test-align:center

block元素：margin:auto

absolute元素：

 left:50%
 margin-left:-150px  //必须知道宽度

垂直居中

inline元素：line-height: 50px height: 50px

absolute元素：

 top:50%
 margin-top:-50px // 必须知道高度

absolute元素：transform css3属性

 left :50%
 top: 50%
 transform: translate(-50%，-50%)；

absolute元素：

     .container-4 {
             position: relative;
         }
         .container-4 .item {
             width: 100px;
             height: 50px;
             position: absolute;
             top: 0;
             left: 0;
             bottom: 0;
             right: 0;
             margin: auto;
 }

12.图文样式

  • line-height 如何继承

image-20211101133911489

13.响应式

  • rem是什么

    rem长度单位：可使用在任何有长度的位置

    px: 绝对长度单位

    em: 相对于父元素的长度单位

    rem: 相对于根元素的长度单位

rem的弊端：阶梯性

  • 如何实现响应式

media-query

  • vm和vh
  • 网页视口尺寸

image-20211101140622579

vh:网页视口高度的1/100

vw: 网页视口宽度的1/100

vmax/vmin: 取vh和vw的最大或最小值

\

avatar
文章
阅读
粉丝