div是什么
div 可定义文档中的分区（division），div 标签可以把网页分割为独立的、不同的部分，不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class，然后通过css选中某个div，对其进行样式美化。
大概就这样，可以把整个网页分成不同的部分。
每个div可以看成一个盒子
一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：
width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border
height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border
padding：内边距
border：边框
margin：外边距
元素宽高
width：宽度
height：高度
width:xxpx height:xxpx
样例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: cadetblue; } </style> </head> <body> <div>牛哄哄的柯南</div> </body> </html>
效果截图：
边框
边框颜色
| 属性 | 说明 |
示例 |
| border-top-color | 上边框颜色 | border-top-color:#369 |
| border-right-color | 右边框颜色 | border-right-color:#369 |
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b |
| border-left-color | 左边框颜色 | border-left-color:#efcd56 |
| border-color | 四个边框为同一颜色 | border-color:#eeff34 |
| border-color | 上、下边框颜色：#369 左、右边框颜色：#000 | border-color:#369 #000 |
| border-color | 上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 | border-color:#369 #000 #f00 |
| border-color | 上、右、下、左边框颜色：#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f |
边框粗细
border-width:像素值
border-width:5px
边框样式
border: solid;
样例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: cadetblue; border: solid; border-width: 5px; border-color:#369 #000 #f00 #00f; } </style> </head> <body> <div>牛哄哄的柯南</div> </body> </html>
效果截图：
边距
盒子模型总尺寸=border-width+padding+margin+内容宽度
内边距
内边距(padding-top 、left、right、bottom)
检索或设置对象四边的内部边距。
注意：
内联对象可以使用该属性设置左、右两边的内补丁。
若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。
对应的脚本特性为padding。
外边距
外边距(margin-top 、left、right、bottom)
注意：
内联对象可以使用该属性设置左、右两边的外补丁。
若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。
对应的脚本特性为margin。
外边距的妙用
网页居中对齐
前提：居中对齐的网页元素必须设定宽度
margin:0px auto;
1
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .d1{ width: 200px; height: 200px; background-color: cadetblue; border: solid; border-width: 5px; border-color:#369 #000 #f00 #00f; margin-top: 10px; margin-right: 20px; padding-top: 10px; } .d2{ width: 200px; height: 200px; background-color: cadetblue; border: solid; border-width: 5px; border-color: #f00 #00f #369 #000; margin-top: 10px; padding-top: 10px; padding-left: 30px; } </style> <title></title> </head> <body> <div class="d1">牛哄哄的柯南</div> <div class="d2">Keaf</div> </body> </html>
效果截图：
不加边距的效果截图：
从上面的对比可以看出来内边距和外边距的作用了
内边距可以把div变大
外边距可以使div移动位置
display属性
设置为none 不显示
块级元素(block)，可以设置宽高，行内元素(inline)不可以设置宽高
如果想对行内元素设置宽高，可以把元素变为行内块级元素(inline-block)
主要应用就是我们可以利用display: inline-block来使两个div块在一行显示
不写display: inline-block;
样例代码1：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .blockdiv{ /* display: inline-block; */ border: solid 1px red; width: 200px; height: 100px; } </style> <title></title> </head> <body> <div class="blockdiv">块1 </div><div class="blockdiv">块2 </div> </body> </html>
效果截图1：
加上display: inline-block;
样例代码2：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .blockdiv{ display: inline-block; border: solid 1px red; width: 200px; height: 100px; } </style> <title></title> </head> <body> <div class="blockdiv">块1 </div><div class="blockdiv">块2 </div> </body> </html>
效果截图2：
