1.border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:0px;
height:0px;
/*background: url("img/1.jpg") no-repeat;*/
/*border:10px solid yellow;*/
/*border-top-width:100px;
border-right-width:120px;
border-bottom-width:140px;
border-left-width:150px;
border-style:solid;
border-color: green;*/
/*border: 10px dotted #A100F9;*/
/*border-top:100px solid red;
border-right:100px solid yellow;
border-bottom: 100px solid green;
border-left:100px solid transparent;
border-radius: 10px;*/
border-top:100px solid #ccc;
border-right:100px solid transparent;
border-bottom:100px solid #ccc;
border-left:100px solid #ccc;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<!--
border 邊框
複合寫法
border: border-width border-style border-color;
border-width 邊框寬度
border-style 邊框樣式 solid 實線 dashed 虛線 dotted 點線 （點線IE6不認）
border-color 邊框顏色 英文單詞 十六進制 rgb
border-radius 圓角
透明 transparent
-->
</body>
</html>
2.padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
border:1px solid red;
/*padding-top:20px;
padding-right:40px;
padding-bottom: 60px;
padding-left:80px;*/
padding:10px 20px 40px 80px;
}
</style>
</head>
<body>
<div>藍鷗科技</div>
<!--
padding 內邊距 內填充
padding-top 上內邊距
padding-right 右內邊距
padding-bottom 下內邊距
padding-left 左內邊距
padding的複合寫法
padding:10px; 一個值代表 上右下左都是10px
padding:10px 20px; 兩個值 第一個值代表上下 第二個值代表左右
padding:10px 20px 40px; 三個值 第一個值代表上 第二個值代表左右 第三個值代表下
padding:10px 20px 40px 80px; 4個值 第一個值代表上 第二個值代表右 第三個值代表下 第四個值代表左
-->
</body>
</html>
3.padding的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:466px;
height:383px;
border:10px solid #C6D8F0;
border-radius: 10px;
padding:10px 40px 80px 160px;
}
</style>
</head>
<body>
<div>
<img src="img/2.jpg" alt="">
</div>
</body>
</html>
4.空間大小的問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
height:100px;
background: red;
border:10px solid blue;
padding:33px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
height:100px;
background: red;
margin:50px 100px 150px 200px;
}
</style>
</head>
<body>
<div></div>
<!--
margin 外邊距
margin-top 上外邊距
margin-right 右外邊距
margin-bottom 下外邊距
margin-left 左外邊距
margin的複合寫法
margin:10px; 一個值代表 上右下左都是10px
margin:10px 20px; 兩個值 第一個值代表上下 第二個值代表左右
margin:10px 20px 40px; 三個值 第一個值代表上 第二個值代表左右 第三個值代表下
margin:10px 20px 40px 80px; 4個值 第一個值代表上 第二個值代表右 第三個值代表下 第四個值代表左
-->
</body>
</html>
6.margin的小性子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
width:300px;
background: red;
/*border:1px solid #000;*/
/*overflow:hidden;*/
/*padding-top:100px;*/
}
#box2 {
width:300px;
height:200px;
background: yellow;
/*margin-top: 100px;*/
margin-bottom: 30px;
}
#box3 {
width:300px;
height:200px;
background: blue;
margin-top:30px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
<div id="box3"></div>
</div>
<!-- 標籤的嵌套 確定父子級關係
1. 第一個子級的margin-top會在特定的情況下穿透父級
規避方法：
1.給父級加邊框
2.給父級加overflow:hidden;
3.不要用margin-top，父級的padding-top代替
2. 兄弟關係的margin-top和margin-bottom 會疊壓
-->
</body>
</html>
7.盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
width:100px;
height:100px;
border:10px solid red;
padding:40px;
margin:30px;
}*/
div {
width: 154px;
height:35px;
border:4px solid red;
padding:28px;
margin:12px;
}
</style>
</head>
<body>
<div></div>
<!--
盒模型
空間大小 ：
盒子的總寬度 ： border-left + padding-left + width + padding-right + border-right
盒子的總高度 ： border-top + padding-top + height + padding-bottom + border-bottom
位置
margin
-->
</body>
</html>
盒模型
