CSS浮动布局&盒模型
1、什么是浮动？
浮动就是让块级标签不独占一行 目的：把块级标签可以排在一行上 float：left/right/none
2、浮动原理
让元素脱离文档流，不占用标准流
3、浮动后，后面的元素不管是块级还是行级元素，不会显示到下一行
4、清除浮动
目的：让后面的元素自动掉到下一行
方法：
-
添加空标签，并设置样式：color：both clear:left clear:right clear:none #清除左右浮动 clear:both
-
在要清除浮动的父级添加样式：overflow：hidden; (常用) overflow:hidden; #超出部分隐藏，也可以用来实现清除浮动
-
在要清除浮动的父级添加伪元素，并设定样式： 父元素：after{ content:""; display:block; clear:both; }
5、CSS盒子模型
每个元素都是一个盒子 一个盒子由margin（外边距）,border（边框）,padding（内边距）和content（内容）组成 区别内外边距是以border（边框）为参照 系统默认外边距(margin)为8px
-
margin（外边距）：指元素边距线之外的距离 margin-left：左边距 margin-right：右边距 margin-top：上边距 margin-bottom：下边距 margin：可用来设置任意一个边的距离，可以带1个至4个参数 1个参数(apx)：表示上下左右都有设为apx的外边距 2个参数(apx bpx)：表示上下边距为apx，左右边距为bpx 3个参数(apx bpx cpx)：表示上边距为apx，下边距为cpx，左右边距为bpx 4个参数(apx bpx cpx dpx)：表示上边距为apx，右边距为bpx，下边距为cpx，左边距为dpx
-
padding（内边距）：指元素的文本内容与边框之间的距离 与margin用法一样
-
border(边框) border-width：边框线宽度 border-style：边框线样式 border-color：边框线颜色 复合写法： border: border-width border-style border-color 注意：border-width border-style border-color 三个参数没有位置之分
6、盒子的真实尺寸
盒子的宽度=width + padding左右 + border左右 盒子的高度=height + padding上下 + border上下
7、display属性
display属性用来设置元素的显示方式
属性值：
-
none：不显示元素
-
block：块显示，在元素前后设置换行符 目的：将行标签设置为块级标签
-
inline：行内显示 目的：将块级标签转换为行级标签，同时删除换行符
-
inline-block：将块级或行级标签 转换为行内块级标签
8、table样式
table一般不要来布局，主要用来格式化数据