css布局

什么是布局？

布局分类

• 固定宽度布局，一般宽度为960/1000/1024px

• 不固定宽度布局，主要靠文档流的原理来布局

• 文档流本来就是自适应的，不需要加额外的样式

• 响应式布局

• 意思是PC上固定宽度，手机上不固定宽度

• 也就是一种混合布局

布局的两种思路

• 先定下大局

• 然后完善每个部分的小布局

• 先完成小布局

• 然后组合成大布局

• *两种均可使用

• 新人推荐用第二种，因为小的简单

• 老手一般用第一种，因为熟练有大局观

用什么 CSS 布局？

• 如果需要兼容 IE 9 ，使用 float 布局 ，左浮两个，固定宽度，不要响应式，给父元素添加 clearfix ！！！，必要时候采用 负 margin

• 如果需要兼容最新的浏览器，用 grid 布局

• 如果不需要兼容最新版的，用 flex 布局 ，必要时采用 负margin

float 布局

• 子元素上加上 float:left 和 width

• 在父元素上加 .clearfix

• 有经验者会留一些空间或者最后一个不设width

• 不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的

• IE 6/7 存在双倍 margin bug, 解决办法有两个

• 一是将错就错，针对 IE 6/7 把 margin减半 ，在属性前面加上下划线

• 二是神来一笔，再加一个 display： inline-block

float布局实践

• 用float做两栏布局（如顶部条）

• 用float做三栏布局（如内容区）

• 用float做四栏布局（如导航栏）

• 用float做平均布局（如产品展示区）

• 加上头尾，即可满足所有PC页面需求

• 手机页面傻子才用float

• float要程序员自己计算宽度，不灵活

• float用来应付IE足以

flex布局

容器 container

• 让一个元素变成flex容器

• 改变item的流动方向(主轴)

• 改变折行

• 主轴的对齐方式

• 次轴对齐

• 多行内容如何分布

• item 上面加order ,用order改变item的显示顺序

• item 上面加flex-grow , 用来分配多余的空间给item

• flex-shrink 用来控制如何变瘦，一般写flex-shrink: 0防止变瘦，默认是1

• flex-basis 控制基准宽度 ,认是auto

• flex: flex-grow flex-shrink flex-basis 可以缩写，空格隔开

• align-self 定制 align-items

• display: flex

• flex-direction: row/column

• flex-wrap: wrap

• justify-content: center /space-between

• align-items: center

flex布局实践

• 用flex做两栏布局（如顶部条）

• 用flex做三栏布局（如内容区）

• 用flex做四栏布局（如导航栏）

• 用flex做平均布局（如产品展示区）

• 用flex组合使用，做更复杂的布局

• 永远不要把width和height写死，除非特殊说明

• 用min-width / max-width / min-height / max-height

• flex可以基本满足所有的需求

• flex和margin-xxx：auto 配合有意外的效果

• width:100px

• width: 50%

• max-width: 100px

• width: 30vw

• min-width:80%

• 特点：不使用px , 或者加min max 前缀

• 没有图不要写代码，必须先给设计稿

• 没有设计稿就自己画 ，老板同意在写代码

• 设计师只给一稿，让你做两套怎么办？没设计稿，不做

• 自己当设计师，设计稿不被老板肯定，就不要写代码.

常用的草图软件

• Bslsamiq

• Figma

• 墨刀

• Adobe XD

• 直接干，不用学

Grid布局

功能最强大的布局方案，二维布局用Grid ,一维布局用Flex

• 让一个元素成为container

• 设置行和列

• 你可以给每条线取名字

• item可以设置范围

• fr - free space 巧记： 份

• 分区grid-template-areas

• 空隙 gap

Grid布局实践

• Grid尤其适合不规则布局

• 等到Grid普及了，前端对CSS的要求会进一步降低