这是我参与「第五届青训营 」伴学笔记创作活动的第2天
本文介绍CSS的基础知识以及常见的CSS面试题
CSS布局
盒模型宽度计算
offsetWidth（盒模型宽度） =（内容width+padding+border），无外边距
将offsetWidth控制为width的方法：box-sizing：border-box
margin纵向重叠问题
答案：15px，相邻元素的 margin-top 和 margin-bottom 会发生重叠，空白内容的
<p></p>也会重叠
margin 负值问题
- margin-top和margin-left负值，元素向上、向左移动 （相当于相邻元素的宽度在外界看来在减小）
- margin-right负值，右侧元素左移 （相当于自身的宽度在外界看来在减小）
- margin-bottom负值，下方元素上移
BFC 理解与应用
- Block Format Context (块级排版上下文) ，是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
- 即内部元素无论尺寸、定位如何变化，都不会影响外部元素的定位和尺寸
- 形成BFC的常见条件
- float不是none
- display是flex、inline-block等
- position是absolute或fixed
- overflow不是visible（如hidden）
常见应用：清除浮动
.clearfix:after{
content:'';
display: table;
clear: both;
}
IFC: 只包含行级盒子的容器会创建一个行级排版上下文IFC
布局方案
flex布局
display: flex
常用一维布局方案
常用语法
- flex-direction：主轴方向（默认x轴）
- flex-wrap：是否换行
- justify-content：主轴对齐方式
- align-items：交叉轴对齐方式
- align-self：子元素在交叉轴的对齐方式
- flex-grow
- 面试题：用flex布局画骰子
grid布局
display: grid
常用二维布局方案
常用语法
- grid-template-columns：每列占比
- grid-template-rows：每行占比
- grid-row-start/end：从第几行开始/结束
- grid-column-start/end：从第几列开始/结束
- grid-area：为元素划定区域
- 4个值分别为：行始/列始/行终/列终
CSS定位
- relative 依据自身定位
- absolute依据最近一层的定位元素定位
- 定位元素有 relative absolute fixed，若都没有就根据根元素定位
- 只有非默认定位才有top、left这些属性
居中对齐的实现方式
水平居中
- inline 元素：text-align:center
- block元素：margin:auto
- absolute 元素：left:50% + margin-left负值
垂直居中
- inline 元素：line-height的值等于height值
- absolute 元素：transform:translate(-50%, -50%)
- absolute 元素：top:50%+margin-top负值
通用方案：使用absolute定位，并将top，left，bottom，right=0，margin:auto
响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
使用rem+media-query： rem，font-size of the root element，基于根元素（HTML）的字体大小的单位
- 值为0-1 rem
- 根据不同的屏幕宽度设置根元素font-size和rem
- 缺点： 有阶梯性，要为每一个范围都设置不同的font-size
使用vw/vh: 网页视口大小的百分比
- 视口高度（window.innerHeight）：去掉浏览器顶部和底部后，实际显示的高度
- 值为0-100 vw/vh
- vmax/vmin：vh/vw中的最大最小值
