盒子阴影
box-shadow 设置元素的阴影效果，不会影响到页面的布局
参数：
1:水平偏移量 可正可负 必填
2:垂直偏移量 可正可负 比填
3:模糊半径 可填
4:颜色 一般用rgba
div｛ box-shadow: 3px 3px 5px rgba( 0,0,0,.5);｝
p｛box-shadow: -3px -3px 5px rgba( 0,0,0,.5);｝圆角
border-radius: 设置圆角 可设四个值 从左上角开始顺时针排列
border-radius: 50%; 设置圆形
div｛border-radius: 10px 20px 30px 40px;｝
p｛ border-radius: 5% 10% 15% 20%;｝定位
-更加高级布局手段
-定位指的是将指定的元素，摆放在页面任意位置，
通过定位，我们可以任意摆放元素
-通过position属性设置元素的定义
可选值：
static 默认值，元素没有开启定位
relative 开启元素的相对定位
absolute 开启元素绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
水平布局属性
left margin-left border-left padding-left width padding-right border-right margin-right right
-当开启定位后，水平方向的布局等式就会加上left，right两个值
此时规则是一样，九个值相加，必须等于其父元素的宽度
—当发生过度约束的时候
1:如果9个值中没有auto，则自动调整right的值以使等式满足
如果有auto就会调整auto，让等式满足
2:9个值，可设auto，是margin，width，left，right
3:left和right的值默认是auto，所以如果不设置这两个值，等式不满足的时候
会自动调整这两个值
偏移量
当元素开启了定位，可以通过left，right，top ，bottom四个属性来设置元素的偏移量
属性值越大，元素向相反方向移动越远
left：元素相对于其定位位置的左侧偏移量
right 元素相对于其定位位置的右侧偏移量
top 元素相对于其定位位置的上侧偏移量
bottom 元素相对于其定位位置的下边偏移量
1、相对定位
一般情况下水平方向一个偏移量，垂直方向一个偏移量，为我们的元素定位
当元素的position属性值设置relative，则开启了元素相对定位
1:当开启相对定位后，如果不设置偏移量，元素不会发生任何变化
2:相对定位是相对于元素在文档流中原来的位置进行定位（top：0，left：0）
3:相对定位，不会使元素脱离文档流
4:相对定位，会使我们元素的等级提升
5:相对定位不会改变元素的性质，块还是块，行内还是行内
<body>
<div>
div
<p> p</p>
</div>
</body>div {
width: 200px;
height: 200px;
margin: 50px 30px 0 500px;
text-align: center;
border: 1px solid black;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}
p {
width: 100px;
height: 100px;
background-color: aquamarine;
text-align: center;
border: 1px solid black;
box-shadow: -3px -3px 5px rgba(0, 0, 0, .5);
/* 相对定位 */
position: relative;
top: 50px;
left: 50px;
}2、绝对定位
包含块
-正常情况下：离当前元素最近的祖先元素
-定位情况下
离他最近的开启了定位的祖先元素（包含父元素）
如果所有的祖先元素，都没有开启定位，则会相对于浏览器窗口进行定位
也就是html
当position属性值设置为absolute时，则开启了元素的绝对定位
1:会使元素脱离文档流
2：如果不设置偏移量，则元素的位置不会发生改变
3:绝对定位是相对于离它最近的包含块定位,
(一般情况，开启了子元素的绝对定位，都会开启父元素的相对定位 “父相子绝”
4:绝对定位也会使我们元素提升一个等级
5:绝对定位会改变元素的性质，内联元素变块元素，块元素的宽高默认会被内容撑开
div {
width: 200px;
height: 200px;
margin: 50px 30px 0 500px;
text-align: center;
border: 1px solid black;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}
p {
width: 100px;
height: 100px;
background-color: aquamarine;
text-align: center;
border: 1px solid black;
box-shadow: -3px -3px 5px rgba(0, 0, 0, .5);
/* 相对定位 */
position: absolute;
top: 50px;
left: 50px;
}
div {
width: 200px;
height: 200px;
margin: 50px 30px 0 500px;
text-align: center;
border: 1px solid black;
box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
/* 开启相对定位 */
position: relative;
}
p {
width: 100px;
height: 100px;
background-color: aquamarine;
text-align: center;
border: 1px solid black;
box-shadow: -3px -3px 5px rgba(0, 0, 0, .5);
/* 相对定位 */
position: absolute;
top: 50px;
left: 50px;
}
3、固定定位
当元素的position属性设置为fixed时，则开启了元素的固定定位
开启固定定位的特点（类似绝对定位）
1:会脱离文档流
2:会固定在浏览器视口某个位置，不会随滚动条滚动
3:固定定位永远会相对于浏览器的视口进行定位
4、粘滞定位
粘滞定位
1：给元素position属性开启sticky属性值，则开启了元素粘滞定位
2：需要配合top，或者bottom来使用
3：它以浏览器位参照物
会占有原来的位置，类似相对定位
4：设置top值后，没有达到top值，则会正常显示，达到了，就类似固定定位
注意的是粘滞定位，兼容性没有其他定位好
