一.盒模型的屬性
1.padding(用於父子之間調整位置)
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
*{
padding:0;
margin: 0;
}
.box{
height: 100px;
width: 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;
width: 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-width: 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{
width: 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{
width: 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{
width: 100px;
height: 100px;
background-color: red;
display:inline-block;
}
.bbb{
display: inline-block;
background-color: blue;
width: 50px;
height: 50px;
}
div a{
display: block;
height: 100px;
width: 100px;
}
img{
display: block;
height: 100px;
width: 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;
width: 100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
width: 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;
width: 100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
width: 350px;
height: 150px;
}
.father1{
width: 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;
width: 100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
width: 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;
width: 100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
width: 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;
width: 100px;
height: 100px;
float: left;
}
.father2{
background-color: blue;
width: 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{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 150px;
background-color: green;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
aasss
</div>
</body>