css 布局

基础知识点

HTML元素分类：display

块元素 block 可以设置宽高占一行（address、hr、p1）
行内元素 inline 不能设置宽高不占一行（span a br）
行内块元素 inline-block 可以设置宽高不占一行（button、canvas、svg、img）

浮动布局

脱离普通文档流，在父元素框架内，元素向左向右浮动

优点：

元素浮动后，约等于inline-block,但是它也可以指定方向，还有float没有inline-block的空白间隙问题

缺点：

脱离普通文档流，撑不起父元素，造成父元素高度塌陷

高度塌陷解决方案（清除浮动）

父元素添加overflow属性，或者设置高度

添加额外标签

<div class="parent">
    <div style="clear:both"></div>
</div>

利用after伪元素

.clear::before, .clear::after {
    content: '',
    display: block,
    clear: both
}

<div class="container clear">
  <div class="content">
     内容
  </div>
  <div class="aside">
     边栏
   </div>
</div>
<!-- <div class="clear"></div> -->
<div class="box"></div>

BFC防止高度塌陷

百分百布局

‘%’单位部分相对于父元素，其他相对于自身

height 相对于父元素的height
width border padding margin 相对于父元素的 width
border-radius translate background-size是相对于自身

缺点：

兼容问题：浏览器百分比支持情况不一样，有些浏览器不能很好的支持该布局
精度问题：不是固定的值，会造成布局偏差，尤其是容器尺寸发生变化
计算麻烦
父元素单位不唯一，百分比计算困难

Flex布局

传统的布局基于盒装模型，display+position+float

布局方式-弹性布局

Flex布局设置后，子元素float clear vertical-align属性都会失效

ie9不支持

webkit要加前缀

容器

flex-direction: 主轴的方向
flex-wrap:一条轴线排不下去换行
flex-flow: flex-direction flex-wrap的简写默认 row nowrap
justify-content:项目在主轴上的对齐方式
align-items: 项目在交叉轴上的对齐方式
align-content: 项目有多个轴线的对齐方式

justify-content: flex-start|flex-end|center|space-around|space-between;
flex-wrap:wrap|nowrap|wrap-reverse;
flex-flow: ;//flex-direction和flex-wrap简写 默认 row nowrap
align-items:flex-start|flex-end|center|baseline|stretch（默认值）;
align-content:;//同单行 多跟轴线对齐方式
flex-direction:row|row-reverse|column|column-reverse;

项目属性

order 项目的排列顺序，默认0
flex-shrink 项目的压缩比例默认0
flex-grow 项目的放大比例默认1
flex-basis 分配多余空间的时候，项目的主轴空间默认auto 项目本来大小
flex flex-grow flex-shrink flex-basis 简写默认0 1 auto
align-self 单个项目与其他项目的对齐方式可覆盖align-items的值默认auto(父元素的align-items属性)，stretch(无父元素默认值)

Rem布局

根据根（html）的font-size来计算

html: font-size:10px;1rem = 10px

优点：可以快速的适用移动端布局，字体高度等

缺点：

ie不支持，pc适用次数不多
数据量大，所有的盒子都需要给准确的值，来适配不同的机型
在响应式布局中，通过js来动态控制font-size的大小，js和css 代码有耦合，font-size的代码必须在css 之前

移动端适配

前情提要

移动端适配其实包含自适应、响应式
视口：理想视口就是布局视口==视觉视口
- 在移动端布局视口宽度在980px，为了适应手机端屏幕，会出现缩放现象
- <meta name="viewport" content ="width = device-width, initial-scale= 1.0">禁止缩放

移动端适配方案

百分比设置：参照物太多，难统一
rem单位+动态html的font-size（过渡方案--放弃适用）
- html的font-size确定计算
  - 媒体查询：不同尺寸范围内设置font-size（编写大量的媒体查询，还不会实时更新）
  - js动态获取设备宽度，给个基准值10或者其他（三方库lib-flexiable）
- rem单位转换
  - 直接计算: html {font-size: 37.5} 1rem = 37.5px
  - less/css计算
  - postcss-pxtocss 借助webpack配置 rootvalue
  - vscode插件
vw单位（推荐适用：得利于viewport单位的推广）
- 1vw 等于屏幕的1/100
  - 少了font-size计算，font-size不能随意更改，语义化，也可以具备之前rem的所有有点
- 换算方法与rem换算类似
flex布局
media媒体查询（在不同的设备上有不同的表现；针对不同的设备进行定制化的开发）

参考链接

移动端适配的理解和各种方案解析(详解)-CSDN博客

【建议收藏】45000+字前端面试题及答案汇总，前端八股文 - 知乎 (zhihu.com)

flex布局详解（带你玩转flex布局）-CSDN博客

CSS基础（四）——浮动布局-CSDN博客

flex布局详解（带你玩转flex布局）-CSDN博客

面试官：请说说flex布局_番茄出品.md_面试说一下弹性布局 flex-CSDN博客

字节面试题：flex用法，应用场景_51CTO博客_flex 布局面试题