手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

#06-2你认真学了css？布局套路

慕姐8265434 2018-11-14 12:54:13 浏览 2361
慕姐8265434
关注TA
已关注
手记 1309
粉丝 222
获赞 1065

一、两种布局使用分析

  • float布局（定宽布局）

  • flex布局（弹性布局）


    webp

    image

二、原则

  • 不到万不得已，不要写死 width 和 height

  • 尽量用高级语法，如 calc、flex

  • 如果是 IE，就全部写死

三、布局套路口诀（上） PC端布局

1、导航条布局——float布局（适用于ie5）

a.儿子全加 float: left （right）  b.老子加 .clearfix
代码如下：Float布局

<style>
  .parent{  border:1px solid green;
} .child{ /* border:1px solid red; */}.child:nth-child(1){  width:30%;  background-color:red;
}.child:nth-child(2){  width:69%;  background-color:yellow;
}.clearfix::after{  content:'';  display:block;  clear:both;    
}.content{  border:1px solid black;  margin-right:10px;
}</style><div class="parent clearfix" >
   <div class="child" style="float:left;">儿子1</div>
   <div class="child" style="float:left;">儿子2</div>    </div>

如图：该页面展示上其实是弹性布局


webp

image


定死宽度，水平居中则在老子这边动手，添加以下代码：

 .parent{  border:1px solid green;  width:1000px
  margin-left:auto
  margin-right:auto
}.child:nth-child(1){  width:30%;  background-color:red;
}.child:nth-child(2){  width:69%;  background-color:yellow;
}

如图：定宽之后，页面宽度仍有剩余


webp

image


优化之后的导航条，代码如下：

<style>
   .parent{    margin-left:auto;    margin-right:auto;    background: #ddd;   /*定死宽度则不会影响页面 */
    min-width:600px; 
 }   .child{

 }   .child:nth-child(1){    width:100px;    background-color:#333;    color: white;    text-align:center;    line-height:36px;    height:36px;
 }   .child:nth-child(2){

 }   /* 清除浮动 */
   .clearfix::after{ 
     content:'';     display:block;     clear:both;    
 }  .clearfix{    zoom: 1;
 }/*IE6*/
   .content{    border:1px solid black;    margin-right:10px;
   }   .nav{    line-height:24px;    padding:6px 0;
   }   .navItem{   margin-left:20px;
   }  </style>    

  <div class="parent clearfix" >
      <div class="child" style="float:left;">logo</div>
      <div class="child" style="float:right;">
        <div class="nav clearfix">
          <div style="float:left" class="navItem">导航1</div>
          <div style="float:left" class="navItem">导航2</div>
          <div style="float:left" class="navItem">导航3</div>
          <div style="float:left" class="navItem">导航4</div>
          <div style="float:left" class="navItem">导航5</div>
        </div>
      </div>    
    </div>

2、图片位布局——flex布局

a.给老子加 display: flex  
b.给老子加** justify-content: space-between;**

先看看第1种场景：
实现方式：先不用flex布局，用浮动元素+margin+clearfix清除浮动

<style>/* 图片主要部分 */
.banner{
  width:800px;
  height:300px;
  background:#888;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;    
}

.pictures{
  width:800px;
  margin:0 auto;/*不能删1：居中*/
/* background: black;最底层的颜色 */
}

.picture{
  width:194px;
  height:194px;
  background:#ddd;  
  margin:4px;
  float:left;
}

.pictures >.xxx{  /*为什么不能只用两层div*/
/*   background: rgba(255,0,0,0.8);倒数第二层颜色 */
  margin-left:-4px;  
  margin-right:-4px;/*不能删2：扩大范围*/
}

/* .picture:nth-child(1){
  margin-left: 0;
}

.picture:nth-child(4){
  margin-right: 0;
} */<style>

 <div class="banner"></div>

   <div class="pictures">
    <div class="xxx 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>

如图：


webp

image


这种方式可以兼容IE6，且即使减少一个板块也不会影响其它板块，

如图：


webp

image

再看第2种场景：
实现方式：flex布局

<style>.banner{  width:800px;  height:300px;  background:#888;  margin-left:auto;  margin-right:auto;  margin-top:10px;

}.pictures{  width: 800px;                 /* 定宽不够弹性 */
  margin: 0 auto;  display: flex;                 /* 弹性布局 */ 
  flex-wrap: wrap;                /* 换行*/
  justify-content: space-between;/* 多余空间放在空间或水平居中  */ 
  /* align-items: center;   垂直居中 */}.picture{  width: 194px;  height: 194px;  background: #ddd;  
  margin-top: 4px;  margin-bottom: 4px;

}</style>

   <div class="banner"></div>

   <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>

不过如果不是等份的图片板块，就会出现下方bug：


webp

image

如何解决，代码如下：flex布局至bug修复

<style>*{box-sizing: border-box;}.banner{  width:800px;  height:300px;  background:#888;  margin-left:auto;  margin-right:auto;  margin-top:10px;

}.pictures{  width: 800px;   /* 定宽不够弹性 */
  margin: 0 auto;  

}.pictures > .xxx{  display: flex;    /* 弹性布局 */ 
  flex-wrap: wrap;  /* 换行 */
  margin: 0 -4px;
}.picture{  width: 194px; 
  height: 194px;/* 或者 width: calc(25% - 8px); 
  height: 194px; */
  background: #ddd;  
/* 边框可去掉
border: 1px solid red; */ 
  margin: 4px;

}</style>

 <div class="banner"></div>

   <div class="pictures">
    <div class="xxx">
      <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>

如图：


webp

image

3、广告位布局——浮动+margin+clearfix清除浮动

代码如下：

<style>.art{  background: #ddd;  width:800px;  margin:0 auto;
}.art > .sider{  float:left;  border: 1px solid black;  width:33.333333%;  height:300px}.art > .main{  float:left;  border: 1px solid black;  width:66.333333%;  height:300px}</style>

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

如图：


webp

image

广告位之间的间距如何处理：
方法1：采用内嵌一个div，定宽，float+margin-right进行间隙（这种方法似乎要兼容啊，做了很久弄不出，不弄了）
方法2：calc计算法+margin

<style>.art{  background: #ddd;  width:800px;  margin:0 auto;
}.art > .sider{  float:left;  width:calc( 33.333333% - 20px);/* calc计算法，此时右侧多出20px */
  border: 1px solid black;  height: 300px;  margin-right: 20px;  /* 用多出的20px，弥补上那块间隙 */}.art > .main{  float:left;  border: 1px solid black;  width:66.666666%;  height:300px}</style>

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

如图：
![image](http://upload-images.jianshu.io/upload_images/10836479-c71ea2780df177dc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**方法3：**flex布局（IE不支持）
> a.父元素：**display:flex+justify-content:space-between**
> b.父元素+子元素：**display:flex+margin-right:auto**

<style>
.art{
background: #ddd;
width:800px;
margin:0 auto;
display: flex;  /* flex直接左右布局 /
justify-content: space-between;/ 第2种方法：将空隙放中间 /
}
.art > .sider{
width:calc( 33.333333% - 20px);
/ calc计算法，此时右侧多出20px /
border: 1px solid black;
height: 300px;
/ margin-right:auto;  第1种方法 */
}
.art > .main{
border: 1px solid black;
width:66.666666%;
height:300px
}
</style>

如图也是：
![image](http://upload-images.jianshu.io/upload_images/10836479-8dd64f8d595d41a5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)#三、布局套路口诀（下） 移动端布局*   添加：meta:vp (tab键):

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

*   收起pc端导航：
删除定宽+*{margin:0; padding:0;}

*   导航 PC和手机适配的问题

/* 导航PC和手机适配的问题 */
.parent .nav2{
display:none;
}
@media (max-width:420px){
.parent .nav2{
display:block;
}
.parent .nav{
display:none;
}
}

*   banner适配移动端

/banner适配移动端/
.banner{
width:800px; /万恶的定宽 PC端必备/
height:300px;
background: #888;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
@media (max-width:420px){
.banner{width:auto;}
}

*   图片板块适配移动端

/图片板块适配移动端/
.pictures{
width: 800px;    /* 万恶的定宽PC端必备;定宽布局不够弹性 /
margin: 0 auto;  /不能删1：居中/
overflow:hidden; / 避免溢出 */
}
@media (max-width:420px){
.pictures{width:auto;}
}

.pictures > .xxx{
display: flex;    /* 弹性布局 /
flex-wrap: wrap;  / 换行*/
margin: 0 -4px;
}

/图片板块适配移动端2/
.picture{
width: calc(25% - 8px);
height: 194px;
background: #ddd;
margin: 4px;
}
@media (max-width:420px){
.picture{
width: calc(50% - 8px);
}
}

*   广告位适配移动端

/广告位适配移动端/
.art{
background: #ddd;
width:800px;    /万恶的定宽 PC端必备/
margin:0 auto;
display: flex;  /* flex直接左右布局 /
justify-content: space-between;/ 第2种方法：将空隙放中间 */
}
@media (max-width:420px){
.art{
width: auto;
flex-direction:column;
}
}

.art > .sider{
width:calc( 33.333333% - 20px);  /* calc计算法，此时右侧多出20px /
border: 1px solid black;
height: 300px;
/ margin-right:auto;  第1种方法 */
}
@media (max-width:420px){
.art > .sider{
width:  auto;
height: auto;
}
}

.art > .main{
border: 1px solid black;
width:66.666666%;
height:300px
}
@media (max-width:420px){
.art > .main{
width:  auto;
height: auto;
}
}

*   关于图片添加：（注：变形问题减少使用img）


**注：**
> 代码总链接：[布局套路](http://js.jirengu.com/jufoz/4/edit?html,css) 固定比例div：图片1



作者：饥人谷_远方
链接：https://www.jianshu.com/p/48e5d0c4e0a5


打开App，阅读手记
相关标签
Html/CSS
0人推荐
发表评论
随时随地看视频慕课网APP

相关课程

微信小程序入门与实战（全新版） 超20000人学习的好课

¥149 初级 23899

真实数据对接 从0开发前后端分离的企业级上线项目

¥299 初级 4265

系统讲解CSS，工作应用+面试一步搞定

¥149 初级 2562

初识HTML(5)+CSS(3)-升级版

免费 入门 1226014

十天精通CSS3

免费 初级 242678

相关阅读

使用三种方式定位html中的元素
Div Vertical Menu
69.让某个字段使用html的表现力
<a href="">xx</a>;img src="xx"
我的<input />不可能这么可爱（APP打开有惊喜）