1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <p id="p1">中国</p> 10 <p id="p2">黄山</p> 11 <p id="p3">北京</p> 12 <p id="p4">上海</p> 13 <p id="p5">外边距合并上</p> 14 <p id="p6">外边距合并下</p> 15 <div> 16 愿上苍保佑你的善良和真诚，愿我们常相聚，相遇是最美好的事。感谢上苍让我们在人生之中相遇，无论是擦肩而过，还是相扶相持，都十分珍贵，永远珍惜这份美好吧。 17 </div> 18 <div id="div2"> 19 愿上苍保佑你的善良和真诚，愿我们常相聚，相遇是最美好的事。感谢上苍让我们在人生之中相遇，无论是擦肩而过，还是相扶相持，都十分珍贵，永远珍惜这份美好吧。 20 </div> 21 </body> 22 </body> 23 </html>
1 #p1{ 2 border-width: 3px; 3 border-style: double; 4 /*background: red;*/ 5 padding-top: 10px; 6 padding-left: 10px; 7 padding-bottom: 10px; 8 padding-right: 10px;/*此上下左右四个属性值也可设百分比，但不可为负值*/ 9 } 10 #p2{ 11 text-align: right; 12 border: 1px solid yellow;/*可以使用border同时设置边框多个属性值*/ 13 margin-top: 20px; 14 } 15 #p4{ 16 text-align: right; 17 border-width: 1px; 18 border-style: dotted; 19 border-color: blue; 20 } 21 #p3,#p4{ 22 /*background: green;*/ 23 /* padding: 10px;*//*同时设置四个内边距*/ 24 /*padding: 10px 20px;*//*分别设置上下、左右内边距*/ 25 /*padding: 10px 20px 30px;*//*分别设置上、左右、下内边距*/ 26 padding: 10px 30px 50px 70px;/*分别设置上、右、下、左四个内边距*//*外边距margin也有类似内边距padding的设置方式。*/ 27 } 28 #p5{ 29 background: pink; 30 } 31 #p6{ 32 background: orange; 33 } 34 div{ 35 background: #654456; 36 width: 200px; 37 height: 200px; 38 /*overflow: auto;*//*visible不裁剪内容，可能会显示在内容框之外；hidden裁剪内容，无滚动；scroll有滚动条；auto超出时才有滚动*/ 39 overflow-x: scroll;/*overflow-x底部加滚动条，可配合white-space属性的nowrap值一起使用；overflow-y右边加滚动条。*/ 40 } 41 #div2{ 42 white-space: nowrap; 43 overflow: hidden; 44 text-overflow: ellipsis;/*clip为默认值可省；ellipsis为溢出时显示省略号*/ 45 }