1、标签

/*块标签

单独占用一行

*/

/*内联（行内）标签

不会单独占用一行

*/
width:200px; //宽度
heigth:100px; //高度
backgroud-color:red; //颜色
display:none; //让标签隐藏
display:inline; //让块标签转换成行内标签
display:block; //让行内标签转换成块标签

2、盒子模型

2.1内容：

2.2内边距：

（快捷方式）遵循上右下左的顺序规律

实例：padding:30px 50px 10px 20px;

2.3边框：

实例：
设置边框

设置边框圆角

2.4、外边框

实例：

3、浮动(float)

不使用display改变标签属性，也可以使块标签浮动并列

使用浮动：任何标签都会自动转换成行内快捷标签

结果：

4、标签居中

text-align:center 只能让块级标签内的内容或行内标签居中；可以让内容文字居中，，也可以让内容行内标签居中

块级标签 水平居中：

给自己添加下面属性：

行内标签 水平居中：

给自己父标签添加下面属性：

行内标签 垂直居中：

给自己父标签添加下面属性：

块级标签 垂直居中：

方法一：定位
子标签绝对定位，父标签相对定位（子绝父相）
position: relative; //父标签相对定位
position: absolute; //子标签绝对定位

示例：

父标签：
position: relative;

子标签：
position: absolute;
left:50%;
top:50%;
margin-left:-100px; //子标签宽的一半
margin-top:-20px; //子标签高的一半

水平垂直居中局部微调：
利用vertical-align进行基线微调

vertical-align:middle; //把此元素放置在父元素的中部

实例：

微调前和微调后对比：