HTML/CSS5

列表

    一.无序列表ul     

        1. 内部必须要有子标签<li></li>          2. ul天生自带内边距 还有一个 p标签

并集选择器

        body  ，ul   ，p用逗号隔开

       *选择器有好处也有弊端

      好处就是省事，弊端就是因为省事加大浏览器的负荷        解决办法 按需选择

       list-style样式属性去除列表前的符号

       ul{

           border：1px  solid  red;

           list-style:none;

          }

      list-style的属性值circle（空心圆）disc（实心圆）square（正方形）none（空）

二.有序列表ol

    1.内部必须要有子标签<li></li>        2.天生自带内外边距

     ol和ul不同之处是就在前面符号的区别        <ol type="A">

三.自定义列表dl

      <dl>               （自定义内容）

           <dt></dt>       （ 小标题）

           <dd></dd>      （ 内容）

     </dl>

列表做事么？       做二级菜单做导航

四.  margin和padding问题的探讨

        margin

              margin：200px设置一个值说明top：right  bottom   left都是200px

              margin：200px；设置两个值上下是200px左右是100px

              margin：200px  50px   100px；设置三个值上是200px左右是50px下是100px

              margin：200px   50px    100px     50px ;设置四个值上是200px右是50px下是100px左是50px

       padding同上

      实际占用的空间大小

             通过分析发现一个元素实际占用的空间是width+border*2+padding*2+margin*2

      一个元素的实际高度

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

      margin的塌陷是现象是什么？

             相邻的两个块级元素同时设定他们的外边距不会叠加会去最大的，这种现象叫margin塌陷

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

     根据以上分析现象有分      标签    块级和内敛        块级标签会独占一行无论多少内容          内敛标签（行级标签）根据内容多少占据空间大小

     块级p  h1-h6   div    ul    li    dl 等

     内敛span   img    i    b    a    em   icon（矢量）

两者的区别

块级

            1.块级元素会独占一行

            2.块级可以设置宽高

       内敛

            1.内敛不会独占一行

             2.内敛不可以设置宽高

             3.内敛元素的margin上下不起作用

转换

          1.  块级转行级         给块级元素添加属性display：inline；     display显示    inline行

           2.行级转块级          给行级元素添加属性display：block；       block块

           3.行级、块转元素         给需要的元素添加属性display：inline-block

        （可以设置宽高了  可以在一行了    margin）

备注：

       line-height行高    设置字体的垂直位置

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

拓展：

     line-height：px/2；

      当是2的时候line-height的值是2*font-size