- 边框 border
- border-top-style: solid; 实线
dotted; 点绩
dashed; 虚线
-
- border-top-color 边框颜色
- border-top-width 边框宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 400px; background: #999; border-top-style: solid; border-top-color: red; border-top-width: 5px; border-bottom-style: dashed; border-bottom-color: green; border-bottom-width: 10px; } </style> </head> <body> <div class="box">AAAAA</div> </body> </html>
- 边框的连写属性: 没有顺序要求, 线型为必写项
- border-top: 5px solid red;
- 边框合并 border-collapse: collapse;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ width: 300px; height: 500px; border: 1px solid red; /*边框合并*/ border-collapse: collapse; } td{ border: 1px solid red; text-align: center; } </style> </head> <body> <table cellspacing="0"> <tr> <td>一</td> <td>二</td> <td>三</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
- 获取焦点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .username{ /*去掉默认边框*/ border: 0 none; /*去掉选中时边框的状态*/ outline-style: none; background: #ccc; border: 1px dashed green; }
.username:foucs{
background: red;
}
</style> </head> <body> </body> </html>
- 获取光标焦点 label for id
<babel for="username">用户名:</label> <input type="text" class="username" id="username"> <br><br>
- 内边距 padding
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ /* padding-left: 20px; padding-right: 30px; padding-top: 40px; padding-bottom: 40px;*/ width: 500px; height: 300px; background: red; /* 上 下 左 右 各20px */ padding: 20px; /* 上 下 20px, 左 右 30px */ padding: 20px 30px; /* 上 20px, 左 右 30px, 下 10px */ padding: 20px 30px 10px; /* 上 右 下 左 */ padding: 20px 30 10px 50px; } </style> </head> <body> <div class="box">AAAAA</div> </body> </html>
-
- 内边距撑大盒子的问题
- 内边距影响盒子的宽度
- 边框影响盒子的宽度
- 盒子宽度 = 定义的宽度 + 边框宽度 + 左右内边距
- 继承的盒子一般不舍被撑大
- 内边距撑大盒子的问题
- 外边距 padding
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background: 4000px; margin-left: 30px; margin-right: 30px; margin-top: 40px; margin-bottom: 50px; // 外边距的连写属性 margin: 20px 30px 40px, 50px; } </style> </head> <body> <div class="box">AAAAA</div>
</body> </html>
- 外边距 padding
- 垂直方向外边距合并
- 两个盒子垂直, 一个设置上外边距, 一个设置下外边距, 取得设置较大
- 嵌套的盒子外边距塌陷
- 给父盒子设置边框
- 给父盒子 overflew: hidden;
- 垂直方向外边距合并