盒子模型:
margin:外边距
padding:内边距
border:边框
边框:
边框的粗细
边框的样式
边框的颜色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 8 <style> 9 10 /*h1,ul,li,a,body{ 都初始化*/ 11 /* !*body总有一个默认的外边距margin*!*/ 12 /* margin: 0;*/ 13 /* padding: 0;*/ 14 /* text-decoration: none;*/ 15 /*}*/ 16 /*border:粗细、样式、颜色*/ 17 /* 18 实线:solid 19 虚线:dashed 20 */ 21 #box{ 22 width: 300px; 23 border: 1px solid red; 24 25 } 26 h2{ 27 font-size: 16px; 28 background-color: #0093E9; 29 line-height: 30px; 30 color: green; 31 } 32 form{ 33 background: #3cbda6; 34 } 35 div:nth-of-type(1) input{ 36 border: 3px solid black; 37 } 38 div:nth-of-type(2) input{ 39 border: 3px dashed salmon; 40 } 41 div:nth-of-type(3) input{ 42 border: 2px dashed cadetblue; 43 } 44 45 </style> 46 </head> 47 <body> 48 49 <div id="box"> 50 <h2>会员登录</h2> 51 <form action="#"> 52 <div> 53 <span>用户名:</span> 54 <input type="text"> 55 </div> 56 <div> 57 <span>密码:</span> 58 <input type="text"> 59 </div> 60 <div> 61 <span>邮箱:</span> 62 <input type="text"> 63 </div> 64 </form> 65 </div> 66 67 </body> 68 </html>盒子模型
内外边距及div居中:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html><!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <meta charset="UTF-8"> 14 <title>Title</title> 15 16 17 <style> 18 /*margin 0(上下为0) auto(左右 居中对齐)*/ 19 20 #box{ 21 width: 300px; 22 border: 1px solid red; 23 margin:0 auto; 24 } 25 h2{ 26 font-size: 16px; 27 background-color: #0093E9; 28 line-height: 30px; 29 color: green; 30 } 31 form{ 32 background: #3cbda6; 33 } 34 input{ 35 border: 1px solid black; 36 } 37 38 </style> 39 </head> 40 <body> 41 42 <div id="box"> 43 <h2>会员登录</h2> 44 <form action="#"> 45 <div> 46 <span>用户名:</span> 47 <input type="text"> 48 </div> 49 <div> 50 <span>密码:</span> 51 <input type="text"> 52 </div> 53 <div> 54 <span>邮箱:</span> 55 <input type="text"> 56 </div> 57 </form> 58 </div> 59 60 </body> 61 </html>内外边距及div居中