邊框?qū)傩?/h4>
什么邊框?
邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條
邊框?qū)傩缘母袷?/p>
連寫(同時(shí)設(shè)置四條邊)
border: 邊框的寬度 邊框的樣式 邊框的顏色;
示例代碼
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 5px solid blue;
/*border: 5px solid;*/
/*border: 5px blue;*/
/*border: solid blue;*/
}
</style>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;
}
</style>
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
border-color: blue green purple pink;
/*border-color: blue green purple;*/
/*border-color: blue green;*/
/*border-color: blue;*/
}
</style>
注意點(diǎn):
這三個(gè)屬性的取值是按照順時(shí)針來賦值, 也就是按照上右下左來賦值, 而不是按照日常生活中的上下左右
內(nèi)邊距屬性
什么是內(nèi)邊距?
邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式
單獨(dú)設(shè)置四條邊
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
示例代碼
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
</style>
同時(shí)設(shè)置四條邊
padding: 上 右 下 左;
示例代碼
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style>
外邊距屬性
什么是外邊距?
標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式
-
單獨(dú)設(shè)置四條邊
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
示例代碼
<style>
.box1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
</style>
-
注意點(diǎn):
外邊距的那一部分是沒有背景顏色的
外邊距合并現(xiàn)象
默認(rèn)布局的垂直方向上外邊距是不會(huì)疊加的, 會(huì)出現(xiàn)合并現(xiàn)象, 誰的外邊距比較大就聽誰的
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外邊距合并現(xiàn)象</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
.hezi1{
margin-right:50px;
}
.hezi2{
margin-left:100px;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:100px;
}
</style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
什么邊框?
邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條
邊框?qū)傩缘母袷?/p>
連寫(同時(shí)設(shè)置四條邊)
border: 邊框的寬度 邊框的樣式 邊框的顏色;
示例代碼
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 5px solid blue;
/*border: 5px solid;*/
/*border: 5px blue;*/
/*border: solid blue;*/
}
</style>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;
}
</style>
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
border-color: blue green purple pink;
/*border-color: blue green purple;*/
/*border-color: blue green;*/
/*border-color: blue;*/
}
</style>
注意點(diǎn):
這三個(gè)屬性的取值是按照順時(shí)針來賦值, 也就是按照上右下左來賦值, 而不是按照日常生活中的上下左右
什么是內(nèi)邊距?
邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式
單獨(dú)設(shè)置四條邊
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
示例代碼
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
</style>
同時(shí)設(shè)置四條邊
padding: 上 右 下 左;
示例代碼
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style>
什么是外邊距?
標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式
單獨(dú)設(shè)置四條邊
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
示例代碼
<style>
.box1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
</style>
注意點(diǎn):
外邊距的那一部分是沒有背景顏色的
外邊距合并現(xiàn)象
默認(rèn)布局的垂直方向上外邊距是不會(huì)疊加的, 會(huì)出現(xiàn)合并現(xiàn)象, 誰的外邊距比較大就聽誰的
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外邊距合并現(xiàn)象</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
.hezi1{
margin-right:50px;
}
.hezi2{
margin-left:100px;
}
.box1{
margin-bottom:50px;
}
.box2{
margin-top:100px;
}
</style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
