1、设置内边距
padding
如果设置4个值：上右下左
设置3个值：上、左右、下
设置2个值：上下、左右
设置1个值：上下左右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
border: 2px solid red;
padding-top: 20%;
padding-right: 20px;
padding-bottom: 50px;
padding-left: 20px;
}
</style>
</head>
<body>
<P>没有边框</P>
</body>
</html>
2、设置外边距
margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
border: 2px solid red;
margin-top: 50px;
}
</style>
</head>
<body>
<P>没有边框</P>
</body>
</html>
讲margin的值设置为auto就可以实现在其父元素内水平居中的效果
3、margin塌陷，嵌套塌陷
4、如何设置元素的尺寸
-
width
-
height
-
box-sizing
box-sizing的值如果是border-box，那么width和height的值包括pa'dding和border的指定。
-
min-width、max-width
设置元素的最小最大尺寸，这里注意下，对p元素设置尺寸时，如果用width、来设置，那么浏览器的尺寸小于p的尺寸的话，内容会显示不全，但如果用max-width来设置的话，内容会自动适配。
-
overflow
值为auto，让浏览器自行决定如何处理溢出的内容
值为hidden，裁掉溢出的内容
值为scroll，添加滚动条（不溢出的也会添加滚动条）
值为visible，不管是否溢出，显示所有内容（默认）
-
overflow-x、overflow-y
控制水平方向或垂直方向的溢出处理方式
-
resize
当overflow被设置为auto、hidden、scroll的时候，还可以设置resize的属性，用于决定是否由用户来调整元素的尺寸
值为none，默认值，不允许用户调整元素的尺寸
值为both，同时允许用户调整元素的宽和高
值为horizontal，仅允许用户调整元素的宽
值为vertical，仅允许用户调整元素的高
轮廓（outline）
outline-style：设置轮廓的样式
outline-color：设置轮廓的颜色
outline-width：设置轮廓的宽度
outline-offset：设置轮廓距离元素边框的一个偏移量
轮廓并不属于元素尺寸的一部分，他不会影响到原有的页面布局
轮廓一直都是方的
阴影：
box-shadow
有以下属性：
hoffset：阴影的水平偏移量，正数代表向右偏移；负数代表向左偏移
voffset：阴影的垂直偏移量，正数代表向下偏移；负数代表向上偏移
blur：（可选）模糊值，值越大边界越模糊
spread：（可选）阴影的延伸半径
color：（可选）阴影的颜色
inset：（可选）如果填写该值，表示使用内部阴
如果需要为同一个元素应用多种阴影效果，可以用逗号分隔阴影效果
阴影形状和边框是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
margin-top: 200px;
margin-left: 300px;
border: 2px solid red;
500px;
height: 50px;
box-shadow: 5px 5px 6px 10px black ;
}
</style>
</head>
<body>
<P>没有边框</P>
</body>
</html>