前端面试总结01-html与css

html:(1)语义化标签的理解:

1.增加代码的可读性

2.让搜索引擎更容易读懂

(2)块级元素与内联元素的标签与区别

1.块状元素：display:block/table;

常用标签：div,h1,h2,table,ul,ol,p等

特点：独占一行

2.内联元素：display:inline/inline-block;

常用标签：span,img,input,button等

css：(1)布局：
1.盒模型宽度计算：
包括标准盒模型与ie盒模型与width及offset-width关系

标准盒模型：

 IE盒模型

box-sizing:border-box

2.margin在使用中的纵向重叠问题

（1：相邻元素的margin-top和margin-bottom会发生重叠

（2：空白元素的<p></p>也会重叠
3.margin负值问题

（1：margin-top和margin-left负值，元素向上，左移动

（2：margin-right负值，右侧元素左移，自身不受影响

（3：margin-bottom负值，下方元素上移，自身不受影响
4.BFC的理解:
包括bfc含义以及产生条件

（1：Block format context,块级格式化上下文

（2：一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素

产生Bfc的常见条件

（1：float不是none

（2：display为flex,inline-block等

（3：position为absolute或fixed

（4：overflow不是visible

bfc常用于清除浮动

5.float布局：
包括圣杯布局与双飞翼布局

目的：

（1：三栏布局，中间一栏最先加载和渲染

（2：两次内容固定，中间内容随着宽度自适应

（3：一般用于pc页面

总结：

（1：使用float布局

（2：两侧使用margin负值以便和中间内容横向重叠

（3：防止中间内容被两侧覆盖，一个用padding,一个用margin

6.flex布局：
包括常用语法与三点色子的实现

常用语法：

（1：flex-direction

（2：justify-content

（3：align-items

（4：flex-wrap

（5：align-self

三色色子实现：

主容器使用display:flex;justify-content:space-between;

点数style如下

(2)定位：
1.absolute与relative定位依据

relative依据自身定位

absolute依据最近一层的定位元素定位
2.居中对齐的实现方式

水平居中：

（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(-50%,-50%)

（4：absolute元素:top,left,bottom,right=0+margin:auto
3.css图文样式：
包括lineheight继承关系，响应式布局与长度单位，网页视口尺寸

line-height继承关系

（1：写具体数值，如30px,则继承该值

（2：写比例,如1/1.5则继承该比例

（3：写百分比，如200%，则继承计算出来的值

长度单位：

（1：px,绝对长度单位，最常用

（2：em,相对长度单位，相对于父元素，不常用

（3：rem:相对长度单位，相对于根元素，常用于响应式布局

响应式布局常用方案：

（1：media-query,根据不同屏幕宽度设置根元素font-size

（2：em,相对长度单位，相对于父元素，不常用

rem弊端：阶梯性

网页视口尺寸：

（1：window.screen.height//屏幕高度

（2：window.innerHeight//视口网页高度

（3：document.body.clientHeight//body高度

vw/vh:

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

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

（3：vmax取两者最大值；vmin取两者最小值