列表分为

有序列表(ol)

无序列表(ul)

自定义列表(dl)

1.有序列表(ol):

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

  ( 2.) 天生自带内边距

2.无序列表(ul)

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

  (2.)ul(无序列表)天生自带内外间距, p标签同样天生自带内边距

      ul{border:1px solid red;}

      p{border: 1px solid blue;}

    并集选择器

格式:baby,ul,p {

    margin:0;

    padding:0;

    "*"选择器有利有弊

    利:

    弊:加强浏览器的负荷

  解决办法 按照要求进行选择

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

  ul{

  border:1px solid red

  list-style;}

  list-style的属性值 cirle(空心圆)disc(实心圆)square(正方形)none(空)

  ol有序列表

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

  2.天生自带内边距

ol和ul不同之前就在前面符号的区别

<ol type="A">有序列表改变前面的符号用type写在标签里面

<li>内容</li>

</ol>

用标签属性type修改

3.自定义列表

<dl>

    <dt></dt>(小标题)

      <dd></dd>(内容)

</dl>

Dl自定义列表 dt是小标题 dd内容

列表能做什么?

  做二级菜单和导航

注:

Margin和padding问题是探讨

Margin:200px;设置一个值 说明top,right,nottom,left 都是200px

Margin:  200px 100px;设置两个值 上下是200px 左右是100px

Margin:  200px50px100px上是200px左右50px 下是100px

Margin:200px50px100px;上200px 右50px 下px 100px 右50px

Padding 同上

实际占用的空间大小

通过分析我们发现 一个元素实际占用的空间是

width+border*2+padding*2+margin*2

一个标签元素的实际高度

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

Margin的塌陷现象是

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

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

5.标签分为块级标签和内敛标签(行级标签)

块级标签:会独占一行,无论内容多

块级:p h1-h6 div ul li ol dl等

内敛标签: 根据内容多少,占据空间大小

内敛:span img i b a em ico(矢量标签)

区别(块级和内敛):

  块级

1.块级元素会独占一行

2.块级可以设置宽高

  内敛

1.内敛不会独占一样

2.内敛不可以设置宽高

3.内敛原色的margin上下不起作用

二者转换

块级转行级

给块级元素添加属性display:inline;display(显示)inline(行)

行级转块级

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

行级转元级

给需要的元素添加属性:display:line-lock;

(可以设置宽高,可以在同一行 margin可以随便使用)

注:

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