一.标签类型
1.标签样式初始化
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
2.块元素和行内元素
块元素特点:
1、默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令
行内元素特点：
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析成空格
3.常见块元素
div 块
ul 无序列表
ol 有序列表
dl 自定义列表
form 表单
fieldset 表单分组
h1~h6 标题
hr 水平线
p 段落
table 表格
4.常见行内元素
<a> 链接
<span> 行内元素
<br> 换行
<i> 斜体
<em> 斜体
<strong> 加粗
<label> 文本
5.行内块元素
display：inline-block;
特性：
1、块在一行显示；
2、行内属性标签支持宽高,padding margin；
3、没有宽度的时候内容撑开宽度
问题：
1、代码换行被解析为空格；
2、ie6 ie7 不支持块属性标签的inline-block;
常见行内块元素
<input />
<img />
6.块和内嵌的转换
display：block 显示为块
使内联元素具备块属性标签的特性
display：inline 显示为内嵌
使行块属性标签具备内联元素的特性
二.浮动
float浮动：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
浮动.png
1.float/文档流
float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
2.清浮动
1.overflow:hidden
2.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
三.定位
1.相对定位
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
2.绝对定位
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、定位参照点:依次去寻找有position的父视图,如果找到了以它为准.如果一直找不到,那就以最终body为准
e、相对定位一般都是配合绝对定位元素使用；
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
3.固定定位
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
网友评论