13. CSS布局（上）

CSS

13. CSS布局（上）

布局是什么

把页面分成一块一块，按左中右，上中下等排列

布局分类

两种

固定宽度布局，一般宽度为960/1000/1024px（都是8的倍数）

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

还记得吗

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

第三种布局

响应式布局

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

也就是一种混合布局

布局的两种思路

从大到小

先定下大局

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

从小到大

先完成小布局

然后组合成大布局

两种均可

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

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

布局需要用到哪些属性？

不多逼逼，直接给你所有套路

Screen Shot 2021-12-11 at 11.58.31 PM

Float布局

步骤

子元素上加float:left和width

在父元素上加.clearfix（忘了加被方方看到你就完了）

为什么要加.clearfix?看第二张不加的图，加了之后header可以把div和nav都包裹住。

Screen Shot 2021-12-12 at 1.34.13 AM

Screen Shot 2021-12-12 at 1.35.05 AM

如果想让div和nav之间有点空隙

把float:left改成float:right

Screen Shot 2021-12-12 at 1.39.29 AM

如何让两个标题居中对齐？

Screen Shot 2021-12-12 at 1.41.14 AM

经验

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

下图.user就没有设置width，设置max-width文字会跑出来

Screen Shot 2021-12-12 at 11.38.22 AM

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

下面的css在IE6/7浏览器会自动把margin双倍显示

margin-left:10px;

IE6/7存在双倍margin bug，解决方法有两个

一是将错就错，针对IE6/7把margin减半

_margin-left:5px;/*其他的浏览器看不到这句话*/

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

display:inline-block;

不要问为什么

面试官问：你会不会兼容IE，举个例子

答：会。我们用float布局的时候，如果写了一个margin-left，IE6/7会变成双倍，有两种方法可以解决，一种是将复制减半，或者使用display:inline-block即可。

代码链接：https://jsbin.com/kexuzar/edit?html,css,output

实践

不同布局

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

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

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

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

曾经淘宝的前端发明了双飞翼布局，不要学，已过时

经验

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

手机页面傻子采用float

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

float用来应付IE足以

问：老师你说float适合ie，但是你刚刚是chrome啊，是我理解不对吗

回答

问：如果logo和nav的高度不固定，还能用margin-top:5px吗

回答

问：父div宽度800，四个子元素宽度分别191，不是还有border 1px吗，所以四个加起来的宽度就不止764了吧

Flex布局上

教程（来自CSS Tricks）

把教程过一遍，然后忘掉

完成Flex青蛙游戏

开始用flex！

缩写用约定俗成的，未经约定俗成的不要用，比如将container缩写成cnt

容器containter

container用做父元素

Screen Shot 2021-12-12 at 12.24.44 AM

Screen Shot 2021-12-12 at 12.24.50 AM

flex container有哪些样式？

以下内容都是container的样式

让一个元素变成flex容器

.container{
	display:flex;/*or inline-flex */
}

.item*3//三个div,class是item
d:f //display:flex 会另外起一行
d:if//display:inline-flex不会另外起一行

改变items流动方向（主轴）

默认flex-direction:row

弹性流，即一字排开

控制什么方向，主轴就是什么方向

Screen Shot 2021-12-12 at 12.25.40 AM

.container{
 flex-direction:row|row-reverse|column|column-reverse;
}

Screen Shot 2021-12-14 at 9.12.12 AM

Screen Shot 2021-12-14 at 9.12.32 AM

Screen Shot 2021-12-14 at 9.15.19 AM

Screen Shot 2021-12-14 at 9.15.42 AM

改变折行

flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。初始值是nowrap

Screen Shot 2021-12-12 at 12.28.09 AM

.container{
 flex-wrap:nowrap|wrap|wrap-reverse;
}

如果本来item设置了宽度，一旦多了会被挤压,比如下图

Screen Shot 2021-12-14 at 9.20.40 AM

如果还是想维持原来的width，也不想被挤压，就通过

flex-wrap:wrap,如下图

Screen Shot 2021-12-14 at 9.21.31 AM

flex-wrap:wrap-reverse

Screen Shot 2021-12-14 at 9.26.24 AM

主轴对齐方式

默认主轴是横轴，除非你改变了flex-direction方向

默认是justify-content:flex-start

Screen Shot 2021-12-12 at 12.29.57 AM

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

默认靠左

Screen Shot 2021-12-14 at 9.40.47 AM

靠右

Screen Shot 2021-12-14 at 9.39.59 AM

居中

Screen Shot 2021-12-14 at 9.41.46 AM

不居中，不靠右也不靠左，把space空间放到间隙中

Screen Shot 2021-12-14 at 9.43.02 AM

把空间放到周围，space-around

Screen Shot 2021-12-14 at 9.44.43 AM

Screen Shot 2021-12-14 at 9.46.00 AM

Screen Shot 2021-12-14 at 9.47.00 AM

次轴对齐

默认次轴是纵轴，当高度不一样时，需要做次轴对齐,

align-items:flex-start是默认值，向上对齐

Screen Shot 2021-12-12 at 12.32.02 AM

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

align-items:flex-start

Screen Shot 2021-12-14 at 9.52.53 AM

align-items:center

Screen Shot 2021-12-14 at 9.53.12 AM

align-items:flex-end

Screen Shot 2021-12-14 at 9.53.33 AM

align-items:stretch就是默认一样高，stretch就是衍生

Screen Shot 2021-12-14 at 10.08.18 AM

baseline比较少用

Screen Shot 2021-12-14 at 10.10.21 AM

多行内容

Screen Shot 2021-12-12 at 12.34.14 AM

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

如果container的高度是400px，默认里面的每一行的高度就是平均分，默认是stretch

Screen Shot 2021-12-14 at 10.21.13 AM

align-content:flex-start把多余的行高全部放下面

Screen Shot 2021-12-14 at 10.22.42 AM

align-content:flex-end把多余的行高放上面

Screen Shot 2021-12-14 at 10.24.04 AM

align-content:center把多余的行高放两遍

Screen Shot 2021-12-14 at 10.25.20 AM

align-content:stretch

Screen Shot 2021-12-14 at 10.28.20 AM

align-content:space-between

Screen Shot 2021-12-14 at 10.28.36 AM

align-content:space-around这个属性基本不用

Screen Shot 2021-12-14 at 10.28.50 AM

item上面加order

数字越大越往后排，数字越小越靠前，数字为负也是靠前

Screen Shot 2021-12-12 at 12.35.37 AM

Screen Shot 2021-12-19 at 4.33.21 AM

item上面加flex-grow

控制自己如何长胖

Screen Shot 2021-12-12 at 12.36.24 AM

.item {
  flex-grow: 4; /* default 0 */
}

Screen Shot 2021-12-19 at 4.38.11 AM

flex-shrink控制如何变瘦

一般写flex-shrink:0防止变瘦，默认是1

如果使用flex-shrink的话，需要设置宽度，以及nowrap，这样能明显看到变化

.item {
  flex-shrink: 3; /* default 1 */
}

Screen Shot 2021-12-19 at 4.42.37 AM

flex-basis控制基准宽度

默认是auto

就是宽度的意思，用的不多

flex:flex-grow flex-shrink flex-basis

缩写，空格隔开

.item:first-child{
  flex:1 1 30px;
  
}
.item:nth-child(2){
 flex:1 1 30px
 
}
.item:nth-child(3){
  flex:1 1 34px
}

align-self定制align-items

用来调整单个的item

Screen Shot 2021-12-12 at 12.40.51 AM

Screen Shot 2021-12-19 at 4.53.46 AM

flex所有属性讲完

忘掉它，开始干

重点

记住这些代码

display:flex
flex-direction:row/column
flex-wrap:wrap
just-content:center/space-between
align-items:center

工作中基本只用这些

Flex小游戏

https://flexboxfroggy.com/#zh-cn

前端的底线

上课的示例代码

codesandbox

草图软件推荐

Balsamiq

Screen Shot 2021-12-19 at 5.04.22 AM

Figma

墨刀

Adobe XD

特点

直接干，不用学

如何在两套布局中切换

后面的课程单独讲，主要使用@media媒体查询

实践

不同布局

用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前缀