第025篇：CSS2

1、标准流和拖标流

标准流布局：
    在没有写任何布局样式的时候，标签在网页中的默认的布局方式。
    
标签在标准流中的布局主要分为三种：
    1)块级标签：一个占一行；默认宽度是父标签的宽度，高度是内容的高度；设置宽度有效。   eg:div,p,hr,h1~h5,等；
    2)行内标签：一行可以显示多个；默认大小是内容大小；设置宽高无效。   eg:a,font,span,等；
    3)行内块标签：一行可以显示多个；默认大小是内容大小；设置宽高有效。  eg:input,img,等；
    
display:
    block   块级标签
    inline  行内标签
    inline-block    行内块标签
    none    隐藏
    
脱流(脱离标准流布局):
    不管什么标签以什么技术成功脱流，那么它的布局方式只有一种：一行可显示多个；默认大小是内容的大小；设置宽度有效。
    
    浮动和定位都可以脱流：

        
        
====================1.标准流布局示例================
        
        百度
        
        
        
我是段落1
        
我是段落2
        
        
        
        
        
        
        

        
        
====================2.修改标签类型示例=================
        
        
我是段落3
        
我是段落4
        
        
        
我是段落5
        
我是段落6
        
        
        百度
        谷歌
        
        
        
我是段落7
        
我是段落8

---

2、浮动

1.浮动
通过设置标签的float属性，可以让标签浮动
left:  左浮动， 浮动后标签靠左显示
right: 右浮动， 浮动后标签靠右显示

2.什么时候使用浮动
浮动可以让竖着显示的横着来; 还可以让标签靠右显示

        
=====================1.浮动会导致标签脱流============================
        

            
我是段落1
            
我是段落2
            
            我是超链接
        
        
        
======================2.浮动让标签靠右显示=======================
        

            
我是段落3
            
我是段落4
            
我是段落5
        

---

3、清除浮动

清除浮动指的是清除因为浮动而产生的高度塌陷问题
    
高度塌陷：如果父标签没有设置高度，并且没浮动，子标签浮动的时候就会出现高度塌陷的问题

清除浮动的三种方法：
    1)空盒子法：在会塌陷的标签的最后添加一个空的div，并且设置这个空的div的clear:both
    2)方法2：哪个标签会塌陷就在那个的标签上加上overflow:hidden;
    3)万能清除法：.clearfix1:after{display:block;clear:both;content:".";visibility:hidden;height:0;} .clearfix1{zoom:1;}

---

4、定位

定位属性：left,right,top,bottom 设置的分别是左右上下到参考对象的对应距离。
    注意：如果以上标签要有效果，必须设置参考对象(position)

设置定位的参考对象：position属性
    1)initial/static(不定位，即没有参考对象):body标签在不设置position的时候不是initial也不是static
    2)absolute(绝对定位):将当前标签第一个非inital/static的父标签作为参考对象
    3)relative(相对定位):相对标准流(自己)位置进行定位;一般讲标签的position设置为relative来保证子标签能相对自己定位。
    4)fixed(相对浏览器进行定位)：固定在浏览器某个位置
    5)sticky:当页面内容超过一屏相对浏览器定位；如果没有超过一屏就相对标准流进行定位。

---

5、盒子模型

1.盒子模型
每个可见的标签其实都是由content、padding、border和margin四个部分组成；
其中content、padding、border是可见的，margin是不可见的，但是占位置

2.控制盒子模型
1)content     - 设置标签的宽度和高度其实就是在设置content的大小; 
                标签中的内容或者子标签都是显示或者添加到content上的;
                设置标签的背景会作用于content
2)padding(内边距)  - padding分四个方向；这四个方向可以单独控制(大小);
                        设置标签的背景会作用于padding
                        
3)border    (边框)     -  border分四个方向；每个方向可以单独控制(大小、样式和颜色);

4)margin(外边距)  - margin分四个方向; 每个方向可以单独控制(大小)
                   不可见，但是占位置

        
        

            div1