2024前端面试准备-HTMLCSS

重头回顾一下知识

HTML面试题

1.怎么理解HTML语义化
让人更容易读懂(增加代码可读性),让搜索引擎更容易读懂(SEO)
2.默认情况下哪些是块元素,哪些是内联元素
块元素: display:block/table; 有dev、h1、h2、table、ul、ol、p等.
内联元素: display:inline/inline-block;有span、img、input、button等.

CSS面试题

布局相关

1.盒模型宽度计算
offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距
box-sizing: boerder-box; width = offetwidth
2.margin纵向重叠问题
相邻元素的margin-top盒margin-bottom会发生重叠
空白内容的

也会重叠
3.margin负值问题
margin-top盒margin-left设置负值,元素会向上或向左移动
margin-right负值,右侧元素往左移,自身不受影响
margin-bottom负值,下方元素上移,自身不受影响
4.BFC理解与应用
Block format content, 块级格式化上下文
一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
BFC应用: 清除浮动
BFC形成条件:

float不是none
display是 flex inline-block等
position是absolute或者fixed
overflow不是visible

5.float布局圣杯布局和双飞翼布局的
圣杯布局和双飞翼布局的技术总结:
使用float 布局
两侧使用 margin 负值，以便和中间内容横向重叠, 防止中间内容被两侧覆盖，圣杯布局用 padding 双飞翼用 margin
6.手写clearfix

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

7.flex布局

flex-direction : 主轴方向.

justify-content : 主轴对齐方式

align-items 其他轴对齐方式

flex-wrap 换行

align-self 字元素

定位相关

1.absolute 和 relative 分别依据什么定位?
relative 依据自身定位,不会影响外界元素,
absolute 依据最近一层的定位元素

2.居中对齐有哪些实现方式
水平居中:
inline元素: text-align:center;
block元素: margin:auto;
absolute元素: left:50%+magin-left负值50%
垂直居中:
inline元素: line-height 的值等于height值
absolute元素: top:50%+magin-top负值50%
absolute元素: transform(-50%,-50%)
absolute元素: top, left,bottom,right = 0 + margin:auto;