CSS浮动布局&盒模型
1、浮动：float,是块级标签不独占一行，让块级标签的元素可以在同一排
left：向左浮动 right:向右浮动 none:默认值，元素不浮动显示在文本出现的位置 inherit:规定应该从父元素继承float的属性；
.box1{
background-color: dodgerblue;
float: left;
<div class="box1">box1</div>
2、原理：就是让元素脱离文档流，不占用标准流
3、浮动后，不论是会级还是行级元素，都不会独占一行
4、清除浮动；让后面的元素可以掉到后面一行
方法：添加空标签 并设置样式：clear:both;
.clear{
clear: both;
clear:left;清除左浮动
clear:right;清除右浮动
clear:both;左右都清除
clear:none;都不清除
overflow属性：在要清除浮动的父级添加这个样式；(实际中首选)
<style>
.hai{
border: 1px solid palevioletred;
width: 600px;
margin: 0 auto;
overflow: hidden;
?
}
</style>
属性值：hidden:清除塌陷的功能；
auto:不超出的内容不剪切，按是否超出做清除浮动；
scorll:内容会被修剪，但是浏览器会以滚动条以便查看；
使用after：添加伪元素,并设定样式；
.hai:after{
content: ""; //content必须要写，但是后面不加东西；
display: block;
clear: both;
}
盒子模式：
每个元素都是一个盒子；一个盒子由外边距（margin）,border(边框线)，padding(外边距)和 content（内容）；
内外边距以边框为参照；
系统默认外边距为8px;
1、外边距指的是边框线之外的距离 ；margin/margin-left/margin-right/margin-bottom/margin-top 可以设置任意一个边距，可以带1-4个
1个：上下左右有外边距 2个：表示上下外边距，左右外边距
3个：上边距 左右边距 下边距
四个：上 右 下 左边距
内边距：padding:元素文本内容与边框的距离，用法与margin一样
边框：border:none 无边框 solid :实线边框
double:双实线边框 dotted:点状线边框 dashed:虚线边框
display:
用来设置元素的显示方式；
none:不显示元素；
block：块显示，在元素前后设置一个换行符（行级标签转化为块级标签），行级不能设置行高，转换后可以设置宽高
lnline:行内显示，将块级标签转换为行级标签
lnline-block:将块级标签转换为行内级标签
CSS table样式
table:一般不用来布局，主要用来格式化数据。
属性： width; height:
border-collapse:collapse 单线边框 border:边框线
tr,td: width; height: border:边框线 text-align:文本对齐(默认left)
vertical-align:文本垂直对齐（top\middle(默认)/bottom）
列表
不是表述性的内容都可以看成列表：菜单，商品列表等
ol和ul都是用li表示，而dl是由一个dt和一个或多个dd组成
dl一般用来设定一个定义，比如名称解释：dt:标题 dd:描述，对dt的内容进行解释说明。
2、样式：(修改表示类型)
list-style-image;图像
list-style-position:标识的位置
list-style-type:标识的类型
简写：list-style:list-style-image list-style-position list-style-type
list-style-type的属性值：
可以按任意的顺序列出：可以任意省略，只要提供一个值其他都是默认值
无序： disc/circle/square
有序： decimal(数字)/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/lower-greek(希腊字母)/lower-latin(小写拉丁 ；大写就是upper)
有序和无序：none(取消标识符)