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 }
