这是我参与「第五届青训营 」笔记创作活动的第13天。
三栏布局的实现方案
三栏布局是指左右两边盒子宽度固定，中间盒子自适应，盒子的高度由盒子的内容撑开，一般来说，中间盒子的内容最多，为了使页面渲染快，在写结构时，会把中间盒子写在左右盒子的前面。
圣杯布局： 父级盒子设置左右的padding值，分别是左右盒子的宽度，中间盒子设置左浮动，宽度是100%，左盒子设置左浮动，设置宽度，设置margin-left值为-100%，设置绝对定位，left值为-它的宽度，右盒子设置左浮动，设置宽度，设置marign-left值为-它的宽度，设置绝对定位，right值为-它的宽度 它不需要多添加一个dom节点，但特殊情况下会变形。
双飞翼布局： 需要在main盒子外再添加一个contain节点，设置main的左右margin值，分别为左右盒子的宽度，设置contain节点的宽度为100%，设置左浮动，设置左盒子的宽度，设置左浮动，marigin-left为-100%，设置右盒子的宽度，设置左浮动，margin-left为-它的宽度
css命名冲突问题解决
- 人为约定，可以在开发之前约定好css的命名规则以避免冲突
- CSS in JS，将应用的CSS样式写在JavaScript文件里面，因为没有类名所以不可能发生冲突
- css Modules，构造工具可以将css样式剪切成精细的模块，可以保证单个css样式文件中的命名不会发生冲突，冲突可能发生在不同的样式文件中，只要保证构造工具在合并代码时不会出现命名冲突就可以了
在webpack中，处理css的是css-loader，启用css module，需要将css-loader的配置modules设置为true，启用后，css-loader会将样式中的类名进行转换，转换为一个唯一的hash值。 由于hash值是根据模块路径和类名生成的，不同的模块即使类名一样hash值也不一样。
- HTML5的style scoped 范围央视 这会限制样式只影响style标签的父元素和它所有的后代元素。
两栏布局
- float + margin-left
- float + ovefloew: hidden
- position + left
- flex布局 + 子元素设置flex-grow
