课程名称：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,基于根元素的相对单位

背诵全文💪