列表

1.列表

　　无序列表 ul

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

　　ul天生子代内外边距 (p标签也有)

2.并集选择器:标签名之间用逗号隔开

body,ul,p{
/*标签之间用英文逗号隔开*/
}

 

3.*(通配符选择器)的好处与弊端:

　　好处:省事

　　弊端:太省事,加大了浏览器的负荷

　　解决方法:按需查找

4.样式属性 list-style:除去或改变列表前的符号

　　list-style属性值:circle (空心圆) disc(实心圆)

　　square(正方形) none(空)

5.有序列表 ol

　　内部必须有子标签li

　　天生自带内外边距

6.有序列表改变前面的符号,用标签属性type修改

<ol type="A">
    <li>123</li>
</ol>

 

自定义列表 dl

<dl>
    <dt>姓名</dt>
    <dd>省</dd>
    <dd>思</dd>
<!--dt是小标题 dd是内容-->

</dl>

//列表的用法还有很多

　　比如我们在网页中经常碰见额导航栏,菜单都是

margin 和padding的探讨

div {
    margin:200px; 
    /*设置一个值,说明上下左右都是200*/
}


div {
    margin:200px 100px;
    /*设置两个值,说明上下是200,左右是100*/
} 

div {
    margin:200px 100px 200px;
    /*设置三个值,说明上是200,左右是
100,下是200*/
} 

div {
    margin:200px 50px 100px 50px;
    /*设置四个值,说明上是200,右
是50,下是100 ,左是50
(按顺时针方向)*/
} 

padding的用法跟margin一样

元素的占用空间大小

元素实际占用空间的大小

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

一个标签元素的实际高度

　　height+border*2+padding-top+padding-bottom

margin塌陷现象:相邻两个块级元素同时设置margin时,它们的margin不会叠加,会取最大值

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

根据以上现象,标签又分为

块级标签

　　独占一行,无论内容多少 p h1-h6 div ul ol dl li

内敛标签(行级标签)

　　根据内容多少占用空间大小 img i b span a em icon(矢量标签)

二者区别

　　1 块级标签会独占一行,内敛标签不会

　　2 块级可以设置宽高,内敛标签不可以

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

二者转换

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

　　2 行级转块级 给行级元素添加属性 display:block(块);

　　3 行级块 给需要的元素添加属性 display:inline-block;
　　(可以设置宽高 可以在一行 可以设置margin)

备注:

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

line-height和height的值相同时,文本居中

扩展:

div {
    line-height:50px/2;
}

 

当是2的时候,line-height的值是2*font-size的大小--36px