CSS 布局套路

一、布局流程

布局流程圖

二、布局原則

  1. 盡量不要寫死width和height
  2. 盡量使用高級語法，如calc、nth-child、flex等
  3. 如果是 IE，就全部寫死

三、float 布局與 flex 布局

float 布局

  1. 子元素上寫float: left(right)
  2. 父元素（容器）上加.clearfix 
 .clearfix::after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

清除浮動(dòng)示例
導(dǎo)航欄示例

flex 布局

詳見阮一峰老師的這篇文章 Flex 布局教程：語法篇

四、布局示例

這里以做一個(gè)PC端和移動(dòng)端的布局為例

PC端：

1. 用 float 實(shí)現(xiàn)平均布局

做平均布局時(shí)經(jīng)常會碰到寬度不夠的情況，就像下面這樣

上圖中，元素寬度的總和超出了容器的寬度，因此最后一個(gè)元素就跑到下一行去了

針對該問題，有以下幾種解決方法供大家參考

方法一：使用nth-child

使用nth-child將上圖中奇數(shù)個(gè)元素的margin-left和偶數(shù)個(gè)元素的margin-right分別設(shè)置為0即可

<div class="pictures clearfix">
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
</div>

.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
  float: left;
}
.picture:nth-child(4n+1) { /*1和5*/
  margin-left: 0;
}
.picture:nth-child(4n) { /*4和8*/
  margin-right: 0;
}

查看效果：http://js.jirengu.com/vazaqivoja/2/edit?html,css,output

如果要兼容IE等不支持nth-child語法的瀏覽器，可以使用“負(fù)margin”法。

方法二：負(fù)margin

該方法即在父子之間加一層wrapper，在wrapper上設(shè)置負(fù)數(shù)的margin值

<div class="pictures">
   <div class="picture-wrapper clearfix">
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
   </div>
</div>

.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
  float: left;
}
.pictures > .picture-wrapper{
  margin:0 -4px;
}

查看效果：http://js.jirengu.com/mogenujaci/2/edit?html,css,output

2. 用 flex 實(shí)現(xiàn)平均布局

方法一：使用flex的space-between屬性
<div class="pictures">
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
  <div class="picture"></div>
</div>

.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin:4px 0;
}

查看效果：http://js.jirengu.com/yohebomuqo/2/edit?html,css,output

但是，如果僅僅只是使用space-between也是會有缺陷的（上面說的幾種方法不會出現(xiàn)該問題），如下圖，我們刪掉了一個(gè)picture，會發(fā)現(xiàn)第二排并不是像我們期望的那樣依次排列，最后留下一個(gè)空位。

為了解決這個(gè)問題，可以使用 flex + 負(fù)margin

方法二：flex + 負(fù)margin
<div class="pictures">
   <div class="picture-wrapper">
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
     <div class="picture"></div>
   </div>
</div>

.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
.picture {
  width: 194px;
  height: 194px;
  background: #ddd;
  margin: 4px;
}
.pictures > .picture-wrapper{
  display:flex;
  flex-wrap:wrap;
  margin: 0 -4px;
}

查看效果：http://js.jirengu.com/sedabamohe/2/edit?html,css,output

此方法和上面float布局中的“負(fù)margin”差不多，只是picture-wrapper上可以少寫一個(gè).clearfix

小優(yōu)化：使用calc屬性
.pictures {
  width: 800px; /*使用calc屬性后，去掉此寬度，伸縮頁面試試看*/
  background: green;
  margin: 0 auto;
}
.picture {
  width: calc(25% - 8px);/* 808x25% - 8px */
  height: 194px;
  background: #ddd;
  margin: 4px;
}

查看效果：http://js.jirengu.com/gimaverune/5/edit?html,css,output

這里使用calc屬性的好處是，如果元素是不定寬/高的話，頁面伸縮時(shí)可以保持比例不變。

3. 中間存在空隙的左右布局

<div class="art clearfix">
   <div class="sider">廣告1</div>
   <div class="main">廣告2</div>
</div>

.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
}
.art > .sider{
  float: left;
  width: 33.333333%;
  border: 1px solid;
  height: 100px;
}
.art > .main{
  float: left;
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}

此時(shí)如果我們想讓底部兩個(gè)廣告之間產(chǎn)生空隙該如何做呢？

使用float來做

方法一：內(nèi)部加div
<div class="art clearfix">
   <div class="sider">
     <div class="sider-child">廣告1</div>
   </div>
   <div class="main">
     <div class="main-child">廣告1</div>
   </div>
</div>

.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
}
.art > .sider{
  float: left;
  width: 33.333333%;
}
.art > .main{
  float: left;
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}
.sider-child{
  margin-right: 20px;
  border: 1px solid;
  height: 100px;
}

查看效果：http://js.jirengu.com/cayiziribu/2/edit?html,css,output

方法二：使用calc屬性
<div class="art clearfix">
   <div class="sider">廣告1</div>
   <div class="main">廣告2</div>
</div>

.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
  display: flex;
}
.art > .sider{
  float: left;
  width: calc(33.333333% - 20px);
  margin-right: 20px;
  height: 100px;
  border: 1px solid;
}
.art > .main{
  float: left;
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}

查看效果：http://js.jirengu.com/tacanacohu/2/edit?html,css,output

使用flex來做

方法一：margin-right:auto

此時(shí)需要去掉html中.art上的.clearfix類，然后把上面方法二中的.art加上display: flex;并去掉float: left;，最后把.art > .sider中的margin-right: 20px;改為margin-right: auto;即可
查看效果：http://js.jirengu.com/canemojiju/3/edit?html,css,output

方法二：space-between

在方法一的基礎(chǔ)上去掉margin-right: auto;，然后在.art中加上justify-content: space-between;即可
查看效果：http://js.jirengu.com/dusuputata/2/edit?html,css,output

移動(dòng)端：

  1. 首先加一個(gè)meta:vp
  2. 使用媒體查詢做響應(yīng)式的導(dǎo)航欄
    首先去掉min-width: 600px; 
.parent .menu{
  display: none;
}
@media (max-width: 420px){
  .parent .menu{
    display: block;
  }
  .parent .nav{
    display: none;
  } 
}
  1. 自適應(yīng)的banner
    PC上定寬，移動(dòng)端自適應(yīng)
.banner {
  width: 800px;
  height: 300px;
  background: #888;
  margin: 0 auto;
  margin-top: 10px;
}
@media (max-width: 420px){
  .banner{ width: auto; }
}
  1. 自適應(yīng)的pictures
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
}
@media (max-width: 420px){
  .pictures{ width: auto; }
}
  1. 從PC一行四張圖變?yōu)橐苿?dòng)端一行兩張圖
.picture {
  width: calc(25% - 8px);
  height: 194px;
  background: #ddd;
  margin: 4px;
}
@media (max-width: 420px){
  .picture { 
    width: calc(50% - 8px); 
  }
}
  1. 底部廣告變?yōu)樯舷陆Y(jié)構(gòu)
.art{
  background: #ddd;
  width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 420px){
  .art { 
    width: auto; 
    flex-direction: column;
  }
}
.art > .sider{
  width: calc(33.333333% - 20px);
  height: 100px;
  border: 1px solid;
}
@media (max-width: 420px){
  .art > .sider { 
    width: auto; 
    height: auto;
  }
}
.art > .main{
  width: 66.666666%;
  border: 1px solid;
  height: 100px;
}
@media (max-width: 420px){
  .art > .main { 
    width: auto; 
    height: auto;
  }
}

解決bug：

  1. 解決移動(dòng)端頁面左右滑動(dòng)的一個(gè)bug（負(fù)margin造成的）
    解決：加overflow: hidden; 
.pictures {
  width: 800px;
  background: green;
  margin: 0 auto;
  overflow: hidden; /* 解決bug */
}
  1. 這里banner存在一個(gè)問題，就是當(dāng)縮小到移動(dòng)端時(shí)，寬度變?yōu)?code>auto，高度卻沒變，這會導(dǎo)致圖片發(fā)生形變
    解決：不使用img標(biāo)簽，使用CSS的background: url來設(shè)置背景圖
.banner {
  width: 800px;
  height: 300px;
  background: #888;
  margin: 0 auto;
  margin-top: 10px;
  background: transparent url(https://ftp.bmp.ovh/imgs/2019/12/fea07c39f3654cff.jpg) no-repeat center;
  background-size: cover; /* 盡可能保持圖片比例 */
}

另外，如果非要縮小后保持圖片的固定比例，請搜索固定比例div

最終完成的布局（PC端 + 移動(dòng)端）：http://js.jirengu.com/panukozaxu/3/edit?html,css,output
加入響應(yīng)式導(dǎo)航欄：http://js.jirengu.com/giquheqogu/2/edit?html,css,output

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容