在利用css写网页时，我们需要布局使网页看起来美观，更加吸引人的注意力，所以有了四种布局方式:盒子布局，浮动布局，定位布局，弹性盒子布局
1.盒子布局
盒子布局一般使用div标签，它是一个块级元素，可以设置宽和高，独占一行
下面是一个盒子模型的示例：
padding表示它的内边距，是内容和盒子外边框的距离。
margin表示它的外边距，是盒子外边框距离页面的距离。
如果 margin 属性有四个值：margin:25px,15px,20px,30px;表示上外边距为25px，右外边距为15px；下外边距为20px；左外边距为30px；
如果margin属性有三个值：margin：25px，15px，20px；表示上外边距为25px，右和左外边距为15px，下外边距为20px，
如果margin属性有两个值：margin：25px,5px；表示上下外边距为25px，左右外边距为5px；
如果margin属性有一个值：margin：25px；表示上下左右外边距均为25px；
同理，padding属性也是一样
2.浮动布局
在使用盒子等布局时，由于它是块级元素，独占一行，在使用的时候经常所不能达到我们想要的效果，所以有了浮动布局。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
在不使用浮动时，盒子的布局如下：
使用左浮动后的效果：
使用右浮动后的效果：
在使用左浮动后，可能会造成后面元素的布局错乱，这时候就可以使用clear属性清除浮动效果去解决这个问题：
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
对第一个盒子使用左浮动后，后面的元素就可能会出现这样的情况：
使用clear属性清除它后面元素的左浮动，就会恢复之前的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
#one{
width: 100px;
height: 100px;
border:1px solid black;
float: left;/*左浮动*/
/*float:right;右浮动*/
}
#two{
width: 100px;
height: 100px;
border:1px solid black;
float: left;/*左浮动*/
/*float:right;右浮动*/
/*clear: left;第一个盒子设置了左浮动，后面元素发生错乱时解决的办法*/
}
#three{
width: 100px;
height: 100px;
border:1px solid black;
float: left;/*左浮动*/
/*float:right;右浮动*/
/*clear: left;*/
}
</style>
</head>
<body>
<div id="one">11111</div>
<div id="two">22222</div>
<div id="three">33333</div>
</body>
</html>3.定位布局
position 属性规定应用于元素的定位方法的类型。
| 属性 | 描述 |
|---|---|
| static（默认值） | 静态定位的元素不受 top、bottom、left 和 right 属性的影响。不会以任何特殊方式定位；它始终根据页面的正常流进行定位 |
|
absolute
| 相对于最近的定位祖先元素进行定位，然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。 |
|
relative
| 相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.main{
position: relative;
border:1px solid black;
width: 600px;
height: 600px;
margin: 200px;
}
.box{
width: 200px;
height: 200px;
border:1px solid black;
background: red;
position:absolute;
top:100px;
left:100px;
}
.box1{
width: 200px;
height: 200px;
border:1px solid black;
background: red;
/*position:relative;
top:100px;
left:100px;*/
}
.box2{
width: 200px;
height: 200px;
border:1px solid black;
background: red;
/*position:absolute;
top:100px;
left:100px;*/
}
</style>
</head>
<body>
<div class="main">
<div class="box">this is a div</div>
<div class="box1">this is a div</div>
<div class="box2">this is a div</div>
</div>
</body>
</html>
4.弹性盒子布局
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
如果需要使用flexbox 首先要使用display：flex设置它为弹性盒子，在这个父元素内使用它的其他属性设置布局。
4.1flex-direction
指定了弹性盒子中子元素的排列方式。
有如下几个取值：
1.flex-direction: column; 使盒子从上到下排布
.main{
display: flex;
flex-direction:column;
background: lightblue;
}
2.flex-direction: column-reverse;使盒子从下到上
.main{
display: flex;
flex-direction:column-reverse;
background: lightblue;
}
3.flex-direction: row;使盒子从左向右排列 也是该属性的默认值
.main{
display: flex;
flex-direction:row;
background: lightblue;
}
4.flex-direction: row-reverse;使盒子从右向左
.main{
display: flex;
flex-direction:row-reverse;
background: lightblue;
}
4.2 flex-wrap
flex-wrap属性规定是否应该对 flex 项目换行
有如下取值：
1.flex-wrap: wrap;在必要的时候换行
.main{
width: 500px;
display: flex;
flex-wrap:wrap;
background: lightblue;
}
2.flex-wrap: nowrap;不换行
.main{
width: 500px;
display: flex;
flex-wrap:nowrap;
background: lightblue;
}
3.flex-wrap: wrap-reverse;在必要的时候以相反的方式换行
.main{
width: 500px;
display: flex;
flex-wrap:wrap-reverse;
background: lightblue;
}
4.3flex-flow 属性
是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
.main{
width: 500px;
display: flex;
flex-flow: row wrap;
background: lightblue;
}
4.4justify-content 属性
属性用于对齐 flex 项目
取值如下：
1.justify-content: center;在容器中央对齐弹性项目
.main{
width: 500px;
display: flex;
justify-content: center;
background: lightblue;
}
2."justify-content: flex-start;" 在容器开头对齐弹性项目（默认值）
.main{
width: 500px;
display: flex;
justify-content: flex-start;
background: lightblue;
}
3."justify-content: flex-end;" 在容器末端对齐弹性项目
.main{
width: 500px;
display: flex;
justify-content: flex-end;
background: lightblue;
}
4.justify-content: space-around;" 显示行之前、之间和之后带有空格的 flex 项目
.main{
width: 500px;
display: flex;
justify-content: space-around;
background: lightblue;
}
5.justify-content: space-between;" 显示行之间有空格的 flex 项目
.main{
width: 500px;
display: flex;
justify-content: space-between;
background: lightblue;
}
4.5align-items 属性
用于垂直对齐 flex 项目
1.align-items: center;" 将 flex 项目在容器中间对齐
2.align-items: flex-start;" 将 flex 项目在容器顶部对齐
3.align-items: flex-end;" 将弹性项目在容器底部对齐
4.align-items: stretch;" 拉伸 flex 项目以填充容器（默认值），字元素不用设置高度
4.6align-content属性
用于对齐弹性线
1.align-content: space-between;" 显示的弹性线之间有相等的间距
2.align-content: space-around;" 显示弹性线在其之前、之间和之后带有空格
3.align-content: center;" 在容器中间显示弹性线
4.align-content: stretch;" 拉伸弹性线以占据剩余空间（默认值）
5.align-content: flex-start;" 在容器开头显示弹性线
6.align-content: flex-end;" 在容器的末尾显示弹性线
4.7一些其他不常用的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
display: flex;
}
.main>div{
width: 100px;
height: 100px;
border: 1px solid black;
background: red
}
</style>
</head>
<body>
<div class="main">
<div style="flex-grow:1">1</div>
<div style="flex-grow:1">2</div>
<div style="flex-grow:4">3</div>
<div style="flex-shrink:2">4</div>
</div>
</body>
</html>
1086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
