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

posted @ 2018-09-13 20:07  黑太阳-  阅读(299)  评论(0编辑  收藏  举报