table布局：缺陷是兼容性差，加载速度慢
div+css布局
div：组合标签，典型的块级标签,division(区域)，理解为一个盒子
css:cascading style sheet 层叠样式表.css的作用用来给html标签
一些属性的美化修饰
css的语法：在html标签的开头<标签名 style="属性名:属性值;属性:属性值;">
一个标签可以被多个css属性修饰
<无尽 style="攻击：80;暴击:20%; ....">
css属性和标签本身的属性的区别
标签自带的属性只有部分，这些标签称为固有属性 属性名=属性值
css属性的语法必须写style或者用选择器
css的常用属性:
以像素为单位设置宽度或者百分比(以父级标签的宽度算)
height:以像素为单位设置高度或者百分比(以父级标签的高度算)
以上两者都可以设置auto
边框属性
border:缩写形式 可以同时设置元素的边框的大小 颜色 样式
border-color:边框的颜色
border-style:边框的线条样式 solid实线 dashed虚线 dotted圆点
border-边框的粗细
border默认把四条边全部修饰，也可以只设置单边
border-方向(top,bottom,left,right)
border-radius:设置圆角的弧度
或者border-top(bottom)-left(right)-radius:设置单个角的弧度
box-shadow:水平移动位置 垂直的位置 模糊度 颜色 [inset]
位置：水平位置正数往右移动，垂直正数往下
背景属性
background:可以表达某一个属性或者同时设置多个背景属性
background:颜色 url(路径) repeat position;
background-color:背景颜色
background-image:背景图片 url(图片路径)
background-repeat:背景图片的平铺方式 no-repeat repeat-x repeat-y
background-position:背景图的偏移位置,指背景图在容器中按照水平
和垂直方向移动 x正往右 y正往下
background-size:背景图片的大小 :宽度 高度
文本修饰
color:修饰标签内的文本颜色
font:缩写 文字大小 文字风格 文字加粗
font-weight:文字的加粗，bold表示加粗
font-size :文字的大小，默认文字大小16px
font-family:字体风格，例如：隶书，楷书，微软雅黑
text-indent:设置文本的首行缩进
text-align:设置文本的水平对齐方式left,center,right
text-decoration:设置文本的修饰，可以添加或者去除下划线等
letter-spacing:设置文本字符之间的间距
line-height:设置文本的行高，通常用来做文本在标签中垂直居中的效果
当行高和高度一致时垂直居中
边距属性
外边距:margin,外边距让标签进行移动距离某个方向产生一个间
距
margin:20px 表示为距离四个方向都产生20px距离
margin:20px 40px 表示上下20px 左右40px
margin:20px 40px 60px 20上 40左右 60下
margin:10 20 30 40 上右下左
或者直接写单个方向
margin-left
margin-right
margin-top
margin-bottom
margin:auto;设置元素在父级容器中水平居中
内边距:padding 让标签内的内容与标签产生间距，缺陷是会拉伸标签的大小,不能设置负数
浮动属性float,可取值left，right
1.添加了浮动属性的元素会漂浮并且释放当前空间的占用
2.当元素添加了浮动属性时，先看相邻的上一个元素是否设置浮动，以相邻的元素所浮动的那一行空间为准进行浮动（足够空间）
3.如果相邻的没有浮动或者清除受浮动因素的影响，那么当前标签就在当前所在的行浮动
clear:both 设置了这个属性的标签清除受之前标签浮动的影响
vertical-align:只在行级标签上下对齐的时候 top bottom middle
把css写在标签内，称为行内样式，带来的缺陷
1.代码冗余，重复代码多
2.维护性较差
3.可读性差，不简洁
选择器，以具体的选择器的规则匹配网页中一个或者多个标签（元素），让其受当前选择器内的css属性影响
css选择器类别较多，语法规则，在head标签内写<style>标签
选择器语法都写在style内
选择器组成: 选择器名{ 属性:属性值;属性2:属性值;... }
1.通配符选择器，影响所有的标签
2.标签选择器，标签名就是选择器名
3.类选择器，让网页上具有同等特征的标签分类，先给标签的class属性。选择器的语法 .类名{} 作用在一组class属性值为
类选择器名的标签上
4.id选择器，作用在一个标签上 #id名{}
一个标签可以同时被多个选择器影响。如果这些影响这个标签的
选择器中的css属性不冲突。。。。
如果冲突按照选择器的级别考虑优先
* < tag < class < id < 行内 < !important
为了更加精准定位到具体的标签，可以使用派生选择器,由多个
选择器组合语法
这里的选择器可以是任意一种组合，class,id,tag,*...
1.子选择器
选择器>选择器2>选择器3{ xx:xx}
.content>p>div{ }
2.后代选择器
.big div{ }