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