css布局

時(shí)間：2023-08-10 01:57:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-10 01:57:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

css布局：

布局就是把頁(yè)面分成一塊一塊,按左中右，上中下等排列

布局一般分為3類(lèi)

1’固定寬度布局，一般寬度為960/1000/1024px

例如淘寶

2’不固定寬度布局，主要靠文檔流的原理來(lái)布局

一般在手機(jī)上用

補(bǔ)充：文檔流本來(lái)就是自適應(yīng)的，不需要加額外的樣式

3’響應(yīng)式布局

PC上固定寬度，手機(jī)上不固定寬度

也就是一種混合布局

布局的兩種思路

1’從大到小(老手) 先定下大局，然后完善每個(gè)部分的小布局

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

css布局

css布局(div+css布局)
用章節(jié)標(biāo)簽代替div(header main section aside footer)

3種css布局技術(shù)

1.float布局

需要兼容IE9及以下(需要PC網(wǎng)頁(yè))，必要時(shí)采用負(fù)margin(常用技巧)

用在IE布局,老瀏覽器用float

2.flex布局(核心)

不需要兼容IE(不需要PC網(wǎng)頁(yè))，只做手機(jī)H5頁(yè)面,要兼容舊手機(jī)瀏覽器。必要時(shí)采用負(fù)margin(常用技巧)

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

3.grid布局

不需要兼容IE(不需要PC網(wǎng)頁(yè))，只做手機(jī)H5頁(yè)面,只兼容最新瀏覽器。

Grid布局功能最強(qiáng)大，尤其適合“不規(guī)則布局”。

float布局

其它
1.調(diào)試 outline:1px solid red;
2.取消默認(rèn)樣式 *{margin:0; padding:0; box-sizing:border-box;}

float布局兩步走

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

第2步 在父元素上加.clearfix。clearfix內(nèi)容如下

.clearfix:after{ content:''; display:block; clear:both;}想用float布局做個(gè)導(dǎo)航欄但hearder高度為0怎么辦？

答：用.clearfix。一個(gè)塊級(jí)元素的高度是由它內(nèi)部文檔流元素的總和決定的，header高度是由內(nèi)部的文檔流元素div nav決定的。float可以讓元素脫離文檔流。header里沒(méi)有文檔流元素，那么header高度就為0

老手的經(jīng)驗(yàn)：

1.最后一個(gè)不設(shè)width(會(huì)自適應(yīng))，可以加個(gè)max-width:100px;

2.如果用了float布局，就不需要再想響應(yīng)式了。

因?yàn)槭謾C(jī)上不用IE，float布局是專(zhuān)門(mén)為IE準(zhǔn)備的，所以不需要做響應(yīng)式。

3.IE6/7存在雙倍margin bug

在float元素的左邊加上margin-left:10px;放在IE6/7上就會(huì)變成20px

怎么解決？

1’根據(jù)bug修改margin,專(zhuān)門(mén)再為IE寫(xiě)一個(gè)_margin-left:5px;

正常瀏覽器識(shí)別第1個(gè)，IE6/7識(shí)別第2個(gè)。

2’加一個(gè)display:inline-block;

如下圖所示：

IE6/7已經(jīng)過(guò)時(shí)了，現(xiàn)在都IE11了，這些知道就好，工作中很少會(huì)遇到。

float 實(shí)踐

頂部條 兩欄布局
內(nèi)容區(qū) 三欄布局
導(dǎo)航 四欄布局
產(chǎn)品展示區(qū) 平均布局

一.導(dǎo)航 四欄布局

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

2.padding:4px 0.5em;

上下高度要確定，左右是當(dāng)前字體的0.3

3.display:inline-block; //盡量把自己壓窄

二.頂部條 兩欄布局

1.max-width:100%; 圖片最大不能超過(guò)一行

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

3.兩邊對(duì)齊float:left

4.兩個(gè)居中對(duì)其

量一下，加個(gè)margin-top

1'img和nav高度不一致怎么對(duì)齊？(26,32)

(26+32)/2=29

26-29=-3

margin-top:3px;




2'如果img nav兩個(gè)中有一個(gè)是奇數(shù)(26,31)，那就調(diào)成偶數(shù)好算

把nav調(diào)成偶數(shù),調(diào)整文字高度line-height:32px;

這時(shí)候要再看下高度是多少(26,42)

(26+42)/2=34

26-34=-8

margin-top:8px;

三.內(nèi)容區(qū) 三欄布局

其它
1.header{}
ul,ol{}
ul > li{}
.content > main{}
.content > .ad{}
2.布局時(shí)第2個(gè)調(diào)試的方法outline:1px solid red;
border會(huì)干擾你的寬度，占2像素。把border改為outline。
3.如果是塊級(jí)元素并且寬度固定，要想居中
margin-left:auto;
margin-right:auto;
不要用margin:0 auto;

四.產(chǎn)品展示區(qū) 平均布局

例一.假設(shè)要放4張圖片,公式4x+3y=800,算出xy值

x=191 y=12

由于最后一個(gè)還有一個(gè)margin-right:12 結(jié)果導(dǎo)致空間不夠自動(dòng)折行，怎么辦？

思路：借助div增加負(fù)margin(常用技巧)

做法：在image外再加個(gè)div把image包起來(lái)，然后設(shè)置該div的margin-right:-12px; 值就是每個(gè)y的值,這里是12

老司機(jī)經(jīng)驗(yàn)
1.加上頭尾，即可滿(mǎn)足所有PC頁(yè)面需求
2.手機(jī)頁(yè)面傻子才用float
3.float要程序員自己計(jì)算寬度，不靈活
4.float用來(lái)應(yīng)付IE足矣

Flex布局

容器container & 子元素items

其它

1.教程(來(lái)自CSS Tricks)

2.不需要兼容IE(不需要PC網(wǎng)頁(yè))，只做手機(jī)H5頁(yè)面,要兼容舊手機(jī)瀏覽器。必要時(shí)采用負(fù)margin(常用技巧)

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

4.Flex青蛙游戲

5.選擇器

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

錯(cuò)誤代碼.item : first-child{}

(2)選擇

第1個(gè)child,first-child,第n個(gè)child,nth-child(n),最后一個(gè)child,last-child

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

一.flex container的屬性和樣式

1.讓一個(gè)元素變成flex容器

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

改變items流動(dòng)方向(主軸)

.container{ flex-direction:row橫,默認(rèn)|row-reverse|column|column-reverse}3.flex彈性盒，控制是否換行flex-wrap

空間不夠時(shí)會(huì)自動(dòng)壓縮自己，不會(huì)折行(不同于文檔流空間不夠會(huì)自動(dòng)折行)

.container{flex-wrap:wrap|nowrap默認(rèn),不折行}4.主軸和次軸的對(duì)齊方式

(1)主軸(左右)的對(duì)齊方式 (重要)

默認(rèn)主軸是橫軸 左右,除非你改變了flex-direction方向

.container{ justify-content:center居中|space-between;2欄布局 }(2)次軸上下的對(duì)齊方式

默認(rèn)次軸是縱軸 上下,

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

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

二.flex item的屬性和樣式

1.item上加order改變顯示順序

.item:first-child { order: 5;//改為幾就會(huì)在第幾個(gè)位置上出現(xiàn)}order默認(rèn)0，取值范圍包括負(fù)數(shù)/0/正整數(shù)

2.item上加flex-grow,用來(lái)分配多余的空間，默認(rèn)值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;導(dǎo)航分配技巧

3.item上加flex-shrink:0不壓縮，默認(rèn)1

原始寬度不夠時(shí)壓縮(空間不夠變小時(shí))，如何分配壓縮,讓誰(shuí)縮小

4.flex-basis控制基準(zhǔn)寬度 默認(rèn)auto，可用width代替(不重要)

縮寫(xiě)flex:flex-grow flex-shrink flex-basis

如果寫(xiě)shrink必須加寬度。(要么寫(xiě)1個(gè)要么寫(xiě)3個(gè))

5.讓某一個(gè)item特例獨(dú)行,align-self:flex-end(很少用)

重點(diǎn)總結(jié)

1.display:flex;

2.flex-direction:row/column;

3.flex-wrap:wrap;

4.主軸(左右)的對(duì)齊方式j(luò)ustify-content:center/space-between2欄布局

5.align-items:center 縱軸(上下)居中

flex實(shí)踐

用flex做兩欄布局
用flex做三欄布局
用flex做四欄布局
用flex做平均布局
用flex組合使用，做更復(fù)雜的布局

老手的經(jīng)驗(yàn)

1.css最忌諱把寬高寫(xiě)死，永遠(yuǎn)不要把width和height寫(xiě)死，除非特殊說(shuō)明

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

2.什么叫寫(xiě)死

寫(xiě)死 width:100px;不寫(xiě)死 width:50%; max-width:100px; width;30vw; //vw意思是屏幕寬度的1%，這里指屏幕寬度的30% min-width:80%;特點(diǎn)：不使用px或者 加min max前綴

電腦上width一般都寫(xiě)死的，一般800px，手機(jī)不寫(xiě)死

3.flex可以基本滿(mǎn)足所有需求,不管是手機(jī)還是PC

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

例子：實(shí)現(xiàn)左右布局

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

或者在ul里加margin-left:auto;(更推薦這種)

flex實(shí)踐

一.用flex做 頂部條 兩欄布局

1.橫向布局display:flex;

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

2.左右布局

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

或者在后面的元素ul里加margin-left:auto;(推薦這種方法!)

3.line-height與height的區(qū)別

用于設(shè)置多行元素的空間量，如多行文本的間距,ul>li。




二.用flex做 內(nèi)容區(qū) 三欄布局

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

用于設(shè)置main的width，讓它自己填充，不寫(xiě)死

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

margin-right:auto;

代替margin:0 auto;

三.用flex做產(chǎn)品展示區(qū) 平均布局

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

Grid布局

Grid布局功能最強(qiáng)大，尤其適合“不規(guī)則布局”。

一維布局用Flex(必須選擇橫著/豎著排列),二維布局用Grid(不需要選擇兩個(gè)方向都支持)

其它

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

中間可以加空格

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

container里的所有元素

2.如何在兩套布局中切換？(PC用float布局,手機(jī)用flex布局)

一個(gè)css文件寫(xiě)兩種布局,然后用@media媒體查詢(xún)做判斷切換。

3.min-height: 100vh;最小高度占滿(mǎn)屏幕的100%

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

5.小游戲 Grid Garden

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

1.讓一個(gè)元素變成Grid容器

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


2.設(shè)置行和列(虛擬的，線(xiàn)不存在，只是設(shè)置了范圍)

column主軸左右 row次軸上下

.container{ grid-template-columns:40px 50px auto 50px 40px; 3行5列 grid-template-rows:25% 100px auto;}(2)給每條線(xiàn)取名字(太復(fù)雜一般不取，用默認(rèn)的)

Grid優(yōu)點(diǎn)給每根線(xiàn)都取了個(gè)名字,默認(rèn)是從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設(shè)置范圍

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.設(shè)置總空隙 gap:12px;2.左右 column-gap:10px;3.上下 row-gap:10px;3.grid-template-areas

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

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

4.預(yù)留一個(gè)空位置

一般用.表示這里為空(很少用)

Grid實(shí)踐

1.grid repeat縮寫(xiě)方式

grid-template-rows:240px 120px 120px 120px 120px; 縮寫(xiě)grid-template-rows:240 repeat(4,120px);2.盡力往里縮

display:inline-grid; 因?yàn)閮?nèi)聯(lián)元素會(huì)盡力往里縮,去掉額外的空間

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

常用Grid布局

grid-template-areas

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

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