标签：div   css   html   xml   

前提：

    块级元素：div标签为为块级元素，在网页上表示为占满一行的
    行内元素：span标签为行内元素，的长度只和字符的长度有关

    小例子：

<span style="font-size:18px;"><div  class="menu">阿猫</div>
    <span class ="menu">阿狗</span>
    <span class="menu">阿兔</span>
<span class="title">f阿牛</span></span>

    行内元素转换为块级元素的方法，例：将span标签的美容转换成也横跨一整行的方法
 

<span style="font-size:18px;"><span class ="menu ttt " >阿狗</span></span>

<span style="font-size:18px;">.ttt{
    display:block;
}</span>

    效果：

标准流

优先级都和标准流相关。

盒子模型

    我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

    盒子模型分为外边距：border(top，bottom，left，right)，内边距：padding（top，bottom，left，right），内容：content(width,height)，画框：margin（top，bottom，left，right）

    每个标签就相当于一个盒子。通过盒子模型来设置每个标签的内外边距。

    小例子（1）：

<span style="font-size:18px;">.menu{                              /*栏目样式*/
    color:#00f;                             /*文字颜色*/
    background-color :#ffd800;

    border-width:5px;
    border-color :#0ff;
    border-style:solid;

}
</span>

    小例子（2）

<span style="font-size:18px;">内边距属性写法
  /*padding-top: 5px;
    padding-left : 5px;
    padding-bottom : 5px;*/
    /*padding: 5px;*/                      /*如果据上下左右的边距一样的话可以这样写*
    padding:5px  6px  7px  8px;     /*默认的是逆时针上右下左的顺序*/      

</span>

    效果：

浮动

元素的，通过浮动可以让块级元素排成一行。脱离了标准流。

    小例子：

<span style="font-size:18px;">float:left ;         /*盒子向左浮动*/</span>

    效果：

<span style="font-size:18px;">clear:left;         /*清除浮动*/</span>

定位

<span style="font-size:18px;">position:relative;   /*相对定位*/
    top:20PX;
</span>

    absolute,绝对定位。相对于盒子之外更外一层盒子，脱离了标准流。

    点睛：盒子模型是一个伟大的模型，通过和实际生活相结合，我们在网页设计的格式掌握的更加透彻和简单。

CSS 之 核心篇

标签：div   css   html   xml   

原文地址：http://blog.csdn.net/zhangzijiejiayou/article/details/40071417