计算盒子大小的方式
1.默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。
-box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）。
-可选值：
- content-box （默认值）宽度和高度用来设置内容区的大小。
-border-box 宽度和高度用来设置整个盒子可见框的大小。
轮廓阴影和圆角
1.outline用来设置元素的轮廓线，用法和border一模一样。
-轮廓和边框不同的点就是轮廓不会影响到可见框的大小。
2.box-shadow用来设置元素的阴影效果，，阴影效果不会影响页面布局。
-box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 颜色;
3.border-radius用设置圆角。
-圆角是设置圆的半径大小。
-分别指定：
-四个值 ： 左上 右上 右下 左下
-三个值： 左上 右上/左下 右下
-两个值： 左上/右下 右上/左下
-一个值： 全部
-椭圆设置：border-radius：20px / 40px
-将元素设置圆形：border-radius: 50%;
-单独设置border-方向(top或bottom)-方向(left或right)-radius
浮动
1.浮动：通过一个元素向其父元素的左侧或右侧移动。
-使用float 属性设置于元素的浮动。
-可选值
-none 默认值，元素不浮动
-left 元素向左浮动
-right 元素向右浮动
-注意：元素设置浮动以后，水平布局的等式便不需要强制成立。
2.元素设置浮动后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的还在文档流中的元素会完全自动向上移动。
-特点：
-浮动元素会完全脱离文档流，不在占据文档流中的位置。
-设置浮动以后元素会向父元素的左侧或右侧移动。
-浮动元素默认不会从父元素中移出。
-浮动元素向左或向右移动时，不会超过它前边的其它浮动元素。
-浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。
-浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高
3.简单总结：浮动主要作用是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
4.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以用来利用浮动来设置文字环绕图片的效果。
5.脱离文档流特点
-块元素：
-块元素不在独占页面的一行。
-块元素的宽度和高度默认被内容撑开。
-行内元素：
-行内元素脱离文档流以后会变为块元素，特点和块元素一样。
-脱离文档流，不需要再区分块和行内。
学识浅薄，如有错误，恳请斧正，在下不胜感激。