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
待续,记得就补上,咕咕咕