05-标签类型_浮动_定位

一.标签类型

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； 固定定位
    与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；