CSS总结

一、HTML

1 如何理解 HTML 语义化？

增加代码可读性

有利于SEO

2 默认情况下 哪些标签是 块级 / 内联

是否独占一行

display: block/table; div h1 p ul ol li table

display: inline/inline-block; span img input button

二、CSS

1 布局

1.1 盒子模型的宽高如何计算？

在标准盒模型：

width和height是内容区域即content的width和height。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

而IE盒模型或怪异盒模型：

width和height除了content区域外，还包含padding和border。

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

offsetWidth = content + padding + border

box-sizing: border-box;

box-sizing语法：
box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

1.2 margin 纵向重叠问题

相邻元素的 margin-top 和 margin-bottom 重叠

空内容标签也会重叠

1.3 margin 负值问题

margin-top / margin-left 负值 自身上/左移动 下/右元素也移动

margin-bottom 自身不动 其下方元素上移

margin-right 自身不动 其右方元素左移

BFC 理解与应用

Block Format Context 块级格式上下文

一块独立渲染区域，内部元素渲染不影响外界元素

常见形成条件

float 非 none

overflow 非 visible

position: absolute / fixed;

display: flex / inline-block;

常见应用 清除浮动 overflow: hidden;

float 布局(圣杯/双飞翼)

手写clearfix

.clearfix:after{

    content:’’;

    display: table;

    clear: both;

}

.clearfix{

    *zoom:1;

}

flex 画 3点色子

flex-direction 主轴方向

flex-wrap 主轴换行

justify-content 主轴对齐方式

align-items 交叉轴 容器控制

align-self 交叉轴 容器子项控制

2 定位

2.1 absolute / relative 根据什么定位？

relative 根据自身定位

absolute 根据向上找到的最近的定位元素来定位，无则根据body定位

2.2 居中对齐实现方式 重点

水平居中

inline元素: text-align:center;

block元素: margin: auto;

absolute元素: left:50%; transfom: trasnlateX(-50%);

垂直居中

inline元素: line-height = height;

absolute元素: top:50%; transfom: trasnlateY(-50%);

水平垂直居中

absolute元素: left:50%;right50%;transform:translate(-50%,-50%) 

absolute元素: top/left/bottom/right:0; margin:auto; 

3 图文样式

3.1 line-height 继承问题

数值30px，继承该值

比例1.5，继承该比例

百分比200% ，先计算再继承

4 响应式

4.1 rem 是什么？

px 绝对长度单位

em 相对长度单位 相对父元素

rem 相对长度单位 相对根元素html

4.2 如何实现响应式？

media-query 根据不同的屏幕宽度设置 根元素html的font-size

使用rem

4.3 相对单位 vw vh

rem的弊端

不同屏幕尺寸 媒体查询 阶梯性计算

屏幕高度：window.screen.height

网页视口高度：window.innerHeight

body内容高度：document.body.clientHeight

vw vh 针对

vh 网页视口高度 1% window.innerHeight

vw 网页视口宽度 1% window.innerWeight

vmax / vmin 为 vh 和vm二者的最大/最小值