CSS

背景 如果要实现下面的布局效果 使用flexbox 把1，2合并成左边一个新，再和3 做flex的column布局。 1，2在新的盒子4里也做flex 设置row布局 我用flexbox写一下代码 缺

介绍4.6 bootstrap 是一套强大的css库，自带响应式栅格系统，组件库，内容样式标签。以下以4.6为例 优点 开发范式的改变，不在自己定义class名称，都用他定义好的css来构建。 栅格系

1.meta标签viewport 2.Media 媒体查询 all（全部）、screen（屏幕）和 print（页面打印或打印预览模式） 使用方式 link标签 link标签引入媒体类型其实就是在li

概念 1.pt 物理像素 Point 显示器上物理能显示最小的点， 物理像素 2.dp 设备独立像素 就是显示器最终显示的内容像素单位 3.设备像素比（device pixel radio） dpr

概念 容器： 指父容器 项目： 指容器里的子元素 主轴： 指弹性布局的多个项目排列方向上的一根轴，如果 按x轴排列，那么x轴就是主轴 交叉轴：指与主轴交叉的一根轴称为交叉轴 容器属性 dispaly

1.概念 1. 块级元素 block 定义 特点 独占一行 可以设置宽高，宽度默认100% 从上到下垂直排版 常用标签 2.行内元素inline 定义 常用标签 特点 从左到右排版，依次紧挨，放不下换

栗子 1. margin-top： -xx 元素整体自身向上移动，下方元素跟随上移。 2. margin-bottom： -xx 元素不移动，只是改变自身的高度 3. margin-left： -xx

1.组成部分 盒子 = content（内容） + padding（填充） + border（边框） + margin（边距） 1.标准模式 元素的width * height = content 2

普通布局流方案 1.普通流 (normal flow) 元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除

传统流布局 标准流 浮动流 定位流 1. 标准流 也叫 正常流，文档流。 包含两种元素，块元素和行内元素。块元素依次从上到下，行内元素从左到右依次排列。 块级元素 h1,p,ul,ol div, ta

1.理论 包含 上中下三部分，中间包含左边导航+右边内容 2.实现 已知 实现上下固定，中间内容左右布局,同时自适应高度 2.1 flexbox 2.2 grid

1.原理 内容少的时候，footer置底固定 内容多的时候，footer自动被撑开 2.实现 已知 实现 底部footer 粘性布局效果。 2.1 calc(100vh - 200px) 使用vh获取

已知 需要调整成 1.flex布局 + flex:1 2.浮动：float: left + margin-left left元素浮动，右边元素则margin设置边距margin-left:200px即

已知 实现垂直居中对齐 1.行高内元素居中，line-height + 内元素inline-block + vertical-algin:middle 父容器使用line-height，对应的行内元素

已知 要求黑色正方形 居中显示 1.文本对齐text-align:center + inline-block 外部使用text-align:center 让行内元素居中，子元素设置为行内属性inlin

已知 实现 左右left和right固定，中间自适应。 1.使用flexbox 2.绝对布局absolute + margin-left + margin-right 3. 绝对布局absolute

已知 请写出样式 outer和inner的实现。 1行内布局 + 百分比宽度 使用行内布局 + 内部box为百分比宽度33.33%。 结果出现空白间隔，导致第三个box下移了。 原因 html的每个子