0
点赞
收藏
分享

微信扫一扫

CSS-布局(float flex grid)

笙烛 2021-09-30 阅读 146

布局前言

我们前面已经学过了文档流和盒模型,今天就要开始学新的知识CSS布局,希望对大家有所帮助。

不同的布局什么时候用?

Float布局

布局实现的步骤

  1. 子元素加float:left和width
  2. 父元素加clearfix
  3. 写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
}

效果图如下


flex布局

如何让一个元素变为flex元素

.contaier{
display: flex;}

flex两大元素

flex的container的样式

  1. 改变items的流动方向
.container{
flex-direction:row(从左到右)/row-reverse(从右到左)/column(从上到下)/column-reverse(从下到上)
}
  1. 改变折行的方向
.container{
flex-wrap:wrap(折行)/nowrap(不折行)
}
  1. 改变主轴的方向
.container{
justify-content:flex-start/flex-end/flex-center/space-between
}

  1. 改变次轴方向
.container{
align-items:flex-start/flex-end/center/stretch
}

flex的items的样式

  1. flex-grow
  2. 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;
}

grid布局(格子布局)

如何触发grid布局

.container{
display:gird/inline-gird
}

设置行和列

.container{
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto;
}

如图


具体内容的设置

.item{
grid-column-start:数字;
grid-column-end:数字;
grid-row-start:数字;
grid-row-end:数字;
}

本文为本人的原创文章,著作权归本人和饥人谷所有,转载务必注明来源.

举报

相关推荐

0 条评论