元素分类
块状元素
<div> <p> <h1>~<6> <ol> <ul> <table> <address> <blockquote><form>
内联元素
<a> <span> <br> <i> <em> <lable> <q> <var> <cite> <code>
内联块状元素
<img> <input>
详解:
>>块级元素
设置display:block将元素显示为块级元素
举个例子 a{display:block;} 将行内元素a转换为块级元素,使a元素有块级元素的特点
>>>特点:每个块级元素都从新的一行开始,其后元素另起一行;
元素宽度、高度、行宽、底和顶边距都可以设置、
元素宽度在不设置的情况下,是它本身父容器的100%;
例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p,h1{background:pink;}
</style>
</head>
<body>
<h1>hahahha</h1>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
</body>
</html>
hahahha
段落1段落1段落1段落1段落1
>>行内元素
块状元素可以由代码display:inline设置为行内元素
>>>特点:
1、和其他元素在一行上
2、高度、宽度、行高、顶部底部边距不可以设置
3、元素宽度是它包含的文字和图片的宽度,不可以改变
行内元素之间会产生间隙bug问题的场景:
1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
如下代码:
<div>
<a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>
解决方法:
1、写在一行,之间不要有空格之类的符号。
<div>
<a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>
</div>
2、使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}
内联块状元素
display :inline:block;
>>特点:
1、和其他元素在同一行上
2、元素高度、宽度、行高、顶底间距可以设置
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
display:inline-block;
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>