列表
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