CSS核心内容-标准流、盒子模型、浮动、定位

http://blog.csdn.net/husen1314/article/details/46664053

CSS核心内容-标准流、盒子模型、浮动、定位，了解了核心内容才能用CSS设计出一个简单的页面

 一、基础

    在了解核心内容之前需要先了解HTML中的两种标签：块级元素，行内元素；

    块级元素：一个块级元素占满一行

    行内元素：在一行中行内元素依次填充

    在CSS中可以将行内元素转换为块级元素，通过的是Display属性来实现的

    有了以上的基础后再看核心内容

 二、核心

    1.标准流

        标准流就是在CSS中默认的块级元素和行内元素的排列方法

        标准流是默认的排列方法，那么我们也可通过代码来改变它的默认值(即float浮动)

    2.盒子模型

	基本元素：外边距，内边距，边框，内容四部分

	要注意的是：盒子模型针对的是块级元素，某些样式对行内元素无用

 
 

  
  

   
   

    
    [css] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
#content{  
    background-color :#eff7ff;   /*背景颜色*/  
    border:1px solid #428eff;    /*边框*/  
    width:70px;                 /*宽度*/  
    height:25px;                /*高度*/  
    display:block;              /*转换为块级元素*/  
    font-size:12px;             /*字体*/  
    text-align:center;          /*位置*/  
    line-height :25px;          /*高度*/  
    margin-left:20px;           /*外左边距*/  
    color:#0059bd;              /*字体颜色*/  
    text-decoration:none;       /**/  
}  
 
 

	 以上是对盒子模型的一些属性的设置

    3.浮动

	对于设置了浮动的框，那么它就不再属于标准流，所以它的排列方式也会有所不同

	通过对文本框的设置浮动，可以排版框的位置，通过设置框向左或向右浮动的位置，直到碰到包含框

      或另一个浮动框的边缘为止

	
 
 

  
  

   
   

    
    [css] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
#Style｛  
    float:right;  
｝  
 
 

	以上就是设置框样式的向右浮动

	取消浮动可以用Clear来实现

	
 
 

  
  

   
   

    
    [css] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
#Style｛  
      float：Clear；  
｝  
 
 

    4.定位

	主要分为两种：绝对定位和相对定位

	相对定位脱离了标准流，以他所在标签的第一个标准流父标签为基准

 
 

  
  

   
   

    
    [css] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
#style {  
    display:block;  
    position:absolute; /*绝对定位，可以放置在页面的任何位置*/  
    position:relative; /*相对于其原来的位置的移动距离*/  
}  
 
 

	还有一种定位方式是固定定位，是相对于其他某一元素来进行定位，应该算是相对定位的一种，都是

     其相对位置的改变

 三、小结

     以上就是对CSS核心内容的整体的了解，而且这些内容是学习CSS的基础，通过基础的学习，在以后的学

   习过程中，遇到问题解决问题，从而获得更大的提高。

     学习不是一蹴而就的事情，有了理论的学习，还要进行一些实践，就比如上边写的内容，说起来大家都懂

   但是真正做起来就会体现出差距来，所以还是要多动手实践。。