列表

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

posted @ 2018-09-13 19:48  猫昼  阅读(117)  评论(0编辑  收藏  举报