9.13笔记

一、无序列表(ul)

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

2.ul自带内外边距，还有一个<p>标签、

并集选择器body,ul,p{

                                  margin:0;

                                  padding:0;

                                }

*选择器的好处：省事，全都选中。

               坏处：太省事，一至于加大浏览器的负荷

解决方法：按需选择

list-style…这是样式属性（除去列表前的符号）

ul{

     border:1px solid red;

    list-style:none(空）/circle（空心圆）/disc（实心圆）/square（正方形）

   }

二、Ol有序列表

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

2.天生自带内外边距

Ol与ul不停之处在于前面的符号

有序列表改变前面的符号用tyle属性修改，在标签内。

<li  tyle=”A/a/1/I>

三、自定义列表

<dl>自定义列表 <dd>内容 <dt>小标题

列表能做什么？

做二级菜单，做导航。

备注：margin与padding的问题探讨：

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

margin：200px(上下） 100px（左右）;

 margin：100px(上）50px（左右）100px（下）

margin：100px(上）200px（右）100px（下） 200px(左）

padding同上

实际占用空间大小

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

一个表情的实际高度为height+padding-top+padding-bottom+2*border

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

有的标签会设置背景是会独占一行

有的标签会随内容的增减来改变自己的空间大小

标签据此可分为两类：块级标签（会独占一行，无论内容多少）{p/h1~h6/div/ul/ol/dl/等}

                                  内敛标签（行级标签，根据内容多少占据空间大小）{span/img/i/b/a/em}

二者区别

块级                                           内敛

1.块级元素会独占一行               1.内敛不会独占一行—-不可以设置行高

2.块级可以设置行高                   2.内敛元素的margin上下不起作用

二者转换

块级转行级（display：inline；）

行级转块级（display：block；）

行级块元素（display：inline-block；）{可以设置行高、可以在一行、margin可以随意使用}

备注：

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