一.盒子布局
1.border-----边框属性,可取值:dotted—点状边框;dashed—虚线边框;solid-----实线边框;double—双线边框
2.border-width-----规定边框的宽度
3.border-style-----规定边框的样式
4.border-color-----规定边框的颜色
5.margin-----可用于定义边框的位置,取值:left center right
6.display-----将块级元素和内联元素进行相互转换,可取值:
7.padding:0;-----防止最初在网页显示时有边角距离
注:css隐藏元素的方式:display:none;width:0 height:0
二.浮动布局
1.float-----设置元素往哪个方向浮动,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。可取值:
none ----- 不浮动
left -----对象向左浮动,而后面的内容会流向对象的右侧
right-----对象向右浮动,而后面的内容会流向对象的左侧
清除浮动:clear
2.代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子布局</title>
<style type="text/css">
/*防止最初在网页显示时有边角距离*/
*{
padding:0;
}
/*基本属性*/
#one{
margin:0 auto;
width:100px;
border-style:double;
border-color:blue;
}
/**/
#two{
}
/*块级元素和内联元素*/
.box1{
width:200px;
height:300px;
background-color:red;
}
.box2{
width:200px;
height:300px;
background-color:yellow;
}
.box3{
width:200px;
height:300px;
background-color:blue;
/*display:none;&width:0; height:0;*/
}
a{
width:200px;
height:200px;
/*使a变成块级标签*/
display:block;
}
/*浮动布局*/
#left{
float:left;
width:200px;
height:300px;
background-color:green;
}
#center{
float:left;
width:200px;
height:300px;
background-color:yellow;
/*使之不并列左排*/
clear:both;
}
#right{
float:left;
width:200px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<div id="one">这是一个盒子</div>
<div id="two">这还是一个div</div>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
<a href="#">这是一个a标签</a>
<a href="#">这是一个a标签</a>
<a href="#">这是一个a标签</a>
<div id="left">左</div>
<div id="center">中</div>
<div id="right">右</div>
</body>
</html>
三.定位布局
1.position-----属性规定元素的定位类型,任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。可取值:
注:
static : 默认值
absolute: 绝对定位,会将对象从文档流中分离出来,通过设置Left right top bottom 四个方向上的
值相较于父级元素的绝对定位,如果不存在这样的父级元素,相较于body
relative: 相对定位,不会将对象从文档流中分离出来,通过设置Left right top bottom 四个方向上
的值进行相对定位
2.代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位布局</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#main{
margin:0 auto;
width:300px;
height:300px;
border:1px solid black;
position:relative;
}
#left{
width:100px;
height:100px;
background-color:green;
top:100px;
left:200px;
position:absolute;
}
#center{
width:100px;
height:100px;
background-color:yellow;
}
#right{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="main">
<div id="left">左</div>
<div id="center">中</div>
<div id="right">右</div>
</div>
</body>
</html>
四.CSS3弹性盒子
1.display:flex; ----- 弹性盒子,不管其内容如何,使所有弹性项目的长度均相同
2.flex-direction-----弹性盒子中子元素的排列方式,可取值:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.flex-container{
width: 400px;
height: 250px;
background-color: lightgrey;
display: flex;
flex-direction:column-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
</div>
</body>
</html>
3.flex-wrap-----设置子元素超过父元素后是否自动换行
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.flex-container{
width: 400px;
height: 250px;
background-color: lightgrey;
display: flex;
flex-wrap:wrap-reverse;
/* margin-top: 400px;*/
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
<div class="flex-item">弹性盒子4</div>
<div class="flex-item">弹性盒子5</div>
<div class="flex-item">弹性盒子6</div>
<div class="flex-item">弹性盒子7</div>
<div class="flex-item">弹性盒子8</div>
<div class="flex-item">弹性盒子9</div>
</div>
</body>
</html>
4.flex-flow-----flex-direction和flex-wrap的简写
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.flex-container{
width: 400px;
height: 250px;
background-color: lightgrey;
display: flex;
/* flex-direction:row-reverse;
flex-wrap:wrap; */
flex-flow:row-reverse wrap;
/* margin-top: 400px;*/
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
<div class="flex-item">弹性盒子4</div>
<div class="flex-item">弹性盒子5</div>
<div class="flex-item">弹性盒子6</div>
<div class="flex-item">弹性盒子7</div>
<div class="flex-item">弹性盒子8</div>
<div class="flex-item">弹性盒子9</div>
</div>
</body>
</html>
5.代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3弹性盒子</title>
<style type="text/css">
.flex-container{
width:400px;
height:250;
background-color:blue;
/*设置弹性盒子*/
display:flex;
flex-direction:row;
}
.flex-item{
margin:10px;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
</div>
</body>
</html>
五.其他属性
1.align-items-----弹性容器内的项目指定默认对齐方式
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-items</title>
<style type="text/css">
#main{
width:250px;
height:200px;
border:1px solid pink;
display:flex;
align-items:center;
}
#main div{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">red</div>
<div style="background-color:lightblue;">blue</div>
<div style="background-color:lightgreen;">green</div>
</div>
</body>
</html>
2.align-content-----修改 flex-wrap 属性的行为。它与 align-items 相似,但是它不对齐弹性项目,而是对齐弹性线。
注意:必须有多行项目,此属性才能生效!
提示:使用 justify-content 属性可将主轴上的项目(main-axis)水平对齐。
可取值: