9.13笔记

                       　　　　　　　　　　　　　　　　　　　　　　　　列表

  一、1.无序列表 ul

    (1）内部必须有子标签<li>

　(2)ul天生自带内外边距（p标签也是）

          　　　　　　　　　　       list-style 样式属性，除去列表前的样式。　　list-style的属性{circle 空心圆     disc 实心圆     square 正方形    none}　

  2.有序列表 ol  

   (1）（2）与无序列表相同

**有序列表ol与无序列表ul的不同之处：前面符号的区别。

有序列表通过标签属性“type”来修改前面的符号 

   3.自定义列表 dl

, <dt>小标题

  <dd>内容

二、并集选择器(用逗号隔开)

    如：body，ul，p{ 

　　　　　　　　　　margin  o

　　　　　　　　　　padding:0

  　　　　　　　　　　　　　　}

选择器的优点与缺点

  优点 简单省事

  缺点   加重浏览器的负担。

 

 解决办法  按需选择。

三、列表做什么？

     做二级菜单，做导航

    备注：margin和padding问题的探讨。

   margin：200px ;设置一个值，说明上右下左都是200px

   margin: 200px;100px 设置两个值，上下200px  左右100px

   margin：200px;50px;100px   上是200px 下是100px  左右50px

   margin:200px; 50px; 100px; 50px    上100px  右50px   下100px   左50px

padding同上

 

**** 一个元素实际所占空间为  width+border*2+padding*2+margin*2

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

 

四、什么是margin的塌陷现象？

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

五、 块级标签与内敛标签  

　　　　有的标签设置背景时会独占一行，有的会随着内容的增减而改变自己的空间大小。   根据这种现象，又将标签进行划分：

       标签{

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

       

                内敛标签（行级标签）：随内容的多少改变空间大小。

      （1）归纳：

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

　　　　行级标签：span  img  i  b  a  em  icon(矢量标签）

　　（2）二者的区别：

　　　　块级 块级元素会独占一行；

　　　　　　　可以设置宽和高。

　　　　行级 不会独占一行；

　　　　　　　不能设置宽和高；

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

　　　（3）二者的转化

　　　　　　块级转行级：display:inline

　　　　　　行级转块级：display:block

　　　　　　行级块元素：inline:block

　　　　　　　　　　给需要的元素添加属性：display：inline-block

　　行级块：可以设置宽高，可以在一行，margin可以随便使用

  *备注：line-height行高，设置文本字体的垂直位置。