列表分为
有序列表(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行高设置文字的垂直位置