2022.HTML与CSS面试题

1. 如何理解语义化
   1.让人更容易读懂（增加代码的可读性）。2.让搜索引擎更容易读懂（SEO）。
2. HTML和CSS是什么

HTML(超文本标记语言)；CSS（层叠式样式表）

1. 块级元素&内联元素

块级元素：display：block/table；有div、h1、h2、table、ul、ol、p等可以设置宽高独占一行

内联元素：display：inline/inline-block；有span、img、input、button等不能设置宽高不会独占一行，写满了会换行。

1. offsetWidth=（内容宽度+内边距+边框），无外边距

box-sizing:border-box;盒子的宽就是内容宽。

1. margin纵向重叠的问题
   相邻元素的margin-top和margin-bottom会发送重叠，空内容的p标签也会重叠
2. margin负值的问题

1. margin-top和margin-left负值，相当于向上/向左拖拽，而margin-right负值，右侧的元素向左移动，而自身不受影响。margin-bottom负值，下方元素上移，自身不受影响

1. BFC的理解与应用

Block format context （块级格式化上下文）一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
BFC特性： 1.同一个BFC下margin会重叠；2.计算BFC高度时会算上浮动元素；3.BFC不会影响到外部元素；4.BFC内部元素是垂直排列的；5.BFC区域不会与float元素重叠

1. 形成BFC的常见条件：1.float不是none；

1. position是absolute/fixed；
2. overflow不是visible（overflow=hidden）；

4.display是flex/inline-block；

8.BFC的常见应用：清除浮动（overflow：hidden）   

 .fahter{

        width: 400px;

        border: 1px solid deeppink;

        overflow: hidden;

    }

9.float布局中圣杯布局和双飞翼布局
 

 

圣杯布局：1.定义好header和footer的样式，使其横向撑满；2.在container中的三列（left，right，center）依次排布3.给container设置弹性布局display：flex；4.left和right区域定宽，conter设flex=1。

双飞翼布局：1.center、left、right的class名都为col，设置float：left，给center的盒子加一个class名为center-wrap，设置margin：0 190px 0 190px，给left设margin-left：-100%,给right设margin-left：-190px。

10.手写clearfix（必须掌握）

.clear：after{ contain：’’;  display:table;   clear:both}

11.使用flex画一个三个点的筛子

 

12.absolute和relative分别依据什么定位

Relative依据自身定位，absolute依据最近一层的定位元素定位（absolute，relative，fixed，body）

子绝父相（子：absolute，父：relative）

13.★居中对齐的方式（必考）

居中方式分为水平对齐和垂直居中对齐

水平对齐：1.inline元素：text-align：center；2.block元素：margin：auto；3.absolute元素：left：50% +margin-left：负值（-宽的一半）

垂直居中对齐：1.inline元素：line-height值等于height值；2.absolute元素：top：50%+margin-top：负值（-高的一半）前提：子元素的宽高必须知道3.absolute元素：transform：translate（-50%，-50%）4.absolute：top、left、right、bottom=0，margin：auto

14.line-height继承问题

如果body的line-height为1.5（比例），那么p中的line-height为自身字体大小*1.5；
如果body的line-height为200%，那么p中的line-height为body的字体大小*200%为p的line-height。（考点）

15.rem是什么

Rem是 一个长度单位；

px是绝对长度单位，最常用；em，相对长度单位，相对于父元素，不常用；

Rem相对长度单位，相对于根元素（html），常用于响应式布局（设html中的font-size：100px，div就是0.16rem  1rem=100px）

响应式布局的常用方案：1.media-query，根据不同的屏幕宽度设置根元素font-size；

1. rem，基于根元素的相对单位

16.css 绘制三角形⭐⭐⭐⭐⭐

 // 给width 和 height 设为0，其他边框设为 transparent 透明

.x {

      width: 0;

      height: 0;

      background-color: red;

      border-left: 30px transparent solid;

      border-top: 50px black solid;

      border-right: 30px transparent solid;

  }