盒子大小（box-sizing属性）

image.png

轮廓（outline）

outline的用法和border的用法类似

image.png

二者的区别：border会影响可见框的大小，而outline不会影响可见框的大小

阴影（box-shadow）

image.png

第一个值：水平偏移量，设置阴影的水平位置 正值向右移动，负值向左移动。
第二个值：垂直偏移量，设置阴影的垂直位置 正值向下移动，负值向上移动。
第三个值：阴影的模糊半径（模糊程度）。
第四个值：阴影的颜色。

圆角（border-radius）

image.png
image.png

浮动（重要！！）

image.png

Tips：改变浮动的顺序只能改变html中的顺序

浮动的特点

1.浮动就是脱离了文档流，所以浮动的特点也就是元素脱离文档流的特点。

image.png

2.浮动元素不会盖住文字，文字会自动环绕在元素的周围，所以我们可以利用浮动设置文字环绕图片的效果