css布局

时间：2023-08-10 01:57:01 | 来源：网站运营

时间：2023-08-10 01:57:01 来源：网站运营

css布局：

布局就是把页面分成一块一块,按左中右，上中下等排列

布局一般分为3类

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

例如淘宝

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

一般在手机上用

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

3’响应式布局

PC上固定宽度，手机上不固定宽度

也就是一种混合布局

布局的两种思路

1’从大到小(老手) 先定下大局，然后完善每个部分的小布局

2‘从小到大(新手) 先完成小布局，然后组合成大布局

css布局

css布局(div+css布局)
用章节标签代替div(header main section aside footer)

3种css布局技术

1.float布局

需要兼容IE9及以下(需要PC网页)，必要时采用负margin(常用技巧)

用在IE布局,老浏览器用float

2.flex布局(核心)

不需要兼容IE(不需要PC网页)，只做手机H5页面,要兼容旧手机浏览器。必要时采用负margin(常用技巧)

只要不需要兼容IE,就可以在所有地方用,新浏览器用flex。

3.grid布局

不需要兼容IE(不需要PC网页)，只做手机H5页面,只兼容最新浏览器。

Grid布局功能最强大，尤其适合“不规则布局”。

float布局

其它
1.调试 outline:1px solid red;
2.取消默认样式 *{margin:0; padding:0; box-sizing:border-box;}

float布局两步走

第1步 在子元素上加float:left 和 width

第2步 在父元素上加.clearfix。clearfix内容如下

.clearfix:after{ content:''; display:block; clear:both;}想用float布局做个导航栏但hearder高度为0怎么办？

答：用.clearfix。一个块级元素的高度是由它内部文档流元素的总和决定的，header高度是由内部的文档流元素div nav决定的。float可以让元素脱离文档流。header里没有文档流元素，那么header高度就为0

老手的经验：

1.最后一个不设width(会自适应)，可以加个max-width:100px;

2.如果用了float布局，就不需要再想响应式了。

因为手机上不用IE，float布局是专门为IE准备的，所以不需要做响应式。

3.IE6/7存在双倍margin bug

在float元素的左边加上margin-left:10px;放在IE6/7上就会变成20px

怎么解决？

1’根据bug修改margin,专门再为IE写一个_margin-left:5px;

正常浏览器识别第1个，IE6/7识别第2个。

2’加一个display:inline-block;

如下图所示：

IE6/7已经过时了，现在都IE11了，这些知道就好，工作中很少会遇到。

float 实践

顶部条 两栏布局
内容区 三栏布局
导航 四栏布局
产品展示区 平均布局

一.导航 四栏布局

1.ul,ol{list-style:none;}

2.padding:4px 0.5em;

上下高度要确定，左右是当前字体的0.3

3.display:inline-block; //尽量把自己压窄

二.顶部条 两栏布局

1.max-width:100%; 图片最大不能超过一行

2.消除img下多余的背景色vertical-align:top/middle;

3.两边对齐float:left

4.两个居中对其

量一下，加个margin-top

1'img和nav高度不一致怎么对齐？(26,32)

(26+32)/2=29

26-29=-3

margin-top:3px;




2'如果img nav两个中有一个是奇数(26,31)，那就调成偶数好算

把nav调成偶数,调整文字高度line-height:32px;

这时候要再看下高度是多少(26,42)

(26+42)/2=34

26-34=-8

margin-top:8px;

三.内容区 三栏布局

其它
1.header{}
ul,ol{}
ul > li{}
.content > main{}
.content > .ad{}
2.布局时第2个调试的方法outline:1px solid red;
border会干扰你的宽度，占2像素。把border改为outline。
3.如果是块级元素并且宽度固定，要想居中
margin-left:auto;
margin-right:auto;
不要用margin:0 auto;

四.产品展示区 平均布局

例一.假设要放4张图片,公式4x+3y=800,算出xy值

x=191 y=12

由于最后一个还有一个margin-right:12 结果导致空间不够自动折行，怎么办？

思路：借助div增加负margin(常用技巧)

做法：在image外再加个div把image包起来，然后设置该div的margin-right:-12px; 值就是每个y的值,这里是12

老司机经验
1.加上头尾，即可满足所有PC页面需求
2.手机页面傻子才用float
3.float要程序员自己计算宽度，不灵活
4.float用来应付IE足矣

Flex布局

容器container & 子元素items

其它

1.教程(来自CSS Tricks)

2.不需要兼容IE(不需要PC网页)，只做手机H5页面,要兼容旧手机浏览器。必要时采用负margin(常用技巧)

3.不固定高度要居中(logo和nav高度不固定)，用flex布局可以完美解决，float无法解决

4.Flex青蛙游戏

5.选择器

(1)不能有多余的空格.item:first-child{}

错误代码.item : first-child{}

(2)选择

第1个child,first-child,第n个child,nth-child(n),最后一个child,last-child

代码.item:first-child {}.item:nth-child(n) {}.item:last-child {}

一.flex container的属性和样式

1.让一个元素变成flex容器

.container{ display:flex|inline-flex;}2.flex中的流动方向是由container自己控制的(不同于float)

改变items流动方向(主轴)

.container{ flex-direction:row横,默认|row-reverse|column|column-reverse}3.flex弹性盒，控制是否换行flex-wrap

空间不够时会自动压缩自己，不会折行(不同于文档流空间不够会自动折行)

.container{flex-wrap:wrap|nowrap默认,不折行}4.主轴和次轴的对齐方式

(1)主轴(左右)的对齐方式 (重要)

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

.container{ justify-content:center居中|space-between;2栏布局 }(2)次轴上下的对齐方式

默认次轴是纵轴 上下,

.container{ align-items:stretch|center|flex-start|flex-end;}5.多行内容的分布(很少用)

align-content:flex-start|flex-end|center|stretch|..

二.flex item的属性和样式

1.item上加order改变显示顺序

.item:first-child { order: 5;//改为几就会在第几个位置上出现}order默认0，取值范围包括负数/0/正整数

2.item上加flex-grow,用来分配多余的空间，默认值0

代码1 平均分配

.item {flex-grow: 1;}代码2 按比例分配

.item:first-child { flex-grow: 1;}.item:nth-child(2) { flex-grow: 2;}.item:nth-child(3) { flex-grow: 1;导航分配技巧

3.item上加flex-shrink:0不压缩，默认1

原始宽度不够时压缩(空间不够变小时)，如何分配压缩,让谁缩小

4.flex-basis控制基准宽度 默认auto，可用width代替(不重要)

缩写flex:flex-grow flex-shrink flex-basis

如果写shrink必须加宽度。(要么写1个要么写3个)

5.让某一个item特例独行,align-self:flex-end(很少用)

重点总结

1.display:flex;

2.flex-direction:row/column;

3.flex-wrap:wrap;

4.主轴(左右)的对齐方式justify-content:center/space-between2栏布局

5.align-items:center 纵轴(上下)居中

flex实践

用flex做两栏布局
用flex做三栏布局
用flex做四栏布局
用flex做平均布局
用flex组合使用，做更复杂的布局

老手的经验

1.css最忌讳把宽高写死，永远不要把width和height写死，除非特殊说明

尽量用min-width/max-width/min-height/max-height

2.什么叫写死

写死 width:100px;不写死 width:50%; max-width:100px; width;30vw; //vw意思是屏幕宽度的1%，这里指屏幕宽度的30% min-width:80%;特点：不使用px或者 加min max前缀

电脑上width一般都写死的，一般800px，手机不写死

3.flex可以基本满足所有需求,不管是手机还是PC

4.flex 和 margin-xxx:auto 配合有意外的效果

例子：实现左右布局

父元素加justify-content:space-between;

或者在ul里加margin-left:auto;(更推荐这种)

flex实践

一.用flex做 顶部条 两栏布局

1.横向布局display:flex;

只要在父元素上加display:flex;就能让子元素变成一行

2.左右布局

父元素里加justify-content:space-between;

或者在后面的元素ul里加margin-left:auto;(推荐这种方法!)

3.line-height与height的区别

用于设置多行元素的空间量，如多行文本的间距,ul>li。




二.用flex做 内容区 三栏布局

1.自己填充flex-grow:1;

用于设置main的width，让它自己填充，不写死

.content{min-width:800px}.content>aside{flex-grow:1;}2.margin-left:auto;

margin-right:auto;

代替margin:0 auto;

三.用flex做产品展示区 平均布局

.x { display: flex; flex-wrap: wrap; /*换行*/ margin-right: -12px;}

Grid布局

Grid布局功能最强大，尤其适合“不规则布局”。

一维布局用Flex(必须选择横着/竖着排列),二维布局用Grid(不需要选择两个方向都支持)

其它

1.a,.b,.d,.e {outline: 1px solid black;}

中间可以加空格

.container > * { outline: 1px solid red;}

container里的所有元素

2.如何在两套布局中切换？(PC用float布局,手机用flex布局)

一个css文件写两种布局,然后用@media媒体查询做判断切换。

3.min-height: 100vh;最小高度占满屏幕的100%

4.rows行 次轴 垂直方向,columns 列 主轴 水平方向

5.小游戏 Grid Garden

一.Grid跟flex差不多，也分container和items

1.让一个元素变成Grid容器

.container{ display:grid|inline-grid;}


2.设置行和列(虚拟的，线不存在，只是设置了范围)

column主轴左右 row次轴上下

.container{ grid-template-columns:40px 50px auto 50px 40px; 3行5列 grid-template-rows:25% 100px auto;}(2)给每条线取名字(太复杂一般不取，用默认的)

Grid优点给每根线都取了个名字,默认是从1到4(grid-template-columns)，也可自定义

.container{ grid-template-columns:[first]40px [line2]50px [line3]auto [col4-start]50px [five]40px [end]; grid-template-rows:[row1-start]25% [row1-end]100px [third-line]auto [last-line];}(3)item设置范围

grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 6;(4)还可以使用fr(fr主要用于平均布局)

.container{ grid-template-columns:1fr 1fr 1fr 1fr; 2行4列 grid-template-rows:1fr 1fr;}(5)空隙gap

1.设置总空隙 gap:12px;2.左右 column-gap:10px;3.上下 row-gap:10px;3.grid-template-areas

第1步，加grid-template-areas:" ";

第2步，把html放到表格里grid-area: ;

4.预留一个空位置

一般用.表示这里为空(很少用)

Grid实践

1.grid repeat缩写方式

grid-template-rows:240px 120px 120px 120px 120px; 缩写grid-template-rows:240 repeat(4,120px);2.尽力往里缩

display:inline-grid; 因为内联元素会尽力往里缩,去掉额外的空间

3.rows行 次轴 垂直方向,columns 列 主轴 水平方向

常用Grid布局

grid-template-areas

第1步加grid-template-areas:" ";

第2步把html放到表格里grid-area: ;