1、盒子布局
border------边框
margin------外边距
padding------内边距
边框的定义：
例如：border: 1px solid black;
除了solid还有以下形式：
2、浮动布局
通过float属性去设置浮动布局
取值：left none(不浮动) right
注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响
如果要消除这种影响（消除浮动）通过clear属性
none:默认 允许两边都可以浮动
left：不允许左边的浮动
right：不允许右边的浮动
both：不允许两侧有浮动
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
clear: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
background-color:green;
float: left;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
3、定位布局
属性：position ------ 设置对象的定位方式
static ----- 静态定位（没有设置位置）默认
absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置left top right bottom这四个方向去设
置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置
相较于自身的相对定位
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
.box3{
width: 100px;
height: 100px;
background-color:green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
4、弹性盒子
弹性盒子是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成
设置弹性容器是通过display属性进行设置，---------- display:flex或则inline-flex
注意：一个弹性容器可以包含多个弹性元素
常见的属性：
flex-direction ------- 指的是弹性容器中子元素的排列方式
flex-wrap ------ 指的是弹性容器中子元素超出父容器时是否换行
flex-flow ------ flex-direction 和flex-wrap 的简写
align-items ------ 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
align-content------ 修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
4.1、flex-direction
row ----- 左对齐（横向的从左到右排列），默认
row- reverse ------ 反向的横向排列（右对齐），从后往前排，最后一项排在最前面
column ----- 纵向排列
column-reverse ----- 反向纵向排列
4.2、flex-wrap
nowrap ---- 默认值，规定弹性元素不会换行
wrap ---- 弹性元素在需要的时候会换行
wrap-reverse ------ 会换行，但是是反方向
4.3、flex-flow
例如：
display: inline-flex;
flex-flow: column-reverse wrap;
4.4、align-items
align-items --- 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
align-items: baseline;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
4.5、 justify-content
justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
4.6、align-content
align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
2915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
