前端基础知识：css笔试题总结

1、盒模型 宽度 offsetWidth 如何计算

内容 + 边框 + 填充

2、margin重叠问题：

相邻元素的margin-top 和 margin-bottom会发生重叠，空白内容也会重叠

3、margin 负值问题

• 左&上：自身上移
• 右&下 : 影响右边和下边的元素

4、BFC的理解应用

• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
• 形成BFC的条件（脱离文档流）： overflow:hidden ; float; position
• BFC常见应用，可以清除浮动（clear:left）

5、float布局： 圣杯布局padding 和 双飞翼布局margin

左右固定宽度，中间自适应

• 使用float布局
• 两侧使用margin负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用padding 一个用 margin

6、清除浮动

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

7、三点色子 flex布局

.box{
    display:flex;
    justify-content : space-between;
}
.item:nth-child(2){
    align-self:center;
}
.item:nth-child(3){
    alige-self:flex-end;
}

8、 absolute 与 relactive 定位

• absolute 根据最近有position的父元素进行绝对定位
• relactive 根据自身相对定位
• fix 根据浏览器窗口固定定位

9、元素居中

1. 水平居中：
   1. inline元素：text-aline:center
   2. 块元素：margin : 0 auto
   3. 定位元素：position, left:50% 结合 margin-left 负值 （须知道元素宽度）
2. 垂直居中：
   1. inline元素：line-height的值 = height的值
   2. 块元素： margin : auto 0
   3. 定位元素：position top:50% 结合margin -top负值 ( 须知道元素高度)
   4. transform( -50% , -50%)

10、 line-height 如何继承

1. 写具体数值，如30px, 则继承该值
2. 写比例，如 2 / 1.5 ,则继承该比例
3. 写百分比，如 200% ，则继承计算出来的值（ 考点）

body {
    font-size: 20px;
    line-height: 200%;
}
p {
    font-size: 16px;  /*行高为40*/
}

11、响应式

1. rem是什么 ----------长度单位

• px : 绝对长度单位，最常用
• em : 相对长度单位，相对于父元素，不常用
• rem ： 相对长度单位，相对于根元素，常用来做响应式布局

2. 响应式布局常用方案

• media-query 媒体查询，根据屏幕宽度设置不同的根元素font-size
• 使用rem单位布局

@media only screen and (max-width: 372px){
    /* iphone5 或者更小的尺寸，以 iphone 的宽度（320px）比例设置 font-size*/
    html{ font-size: 86px}
}
@media only screen and (min-width: 372px) and (max-width:413px){
    /* iphone6/7/8 和 iPhone X*/
    html{ font-size: 100px}
}
@media only screen and (min-width: 414px){
    /* iphone6p 或更大尺寸*/
    html{ font-size: 110px}
}

3. vw/ vh

• rem的弊端 ： 阶梯性（见上）
• 窗口页面尺寸
  • window.screen.height //屏幕高度
  • window.innerHeighr //网页视口高度（除去顶部和底部）
  • document.body.clientHeight //body 高度