布局前言
我们前面已经学过了文档流和盒模型，今天就要开始学新的知识CSS布局，希望对大家有所帮助。
不同的布局什么时候用？
微信图片_20210125214228_副本.png
Float布局
布局实现的步骤
- 子元素加float:left和width
- 父元素加clearfix
- 写css的时候加
.clearfix:after{
content:'';
display:block;
clear:both;
}
举例如下：
<header class="clearfix">
<body>
<div class="loge">
<img src="https://static.xiedaimala.com/xdml/cdn/assets/black-logo-6b90d5f6165754f30be3d8469256bc824371ae8deaefc286127fb7701b7b8dc5.png" alt="">
</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 class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
*{margin:0;padding:0; box-sizing: border-box;}
header{
width:1024px;
}
ul{
list-style:none;
}
img{
max-width:100%
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
.loge{
background:grey;
display:inline-block;
float: left;
margin:8px;
}
.loge>img{
height:26px;
vertical-align: top;
}
.nav{
float: right;
}
ul>li{
float:left;
padding:0.2em 0.5em;
line-height:32px;
}
ul{
display:inline-block;
}
header{
background: grey;
color:white;
}
.content{
width:800px;
margin:0 auto;
}
.content>aside{
width:100px;
height:300px;
float: left;
background: #000;
}
.content>main{
height:300px;
width:500px;
float: left;
background: #123;
}
.content>.ad{
height:300px;
width:200px;
float: left;
background: #567;
}
.imagelist{
outline:1px solid yellow;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
.imagelist> .x{
margin-right:-12px;
}
.imagelist>.x>.image{
outline:1px solid red;
width:191px;
height:191px;
float:left;
margin:6px;
background: #000;
margin-bottom:10px
}
效果图如下
image.png
flex布局
如何让一个元素变为flex元素
.contaier{
display: flex;}
flex两大元素
image.png
flex的container的样式
- 改变items的流动方向
.container{
flex-direction:row(从左到右）/row-reverse（从右到左）/column(从上到下)/column-reverse(从下到上)
}
- 改变折行的方向
.container{
flex-wrap:wrap(折行)/nowrap(不折行)
}
- 改变主轴的方向
.container{
justify-content:flex-start/flex-end/flex-center/space-between
}
image.png
- 改变次轴方向
.container{
align-items:flex-start/flex-end/center/stretch
}
image.png
flex的items的样式
- flex-grow
- flex-shrink
示例：
<body>
<header class="header">
<div class="logo">
<img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png" alt="">
</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>
* {
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;
}
.imageList > .x{
display: flex;
flex-wrap: wrap;
margin-right: -6px;
margin-left: -6px;
}
.image{
width: 191px;
height: 191px;
background: grey;
border: 1px solid red;
margin-right: 6px;
margin-left: 6px;
margin-bottom: 10px;
}
image.png
grid布局（格子布局）
如何触发grid布局
.container{
display:gird/inline-gird
}
设置行和列
.container{
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto;
}
如图
图片.png
具体内容的设置
.item{
grid-column-start:数字;
grid-column-end:数字;
grid-row-start:数字;
grid-row-end:数字;
}
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.
网友评论