重头回顾一下知识
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;
图文样式
1.line-height如何继承?
如果是具体数值, 如30px, 则继承该值
如果是比例,如2/1.5, 则继承该比例
如果是百分百,如200%,则继承计算出来的值
响应式
1.rem
px是绝对长度单位;em相对长度单位,相对于父元素;rem是一个相对长度单位,相对于根元素;
缺点: 具有阶梯性
2.响应式布局的常见方案
media-query 根据不同屏幕宽度设置根元素font-size, 单位采用rem方式
