一.样式初始化
为什么要样式初始化
通配符的弊端
逐个清除
需要的才去清除
body,p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ul,ol{list-style:none;}
img{border:0px;}
a{text-decoration:none;color:#222;}
二.标签分类
块级元素
特性
- 独占一行
- 默认宽度100%.支持宽高.行高
- 支持外边距和内边距
- 可以包裹内联元素和其他块元素
- p不内包裹（块元素特殊块级元素）
常见块级元素
div / dl / form / h1-h6 / ol / ul / p
内联元素(行内元素)
特性
- 和其它内联元素同处一行
- 不支持宽高
- 外边距上下无效.auto无效
- 内边距只对内联元素产生影响.无视块元素
- 标签之间空格被解析
- a能包裹块元素特殊内联元素
- 7 内联不能嵌套块级标签（a标签除外）
常见内联元素
a / b / em / i / img / input / lable / span
三.标签转换(属性:display)
内联元素转换为快元素(属性值:block)
块元素转换为内联元素(属性值:inline)
转换成行内快元素(属性值:inline-block)
特性
- 横排显示
- 支持宽高
- 没有宽高时内容撑开
- 支持外边距,不支持auto
- 5) 标签间隔被解析
**间隔解析解决方法
给行内块元素父级设置字体大小为零,行内块元素字体大小重新设置 **
<style>
ul{
font-size:0;
}
li{
display:inline-block;
font-size:16px;}
</style>
<ul>
<li>我是1</li>
<li>我是2</li>
</ul>
image.png
隐藏对象(属性值:none)
display:block;有显示的意义,和display:none;是对立的
<style>
.parent{
width:200px;
height:200px;
background-color:pink;
}
.child{
display:none;
margin:auto;
width:50px;
height:50px;
background-color:yellow;
}
.parent:hover .child
display:block;
}
</style>
<div class='parent'>
<div class='child'></div>
</div>
</style>