CSS Display
2018-11-26 本文已影响6人
roy_pub
块级元素（block-level）
每个元素通常都会占用一行或多整行，可以设置宽度、高度、对齐等属性，常用语网页布局和结构的搭建。
- 从新行开始
- 高度、宽度、外边距和那边距都可控
- 默认宽度100%
- 可以容纳内联元素和其它块元素
常见块级元素：
<h1>~<h6>,<p>,<div><ul><ol><li>等
行内元素（inline-level）
不占有独立的区域，仅仅依靠自身字体的大小和图像尺寸来支撑，一般不可设置宽度，高度，对齐等属性。
行内元素只能容纳文本或其它行内元素，a 比较特殊，可以放块级元素。
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
行内块元素(inline-block)
行内元素有几个特殊的标签，可以对它设置宽度和高度
<img />,<input />,<td>等
- 和相邻行内元素在一行上，但是之间有空白间隙
- 默认宽高就是它本身的宽高
- 宽度、高度、内外边距都可控制
模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {
/* 块级转行内元素 */
display: inline;
}
span {
/* 行内元素转块级元素 */
display: block;
}
a {
/* 行内元素转行内块元素 */
width: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div>Hello world</div>
<div>Hello world</div>
<div>Hello World</div>
<span>How are you</span>
<span>How are you</span>
<span>How are you</span>
<a href="#" >We</a>
<a href="#" >We</a>
<a href="#" >We</a>
</body>
</html>
导航栏Demo
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.nav {
text-align: center;
}
.nav a {
display: inline-block;
background: black;
color: white;
width: 100px;
height: 45px;
text-align: center;
text-decoration: none;
line-height: 45px;
}
a:hover {
color: gray;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">Theme</a>
<a href="#">Shop</a>
<a href="#">Shop Car</a>
<a href="#">Message</a>
<a href="#">Mine</a>
</div>
</body>
</html>
