一.盒模型的属性
1.padding(用于父子之间调整位置)
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
*{
padding:0;
margin: 0;
}
.box{
height: 100px;
100px;
上下左右都是10
padding:10px;
上下10 左右20
padding:10px 20px
上10 右左20 下30
padding:10px 20px 30px
顺时针 上10 右20 下30 左40
padding:10px 20px 30px 40px
}
</style>
</head>
<body>
<div class="box">
aaa
</div>
2.border
border的三要素: 宽度 样式 颜色
宽度:5px...
样式:sloid 实心
double 双线
dashed 虚线
dotted 点线
颜色:red...
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
*{
padding:0;
margin: 0;
}
.box {
height: 100px;
100px;
background-color: #f980ff;
/*四个方向三个元素一起设置*/
/*border: 5px dashed red;*/
/*一个方向三个元素一起设置*/
/*border-top:5px dashed red;*/
/*border-bottom:10px dashed green;*/
/*border-left:15px dashed yellow;*/
/*border-right: 20px dashed purple;*/
/*一个元素一个方向的设置*/
/*border-left-style:solid;*/
/*一个元素四个方向同时设置*/
/*border- 5px;*/
/*border-color:red;*/
/*border-style: solid;*/
}
</style>
</head>
<body>
<div class="box">aaa</div>
</body>
制作三角形和圆形
三角形:
<head>
<meta charset="UTF-8">
<title>sanjiaxing</title>
<style>
.box{
0;
height: 0;
border:10px solid red;
border-left-color: transparent; #颜色的属性是透明
border-top-color: transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
圆形:
<head>
<meta charset="UTF-8">
<title>circle</title>
<style>
.circle{
100px;
height: 100px;
background-color: red;
/*边框变弧形*/
/*border-radius:50px ;*/
border-radius:50% ;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
3.margin(在标准文档流下)
左右的maigin是正常的:20+20
<head>
<meta charset="UTF-8">
<title>amrgin</title>
<style>
.aaa{
/*三原色:红绿蓝(0-255,0-255,0-25)*/
background-color: rgb(0,255,0);
margin-right:20px;
}
.bbb{
background-color: rgb(255,255,0);
margin-left:20px;
}
</style>
</head>
<body>
<span class="aaa">aaa</span><span class="bbb">bbb</span>
</body>
上下的magin会塌陷
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
*{
margin:0;
border: 0;
}
.aaa{
background-color: rgb(125,123,100);
margin-bottom: 20px;
}
.bbb{
background-color: rgb(100,5,230);
margin-top: 20px;
}
</style>
</head>
<body>
<div class="aaa">aaa</div><div class="bbb">bbb</div>
</body>
解决塌陷现象用浮动
<head>
<meta charset="UTF-8">
<title>amrgin</title>
<style>
.aaa{
/*三原色:红绿蓝(0-255,0-255,0-25)*/
background-color: rgb(0,255,0);
margin-right:20px;
float: left;
}
.bbb{
background-color: rgb(255,255,0);
margin-left:20px;
float: left;
}
</style>
</head>
<body>
<span class="aaa">aaa</span><span class="bbb">bbb</span>
</body>
二.display(在标准文档流下)
属性:
block 块级标签
独占一行
可以设置宽高,如果不设置,默认是父盒子宽度的100%
inline 行内标签
在一行内显示
不可以设置宽高,根据内容来显示宽高
inline-block 行内快
在一行内显示
可以设置宽高
none 不显示
不在文档上占位置
visibility:hidden 隐藏,不显示 在文档上占位置
例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aaa{
100px;
height: 100px;
background-color: red;
display:inline-block;
}
.bbb{
display: inline-block;
background-color: blue;
50px;
height: 50px;
}
div a{
display: block;
height: 100px;
100px;
}
img{
display: block;
height: 100px;
100px;
}
</style>
</head>
<body>
<div class="aaa">aaa</div><div class="aaa">aaa</div>
<span class="bbb">bbb</span>
<span class="bbb">bbb</span>
<div>
<a href="#"><img src="20180919203954.png" ></a>
</div>
</body>
三.浮动
float
属性值
none(默认的)
letf
right
浮动的作用:
是实现元素的并排显示
浮动的缺点:
不占位置
例:
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.son{
background-color: red;
100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
350px;
height: 150px;
}
</style>
</head>
<body>
<div class="father1">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father2"></div>
</body>
如何清除浮动:
1.给父盒子设置固定的高度
例:
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.son{
background-color: red;
100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
350px;
height: 150px;
}
.father1{
300px;
height: 100px;
}
</style>
</head>
<body>
<div class="father1">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father2"></div>
</body>
2.clear:both
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.son{
background-color: red;
100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
350px;
height: 150px;
}
.clearfix{
/*清除左右两边的浮动*/
clear:both;
/*清除左侧的浮动*/
clear:left;
/*清除右侧的浮动*/
clear:right;
}
</style>
</head>
<body>
<div class="father1">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<!--此处一般都用clearfix做类名-->
<div class="clearfix"></div>
</div>
<div class="father2"></div>
</body>
3.伪元素清除法
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.son{
background-color: red;
100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
350px;
height: 150px;
}
.clearfix:after{
content:'.';
display:block;;
height: 0;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<!--想给哪个类清除浮动,就在哪个类中加上clearfix这个类名-->
<div class="father1 clearfix">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father2"></div>
</body>
4.overflow: hidden
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.son{
background-color: red;
100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
350px;
height: 150px;
}
.father1{
/*只需要这一句*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="father1">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father2"></div>
</body>
5.要浮动一起浮动,有浮动清除浮动
6.浮动的效果:
(1)浮动起来盒子默认收缩
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
height: 600px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
(2)字为:盒子被盖住,字不会被盖住
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
300px;
height: 150px;
background-color: green;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
aasss
</div>
</body>