HTML+CSS 面试题

1.vh 和vW
rem的弊端：具有 阶梯性 ，就是不太连贯吧。

网页视口尺寸：
1. window.screen.height  // 屏幕高度
2. window.innerHeight  // 网页视口高度
3. document.body.clientHeight  // body 高度

vh 网页视口高度的 1 / 100
vw 网页视口宽度的 1 / 100
vmax 取两者最大值；vmin 取两者最小值

盒模型的宽度计算：

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

=width+padding+border

=100+10*2+1*2

=122px

2.boxing-sizing:border-box 使width宽度= boder-box宽度；

3.相邻元素的margin-top和margin-bottom会发生重叠。大的覆盖小的

空白内容<p></p>也会重叠

1.html语义化,增加代码可读性,让搜索引擎更容易读懂(seo)
2.块状元素display:block/table 有div h1 h2 table ul ol p等,内联元素display:inline/inline-block;有span img input button等
3.盒模型宽度计算:offsetWidth = (内容宽度 + 内边距 + 边距) + 外边距

4.margin纵向重叠问题:相邻元素的margin-bottom和margin-top会发生重叠，取大值,父元素添加flex布局则不会发生重叠问题;空标签不占位没有高度，不被计算
margin负值问题:margin-left负值元素会向左移动,margin-right负值相邻元素会向左移动,margin-top,margin-bottom同理
5.BFC意思就是一块独立渲染区域,内部元素的渲染不会影响边界以外的元素,BFC常用于清除浮动,BFC常见条件float不是none,position是absolute或fixed,
overflow不是visible display是flex inline-block

6.float布局，使用float和margin负值实现float布局,并且要清除左右浮动,display:table;clear:both;
7.flex布局,弹性布局,是为了解决浏览器布局麻烦而设计的灵活布局方式,通过主轴和交叉轴,可以实现元素的各种线性排列方式
8. relative依据自身定位 absolute 依据最近一层非static父元素进行定位,
9. inline元素居中text-align:center;行高等于元素高度, block元素居中:position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;

如何实现圣杯布局和双飞翼布局？
1.三栏布局，中间一栏最先加载和渲染（内容最重要）
2.两侧内容固定，中间内容随着宽度自适应
3.一般用于PC网页
技术总结：
1.使用float布局
2.两侧使用margin负值，以便和中间内容横向重叠
3.防止中间内容被两侧覆盖，一个用padding一个用margin

 手写clearfix

手写 clearfix
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容IE低版本 */
}

圣杯布局：

定位相关的问题：

absolute 和 relative 依据什么定位

定位 relative 依据自身定位

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

fixed 直到 body      

水平居中：

 inline 元素： text-align: center

 block 元素： margin：auto 

absolute元素：left: 50% + margin-left 负值 (需要知道子元素的宽)  

垂直居中： 

inline 元素：line-height 的值等于height值 

absolute 元素：top: 50% + margin-top 负值 (需要知道子元素的高) 

absolute 元素：transform(-50%,-50%)  (不需要知道子元素的高) 

absolute 元素：top left bottom right = 0 + margin: auto (不需要知道子元素的高)   

学到了新的水平垂直居中方式：
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
但是transform(-50%， -50%)那里应该指的是，top、left设为50%，然后用transform: translate(-50%, -50%)

line-height 如何继承：

line-height 如何继承

写具体数值，如30px，则继承该值

写比例，如2/1.5，则继承该比例（直接继承与继承本身的font-size相乘的值）

写百分比，如200%，则继承计算出来的值（考点）（先与本身的font-size相乘后，再继承）

16*1.5=24px

20*200%=40px

rem是什么

面试题 说一说px em rem的区别_我要学前端。的博客-CSDN博客

rem相对长度单位，相对于根元素的font-size的值 常用于响应式布局

em相对长度单位，相对于父元素，不常用

响应式布局的常用方案：
1.@media-query, 根据不同屏幕的宽度设置根元素的 font-size
2.rem，基于根元素的相对单位

语法：
@media only screen and (max-width: 374px 设备大小范围) {
html {
font-size: 具体的值
}
}

rem的弊端：“阶梯”性

适用于跨度大的

网页视图尺寸

window.screen.height//屏幕高度

window.innerHeight//网页视图高度 浏览器可以显示内容的高度 不含工具条和搜索框

document.body.clientHeight//body高度

vh 网页视口高度的1/100

vw网页视口宽度的1/100

vmax取两者最大值，vmin取两者最小值

//window.innerHeight === 100vh

//window.innerWidth === 100vw