块元素block
独占一行的元素叫做块元素，只会受它的父元素的宽度高度所影响。可以对块元素的宽度和高度进行设置，可以容纳行内元素和其他块元素。常见的块元素：<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>，<form>。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块元素 demo</title>
<style>
p,div,ul li,h3{
background-color: aquamarine;
}
</style>
</head>
<body>
<p>p标签是块元素</p>
<div>div是块元素</div>
<ul>
<li>li是块元素</li>
</ul>
<h3>h1~h6是块元素，form也是块元素</h3>
</body>
</html>
行内元素inline
不会独占一行，大小由元素中的内容而决定，它会和周围的内容在一起，按从做到右的顺序显示，不可设置其宽度与高度，因为它的宽高依其内容而定。常见的行内元素：<span>、<a>、<label>、<strong>、<b>、<em>、<i>。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>行内元素 demo</title>
<style>
a,span,label,em,i,strong,b{
background-color: bisque;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">a是行内元素</a>
<a href="https://www.baidu.com">两个a元素在同一行</a>
<span>span是行内元素</span>
<span>两个span在同一行</span>
<label>label是行内元素</label>
<label>两个label在同一行</label>
<em>em是行内元素</em>
<em>两个em在同一行</em>
<strong>strong是行内元素</strong>
<strong>两个strong在同一行</strong>
<i>i是行内元素</i>
<i>两个i在同一行</i>
<b>b是行内元素</b>
<b>两个b在同一行</b>
</body>
</html>
行内块元素inline-block
既具有块元素特性也具有行内元素的特性，可以设置其宽度和高度，默认大小由行内块元素的内容而定，不会占据整行。行内元素只能容纳文本或则其他行内元素。（a标签除外，a标签内可以放块元素）。常见的行内块元素：<img>、<input>、<td>。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>行内块元素 demo</title>
</head>
<body>
<!-- 行内块元素--当浏览器的一行不能同时容纳下几个行内块元素时，那么多余的行内块元素会自动换行到下一行 -->
<input type="text" value="注册">
<input type="text" value="登录">
<img src="../img/crazy.gif" alt="抽疯">
<img src="../img/current.gif" alt="抱萝卜">
</body>
</html>
可替换元素
img 的在浏览器的display属性为inline,而它表现出来的特性包含inline-block的特性(可以直接设置其宽高)
三像素空白问题：
img 的display为inline，三像素问题与基线有关(不确定)
解决三像素空白：
1.将父元素的font-size设置为0
2.将img的display改为block
3.如果是垂直方向上的三像素空白，则将img的vertical-align设置为top
display--显示模式转换。
块元素转换为行内元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>display-01 demo</title>
<style>
h2,p{
background-color: brown;
display: inline;
width: 50px; /*设置的宽度无效*/
height: 200px; /*设置的宽度无效*/
}
</style>
</head>
<body>
<h2>块元素转为行内元素</h2>
<p>在CSS样式中将display的值设置为inline。</p>
</body>
</html>
行内元素转换为块元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>display-02 demo</title>
<style>
a{
display: block;
background-color: rgb(180, 146, 212);
width: 200px; /*转换为块元素后可设置其宽度*/
height: 200px; /*转换为块元素后可设置其高度*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">行内元素转换为块元素</a>
<a href="https://www.baidu.com">在CSS样式中将display的值设置为block;</a>
</body>
</html>
块元素、行内元素转换为行内块元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>display-03 demo</title>
<style>
a{
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">块元素、行内元素转换为行内块元素。</a>
<a href="https://www.baidu.com">在CSS中将display的值设置为inline-block。</a>
</body>
</html>
网友评论