5）

列表——

         1.无序列表   ul

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

                        ul天生自带内外边距，患有p也是

并集选择器：

           body,ul,p {

                            margin : 0 ;

                            padding : 0 ;

                           }

*选择器的利弊 ：好----省事 ； 坏----太省事，加大了浏览器的负荷

             解决办法——按需要选择

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

                         ul{

                              list-style ：none ；（ disc  circle  square ） 

                            }

             2. 有序列表    ol

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

                               天生自带内外边距

              ol与ul不同之处就在于前面符号的区别：

                   < ol       type = "   "  >           有序列表改变起前面的符号用标签属性type修改

                                       < li >< / li >

                   </ ol >

            3. 自定义列表      dl

                           < dl >                    定义一个描述列表

                                        < dt > < / dt >              定义一个描述列表项目名字

                                                   < dd > < / dd >                 描述每个项目

                            < / dl >

列表能做什么？

              二级菜单   导航

margin和padding 问题的探讨 ？

              margin ： 200px   设置一个值    上下左右都是200px

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

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

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

实际占用空间大小——width+border*2+padding*2+margin*2

一个标签元素的实际高度——height+padding-top+padding-bottom+2*border

margin的塌陷现象是什么？

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

有的标签设置背景时会独占一行，还有的会随着内容增减而改变自己的空间大小，根据以上现象，标签又分——

                块级标签：会独占一行，无论多少内容

                内容标签（ 行级标签 ）：根据内容多少占用空间大小

块级：p h1-h6  div  ul  li  ol  dl

内敛： span  img  i  b   em   icon

二者区别——

             块级： 独占一行

                         可以设置宽高

             内敛：内敛不会独占一行

                        内敛不可以设置宽高

                        内敛元素margin上下不起作用了

二者转换——

            块转行---给块级元素添加属性 display-inline

            行转块---给行级元素添加属性  display-block

             行级块元素---给需要元素添加属性 display : inline-block     （ 可设置宽高了，可在一行了，margin可随便用了 ）

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

         height   line-height值相同，文本上下居中

line-height ： 50px   /   2

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