CSS布局

CSS有三种定位机制:标准文档流(nomal flow),浮动(floats),绝对定位(absolute positioning)

标准文档流:
特点:从上到下,从左到右,输出文档内容(顾名思义:像流水一样,有一定的高度和宽度)

组成:由块级元素和行级元素组成

块级元素:从左到右撑满整个页面,独占一行;
              触碰到页面边缘时,会自动换行;

行级元素:能在同一行内显示;
             不会改变HTML文档结构

盒子模型有四个部分组成:
   边框:border
   外边距:margin
   内边距:padding
   盒子中的内容:content

margin : 上     右     下     左 (四个值) 
margin:上    左右    下   (三个值 )
margin 上下   左右     (两个属性值)

盒子3D模型:第一层:border
                  第二层:content + padding 
                  第三层:background-img
                  第四层:margin

盒子模型的尺寸 = 盒子中内容的尺寸 + 内边距 + 边界 + 外边距

float属性:使纵向排列的块级元素,横向排列
3个属性值: left ---左浮动    right ----右浮动   none ----不浮动
特点:元素会左移,右移,直至触碰到容器为止
       设置了浮动的元素,仍处于标准文档流中
某元素设置浮动后,会影响其紧邻其后面的元素,即:即使某元素的下一个元素是块级元素,那么该块级元素也不会换行,,而是紧跟在设置浮动的元素的后面或或者前面
这时,如果不需要这样的布局,就需要清除浮动,给受浮动影响的元素设置清除浮动的方法如下:

方法一:clear:both 
    用途:当父包含层受浮动影响,且父包含层缩成一条线的时候,用clear:both是无效的,它一般用于紧邻其后面的元素的清除浮动 
方法二:width: 100%(不确定是不是一定要是百分之百)
           overflow: hidden
   用途:父级元素或者是紧邻其后面的元素受到浮动影响的话,都可以用该方法来设置清除浮动

position定位
1. 静态定位 : static( 静态定位) 
2.相对定位:   relative(相对定位)
 特点:相对于自身原有位置进行偏移
         仍处于标准文档流中
         随即拥有偏移属性和Z-index属性
会产生空间层堆叠,以自身位置为基础,设置偏移属性之后可能会覆盖其他紧邻的元素
3.绝对定位:   absolute(绝对定位)     fixed(固定定位)
特点:建立了以包含快为偏移基准的定位
        完全脱离标准文档流(不会对其兄级元素造成影响)
        随即拥有偏移属性和Z-index属性
当一个元素设置了绝对定位却没有设置宽度的时候,元素的宽度会根据内容来调节

文本缩进:text-indent:300px;

 

posted @ 2016-07-17 14:01  蝴蝶女郎  阅读(133)  评论(0)    收藏  举报