课程名称：HTML与CSS面试课程
课程章节：CSS面试详解
课程讲师： 双越
课程内容：
五、float 布局
1.如何实现圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的
①三栏布局，中间一栏最先加载和渲染（内容最重要）
②两侧内容固定，中间内容随着宽度自适应
③一般用于PC网页
圣杯布局和双飞翼布局的技术总结
①使用float布局
②两侧使用margin 负值，以便和中间内容横向重叠
③防止中间内容被两侧覆盖，一个用padding，一个用margin
圣杯布局：
双飞翼布局：
2.手写clearfix
.clearfix:after {
content:'';
display:table;
clear:both;
}
.clearfix {
*zoom:1;/*兼容IE低版本*/
}六、flex 布局
1.常用语法回顾
flex-direction 主轴方向
justify-content 主轴对齐方式
align-items 交叉轴对齐方式
flex-wrap 换行
align-self 子元素在交叉轴对齐方式
七、absolute和relative定位
relative依据自身定位
absolute依据最近一层定位元素定位
八、居中对齐的方式
水平居中
inline元素：text-align:center
block元素：margin：auto
absolute元素：left:50% + margin-left 负值
垂直居中
inline元素：line-height 的值等于 height
absolute元素：top50% + margin-top 负值
absolute元素：transform（-50%，-50%）
absolute元素：top,left,bottom,right = 0 + margin:auto
九、line-height 如何继承
写具体数值，如30px,则继承该值（比较好理解）
写比例，如2/1.5，则继承该比例（比较好理解)
写百分比，如200%，则继承计算出来的值（考点）
十、rem 是什么
rem是一个长度单位
px,绝对长度单位，最常用
em,相对长度单位，相对于父元素，不常用
rem,相对长度单位，相对于根元素，常用于响应式布局
十一、响应式布局的常用方案
◆media-query,根据不同的屏幕宽度设置根元素font-size
◆rem,基于根元素的相对单位
背诵全文💪
共同学习，写下你的评论
评论加载中...
作者其他优质文章
