10.【CSS】布局

LuChou
305 阅读6分钟

1.什么是CSS布局？

将页面分块，按照上中下、左中右排列。

2.CSS布局的分类

1.固定宽度布局：宽度一般为960px/1000px/1024px
2.不固定宽度布局：一般用于手机页面，主要靠文档流（文档流本来就是自适应的，不需要额外加样式了）的原理来布局
3.响应式布局：PC上固定宽度，手机上不固定宽度，即一种混合布局

3.布局的两种思路

1.从大到小（适合老手）
先定大局，然后完善每个部分的小布局
2.从小到大（新手推荐）
先完成小布局，然后组合成大布局

4.布局需要用到哪些属性

先选择，用什么CSS布局？
是否兼容IE9？
1.是：使用float布局
2.否：往下看

是否只兼容最新浏览器？
1.是：用grid布局
2.否：用flex布局

5.float布局使用步骤

  1. 在子元素上加float:left和width
  2. 在父元素上加.clearfix

示例，做一个导航栏

HTML

<header class="claerfix"> <!--clearfix让header元素重新包住脱离了文档流的div和nav元素-->
    <div class="logo">NIKE</div>
    <nav>导航</nav>
</header>

CSS

*{margin:0;padding:0;box-sizing:border-box;}

.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

.logo{
    border:1px solid red;
    height:50px;
    width:100px;
    float:left; /*让div元素脱离了文档流，并向左靠齐*/
    margin-top:5px; /*上边距为5px，让div元素下移5px，以和nav元素居中对齐*/
}

.nav{
    border:1px solid green;
    width:200px;   
    height:50px;
    float:right; /*让nav元素脱离了文档流，并向右靠齐*/
}

注意事项

  1. 一般横向最后一个元素不设置宽度
  2. 不需要做响应式，因为该布局只针对IE浏览器，且手机不支持IE浏览器
  3. IE6/7存在双倍margin的bug，可针对性地将margin减半，或者加上display:inline-block;

6.float布局实践

1.四栏布局（如：导航）
2.两栏布局（如：顶部条）
3.三栏布局（如：内容区）
4.平均布局（如：产品展示区）

1.加上头尾，即可满足所有PC页面需求
2.手机页面不用float布局

HTML

<header class="clearfix">
<div class="logo"><img src="图片路径" alt="NIKE"></div>
<ul class="clearfix nav">
    <li>首页</li>
    <li>课程</li>
    <li>优惠</li>
    <li>关于</li>
</ul>
</header>
<div class="content clearfix"> <!--内容区-->
    <aside></aside>
    <main></main>
    <div class="ad"></div>
</div>
<div class="imageList">
<div class="x clearfix">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
</div>
</div>

CSS

*{margin:0;padding:0;box-sizing:border-box}
ul,ol{
    list-style:none; /*删除无序列表的圆点样式*/
}

.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

ul > li{
    float:left; /*让无序列表变为一行排列*/
    border:1px solid red; /*最后删除边框*/
    padding:4px 0.5em; /*上下内边距为4px，左右内边距为0.5个字体大小*/
    inline-height:32px;
}

ul{
    border:1px solid green; /*最后删除边框*/
    display:inline-block; /*使得ul元素贴边包裹住内部元素*/
}

img{max-width:100%;}

.logo > img{
    width:100px /*将logo图片的宽度规定为100px*/
    border:1px solid red; /*最后删除边框*/
    vertical-align:top;
} 

.logo{
    background:grey;
    display:inline-block; /*让div元素和ul元素中的li元素排列与一行之中*/
    float:left;
    margin-top:8px;
}

.nav{
    float:right;
    margin-left:20px;
}

header{
    border:1px solid blue; /*最后删除边框*/
    background:grey;
    color:white;
}

.content{
    border:1px solid red; /*将border改为outline，可以消除边框自带宽度引起的布局混乱*/
    width:800px;
    margin:0 auto; /*用以下两行代码更好（只对块级元素有效），目的是水平居中，上下margin不要规定为0*/
    margin-left:0;
    margin-right:0;
}
.content > aside{
    width:200px;
    border:1px solid green;
    height:300px;
    float:left;
}
.content > main{
    border:1px solid purple;
    height:300px;
    width:500px;
    float:left;
}
.content > .ad{
    width:100px;
    border:1px solid black;
    height:300px;
    float:left;
}
.imageList{
    outline:1px solid red; /*使用outline，border的2像素不会占据空间*/
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
.imageList > .x > .image{ /*做平均布局的时候，加一个x图层*/
    width:191px;
    height:191px;
    background:#000;
    border:1px solid blue;
    float:left;
    margin-top:10px;
    margin-bottom:10px;
    margin-right:12px;
}
.imageList > .x{
    margin-right:-12px; 
}

7.flex布局（弹性盒）

重点属性（工作中常用）

display:flex;
flex-direction:row/column; /*横着还是竖着排列*/
flex-wrap:wrap; /*是否换行*/
justify-content:center/space-between; /*横轴上是居中还是分开对齐*/
align-items:center; /*纵轴的对齐方式*/

container容器的属性

HTML

<body>
<div class="container">
    <div class="item item-a">1</div>
    <div class="item item-b">2</div>
    <div class="item item-c">3</div>
</div>
</body>

CSS

.container{
    display:flex; /*or inline-flex 让一个元素变成flex容器 */
    border:1px solid red;
    flex-direction:row | row-reverse | column | column-reverse; /*改变items流动方向(主轴) 从左到右 | 从右到左 | 从上到下 | 从下到上*/
    flex-wrap:nowrap | wrap; /*控制是否折行 换行 | 不换行*/
    justify-content:flex-start | fles-end | center | space-between; /*主轴（左右方向）的对齐方式 向左对齐 | 向右对齐 | 居中对齐 | 均匀分布*/
    align-items:flex-start | flex-end | center | stretch; /*次轴（上下方向）的对齐方式 向上对齐 | 向下对齐 | 居中对齐 | 拉伸对齐*/
}
.item{
    width:50px;
    height:50px;
    border:1px solid green;
}
.item-a{
    height:100px;
}
.item-b{
    height:200px;
}
.item-c{
    height:150px;
}

item的属性

HTML

<body>
<div class="container">
    <div class="item">logo</div>
    <div class="item">导航</div>
    <div class="item">头像</div>
</div>
</body>

.container{
    display:flex;
    border:1px solid red;
    flex-direction:row;
    flex-wrap:nowrap;
}
.item{
  border:1px solid green;
  height:50px;
}
.item:first-child{
    order:100; /*默认order都是0，元素会按照order从小到大排列*/
    flex-grow:1; /*三个子元素的flex-grow都为1，宽度等比例增加*/
    flex-shrink:1;
}
.item:nth-child(2){
    flex-grow:1;
    order:1;
    flex-shrink:5; /*当总宽度小于子元素宽度之和时，2号元素宽度缩小的速度更快，参数为0时保持不变*/
}
.item:nth-child(3){
    flex-grow:1;
    order:3;
    flex-shrink:1; /*flex-grow:1;和flex-shrink:1;可以一起缩写为flex:1 1 100px;*/
}
.item:nth-child(4){
    order:4;
    align-self:flex-end; /*可以让元素单独对齐*/
}
.item:last-child{
    order:5;
}

8.flex布局实践

不同布局
1.用flex做两栏布局
2.用flex做三栏布局
3.用flex做四栏布局
4.用flex做平均布局
5.用flex做组合布局，更复杂的布局
经验
1.除非特殊说明，不要把width和height写死
2.用min-width/max-width/min-height/max-height
3.flex基本可以满足所有要求
4.flex和margin-xxx:auto配合有意外效果

HTML

<body>
<header class="header">
    <div class="logo">
        <img src="logo.png" alt="nike">
    </div>
    <ul>
        <li>首页</li>
        <li>课程</li>
        <li>优惠</li>
        <li>关于</li>
    </ul>
</header>

<div class="content">
    <aside></aside>
    <main></main>
    <div class="ad"></div>
</div>

<div class="imageList">
<div class="x">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
</div>
</div>
</body>

CSS

*{margin:0;padding:0;box-sizing:border-box;}
ul-ol{list-style:none;}
img{max-width:100%;}
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:grey;
    padding:4px 0;
}
.logo{
    display:flex;
    align-items:center;
}
.logo>img{
    height:26px;
    vertical-align:middle;
}
ul{
    display:flex;
}
ul>li{
    padding:4px;
}

.content{
    display:flex;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
.content>aside{
    background:#000;
    width:200px;
}
.content>main{
    background:#666;
    height:400px;
    flex-grow:1;
}
.content>.ad{
    background:#999;
    width:100px;
}
.imageList{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
}
.imageList>.x{
    display:flex;
    flex-wrap:wrap;
    margin-right:-12px;
}
.image{
    width:191px;
    height:191px;
    margin-right:12px;
    margin-bottom:10px;
}

什么叫写死？
1.写死
width:100px;
2.不写死

width:50%;
max-width:100px;
width:30vw /*一个vw表示屏幕的1%*/
min-width:80%;

常用草图软件
1.balsamiq
2.figma
3.墨刀
4.adobe xd

小游戏 flexboxfroggy.com/#zh-cn

9.grid布局

功能最强大的布局方案
属性介绍
HTML

<body>
<div calss="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</div>
</body>

CSS

.container{
    display:grid | inline-grid; /*如何让一个元素成为grid的container*/
    grid-template-columns:40px 50px auto 50px 40px;
    grid-template-rows:60px 300px 100px;
    /*设置行和列的数量和宽度，三行五列*/
}
.a{
    grid-row-start:1;
    grid-row-end:4;
    grid-column-start:1;
    grid-column-end:6;
    /*可以设置元素在列和行的开始、结束位置*/
}
.b{
    grid-column-start:1;
    grid-column-end:3;
}

使用fr划分行和列

.container{
    grid-template-columns:1fr 1fr 1fr; /*三列*/
    grid-template-rows:1fr 1fr 1fr; /*三行*/
    grid-gap:12px;
}

分区grid-template-areas

.item-a{
    grid-area:header;
}
.item-b{
    grid-area:main;
}
.item-c{
    grid-area:sidebar;
}
.item-d{
    grid-area:footer;
}
.container{
    display:grid;
    grid-template-columns:50px 50px 50px 50px;
    grid-template-rows:auto;
    grid-template-areas:
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer"
}

空隙gap

.container{
    grid-template-columns:100px 50px 100px;
    grid-template-rows:80px auto 80px;
    grid-column-gap:10px;
    grid-row-gap:15px;
}

10.grid布局实践

grid适合不规则布局
小游戏
cssgridgarden.com/#zh-cn

avatar
文章
阅读
粉丝