1.边框（border）
常用表达
border-width px
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
border-style dotted定义点状边框。在大多数浏览器中呈现为实线。 solid定义实线。 double定义双线。双线的宽度等于 border-width 的值。 groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
border-color
| color_name | 规定颜色值为颜色名称的边框颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认值。边框颜色为透明。 |
| inherit | 规定应该从父元素继承边框颜色。 |
| border | 在一个声明中设置所有的边框属性。 | 1 |
| border-bottom | 在一个声明中设置所有的下边框属性。 | 1 |
| border-bottom-color | 设置下边框的颜色。 | 2 |
| border-bottom-style | 设置下边框的样式。 | 2 |
| border-bottom-width | 设置下边框的宽度。 | 1 |
| border-color | 设置四条边框的颜色。 | 1 |
| border-left | 在一个声明中设置所有的左边框属性。 | 1 |
| border-left-color | 设置左边框的颜色。 | 2 |
| border-left-style | 设置左边框的样式。 | 2 |
| border-left-width | 设置左边框的宽度。 | 1 |
| border-right | 在一个声明中设置所有的右边框属性。 | 1 |
| border-right-color | 设置右边框的颜色。 | 2 |
| border-right-style | 设置右边框的样式。 | 2 |
| border-right-width | 设置右边框的宽度。 | 1 |
| border-style | 设置四条边框的样式。 | 1 |
| border-top | 在一个声明中设置所有的上边框属性。 | 1 |
| border-top-color | 设置上边框的颜色。 | 2 |
| border-top-style | 设置上边框的样式。 | 2 |
| border-top-width | 设置上边框的宽度。 | 1 |
| border-width | 设置四条边框的宽度。 | 1 |
例1：
1 <html> 2 <head> 3 <title>div.1</title> 4 <style type="text/css"> 5 div{width:500px;height:300px;background-color:#eee; 6 border-bottom-width:5px; 7 border-bottom-style:dotted; 8 border-bottom-color:red; 9 10 border-left-width:10px; 11 border-left-style:dotted; 12 border-left-color:green; 13 14 border-top-width:20px; 15 border-top-style:dotted; 16 border-top-color:red; 17 18 border-right-width:30px; 19 border-right-style:dotted; 20 border-right-color:blue; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 asdfghjkl 27 </div> 28 </body> 29 30 </html>
例2:
1 <html> 2 <head> 3 <title>div.2</title> 4 <style type="text/css"> 5 .class1{width:500px;height:300px;line-height:300px; 6 color:blue;font-size:30px;background-color:red; 7 border:15px solid green; 8 text-align:center; 9 } 10 .class2{width:400px;height:400px;line-height:400px; 11 background-color:#aaa; 12 color:red;font-size:40;px;text-align:center; 13 border:20px dotted blue; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="class1"> 19 asdfghjkl 20 </div> 21 <div class="class2"> 22 sdnhfajkhfjksdhfu 23 </div> 24 </body> 25 26 </html>
例3：
1 <html> 2 <head> 3 <title>div</title> 4 <style type="text/css"> 5 div{width:500px;height:300px;background-color:#eee; 6 border-bottom-width:5px; 7 border-bottom-style:solid; 8 border-bottom-color:red; 9 10 border-left-width:10px; 11 border-left-style:solid; 12 border-left-color:green; 13 14 border-top-width:20px; 15 border-top-style:solid; 16 border-top-color:red; 17 18 border-right-width:30px; 19 border-right-style:solid; 20 border-right-color:blue; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 asdfghjkl 27 </div> 28 </body> 29 30 </html>
2.div
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。