一、列表

 列表分为无序列表、有序列表和自定义列表

 1、无序列表   <ul></ul>

  1)、内部必须有子标签,<li></li>

  2)、ul天生自带内外边距,还有一个p标签

    a、除去内外边距用margin:0; padding:0;

    b、除去前面列表的符号,用样式属性:list-style

      ul{

        border:1px;  solid;  red;

        list-style:none;

       }

   *注 list-style的属性值:circle(空心圆)、disc(实心圆)、square(正方形)、none(空)

  2、有序列表     <ol></ol>

    1)、内部必须有子标签  <li></li>

    2)、天生自带内外边距

      有序列表要改变前面的符号,用属性标签type修饰

       <ol type="A">

          <li></li>

       </ol>

    *注:ol和ul的不同之处就在于前面符号的区别

  3、自定义列表       <dl></dl>

    构成:

       <dl>

         <dt></dt>

           <dd></dd>

       </dl>

       *注:dl (自定义列表)、dt(小标题)、dd(内容)

二、Margin和Padding的探讨

 1、探讨

   1)、margin:200px; 设置一个值,说明top、bottom、left、right都是200px

   2)、margin:200px  100px;   设置二个值,说明top、bottom是200px,left、right是100px

   3)、margin:200px   50px   200px;  设置三个值,说明top是200px,left、right是50px,bottom是200px

   4)、margin:200px   50px   100px    50px; 设置四个值,说明top是200px,left是50px,bottom是100px,right是50px

    padding  同上

 2、实际占用空间

   1)、通过分析我们发现,一个元素实际占用空间是

    width+border*2+padding*2+margin*2

   2)、一个标签元素的实际高度

    实际高度=height+padding-top+padding-bottom+border*2

 3、margin的塌陷现象是什么?

   相邻两个块级元素同时设置margin时,他们之间的外边距不会叠加,会取最大值,这中现象叫margin塌陷。

 

三、标签的分类

  有的标签设置背景时,会独占一行;还有的会随着内容的增减而改变自己的空间大小

 1、分类

      根据以上现象,标签又分为块级标签和内敛标签(行级标签)

    块级标签:会独占一行

    块级标签有:p,h1-h2,div,ul,ol,dl,li

    内敛标签:随着内容的变化而变化

    内敛标签有:span,img,i,b,a,em(失量标签)

 2、二者的区别

   快级:1)、块级元素会独占一行

      2)、块级可以设置宽高

   内敛:1)、内敛不会独占一行

      2)、内敛不可以设置宽高

      3)、内敛元素的margin不起作用

 3、二者的转换

  1)、块级转行级

    给块级元素添加属性:display:  inline;                 (display  显示      line  行 )

   2)、行级转块级

    给行级元素添加属性:display:blank;    (blank   块)

   3)、行级块元素

    给需要的元素添加属性:display:inline-blank;     

     (好处:可以设置宽高;可以在一行;margin可以随便使用了)

    *注:line-height     行高        可以设置字体的位置

      line-height的值和height的值相同,文本就上下居中

    拓展:line-height:50px/2/百分比;

       当是2的时候,line-height的值是2*font-size的大小=36px