CSS布局
布局是什么
- 把页面分成一块一块，按左中右、上中下等排列
布局分类
两种
- 固定宽度布局，一般宽度为960/1000/1024 px
- 不固定宽度布局，主要靠文档流的原理来布局
还记得吗
- 文档流本来就是自适应的（响应式的），不需要加额外的样式
第三种布局
- 响应式布局（旧内容新名字）
- 意思就是PC上固定宽度，手机上不固定宽度
- 也就是一种混合布局
布局的两种思路
从大到小
- 先定下大局
- 然后完善每个部分的小布局
从小到大
- 先完成小布局
- 然后组合成大布局
两种均可
- 新人推荐用第二种，因为小的简单
- 老手一般用第一种，因为有大局观
布局需要用到什么属性？
- DIV+CSS布局（过时说法）
- CSS布局 √｛main，header，fotter等等｝
- 一图流
float 布局 快要过时了
步骤
- 子元素上加上float:left和width
- 在父元素上加.clearfix(忘了加被老师看到我就完了)
经验
- 有经验者会留一些空间或者最后一个不设width
- 不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的
- IE 6/7 存在双别 margin bug，解决办法有两个
- 一是将错就错，针对 IE 6/7把margin减半，减半操作：_margin-left:xxxpx;
- 二是神来一笔，加一个display:inline-block
- 为什么可以这样？没有为什么
实践
- 看我单独写的笔记《float布局实践》
不同布局
-
用float做两栏布局（如顶部条）
-
用float做三栏布局（如内容区）
-
用float做四栏布局（如导航）
-
用float做平均布局（如产品展示区）
-
曾经淘宝的前端发明了双飞翼布局，不要学，已过时
-
border干扰的话用outline
经验
- 加上头尾，即可满足所有PC页面需求
- 手机页面啥子采用float
- float要程序员自己计算宽度，不灵活
- float用来应付IE足矣
flex 布局
容器 container
flex container 有哪些样式
- 让一个元素变成flex容器
.container{
display:flex;/*or inline-flex*/
}
- 改变items流动方向（主轴）
.container{
flex-direction: row | row-reverse | column | column-reverse;
}
- 改变折行
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- 主轴对齐方式
默认主轴是横轴，除非你改变了flex-direction方向
.container{
justify-content: flex-start | flex-end|
}
- 次轴对齐 默认次轴是纵轴
.container{
align-items: stretch | felx-start |
}
- 多行内容
如何分布
.container{
align-content: flex-start | flex-end|
} /*很少用到*/
flex item 有哪些样式
- item 上面加roder
.item{
order: 数字
}
- item上面加flex-grow
控制自己如何长胖
.item{
}
- flex-shrink控制如何变瘦
一般写flex-shrink:0防止变瘦，默认是1
- flex-basis控制基准宽度
默认是auto
- flex:flex-grow flex-shrink flew-basis
缩写，空格隔开
- align-self 定制 align-items
重点
-
记住这些代码
-
display: flex
-
flex-direction: row | column
-
flex-wrap: wrap
-
just-content: center | space-between
-
align-items: center
-
工作中基本只用到这些
-
实践
不同布局
- 用flex做两栏布局
- 用flex 做三栏布局
- 用flex 做四栏布局
- 用flex 做平均布局
- 用flex组合使用，做更复杂的布局
- 代码
经验
- 永远不要把width和height写死，除非特殊说明
- 用min-width / max-width / min-height / max-height
- flew可以基本满足所有需求
- flex和margin-XXX:auto 配合有意外的效果
什么叫写死
写死
- width:100px
不写死
- width:50%
- max-width:100px
- width:30vw vw是屏幕宽度百分之一
- min-width:80%
- 特点:不适用px，或者加 min max前缀
老板要我同时兼容IE和手机怎么办
- 前端戒律： 必须先给设计稿
- 没有设计稿就自己画（用笔纸），老板同意再写代码
设计师只给一稿，让你做两套怎么办
-
没设计稿，我做个P，怼回去 或者 甩锅。
-
两套界面必须要两套设计稿，底线不能退让
公司里没有设计师怎么办
- 自己当设计师
- 设计稿不被老板肯定，就不要写代码，否则996就离你不远了
常用草图软件
跨平台
- Balsamiq
- Figma
- 墨刀
- Adobe XD
特点
- 直接干，不用学
Grid 布局
功能最强大的布局方案
- 二维布局用 Grid，一维布局用Flex
- Grid也分 container和items
待续，记得就补上，咕咕咕
