溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
獨占一行的標簽
能隨時設置寬度和高度（比如div、p、h2、h3、ul、li）
以上這些標簽無論寬度有多窄，都是獨占一行的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<!--塊級標簽-->
<div>我是塊級標簽</div>
</body>
</html>
上圖：可以看到網頁兩邊是有空白處的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
}
</style>
</head>
<body>
<!--塊級標簽-->
<div>我是塊級標簽</div>
</body>
</html>代碼：使用通配符，將兩邊的空白處去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
}
p{
background-color: blue;
width: 50px;
}
</style>
</head>
<body>
<!--塊級標簽-->
<div>我是塊級標簽</div>
<p>段落</p>
</body>
</html>代碼：修改div和p標簽的寬度
上圖：可以看到因為div和p標簽都屬于塊級標簽，都會獨占一行，所以即使它倆的寬度在窄，也不會合并到一行。
多個行內標簽能同時顯示在一行
寬度和高度取決于內容的尺寸（比如span、a、label）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
}
p{
background-color: blue;
/*width: 250px;*/
}
span{
background-color: violet;
}
a {
background-color: teal;
}
</style>
</head>
<body>
<!--塊級標簽-->
<div>我是塊級標簽</div>
<p>段落</p>
<br>
<br>
<!--行內標簽-->
<span>我是span，行內標簽</span>
<span>我是span，行內標簽</span>
<a href="#">我是超鏈接</a>
<a href="#">我是超鏈接</a>
</body>
</html>代碼：
新增行內標簽span、a
新增span和a設計
上圖：因為是屬于行內標簽所以span和a都出現在同一行。
a {
background-color: teal;
width: 300px;
height: 150px;
}代碼：修改a標簽設計，修改器寬度和高度
上圖：可以看到高度和寬度并沒有改變
多個行內-塊級標簽可以顯示在同一行
能隨時設置寬度和高度（比如input、button）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
}
p{
background-color: blue;
/*width: 250px;*/
}
span{
background-color: violet;
}
a {
background-color: teal;
width: 300px;
height: 150px;
}
input{
width: 500px;
height: 50px;
}
button{
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<!--塊級標簽-->
<div>我是塊級標簽</div>
<p>段落</p>
<br>
<br>
<!--行內標簽-->
<span>我是span，行內標簽</span>
<span>我是span，行內標簽</span>
<a href="#">我是超鏈接</a>
<a href="#">我是超鏈接</a>
<br>
<br>
<!--行內-塊級標簽-->
<input placeholder="我是輸入框">
<button>我是按鈕</button>
</body>
</html>
代碼：
body中新增了換行符和 行內-塊級標簽input、button
style中新增了input、button設計
上圖：行內-塊級標簽 是可以在一行顯示的，且能調整高度、寬度，這樣設計頁面更靈活。
CSS中有個display屬性，能修改標簽的顯示類型
none：隱藏標簽
block：讓標簽變為塊級標簽
inline：讓標簽變為行內標簽
inline-block：讓標簽變為行內-塊級標簽（內聯-塊級標簽）
div{
background-color: red;
width: 400px;
height: 100px;
display: none;
}代碼：修改div設計樣式，加一個display: none;
上圖：將div中的內容和樣式給隱藏了。
div{
background-color: red;
width: 400px;
height: 100px;
/*display: none;*/
}代碼：將display: none 注釋掉。
span{
background-color: violet;
display: block;
}
代碼：修改span設計樣式，新增display: block; 將行內標簽修改成塊標簽
上圖：可以看到span本身是個行內標簽，不會占據整行的空間，但修改成塊標簽后就占據整行了。
span{
background-color: violet;
width: 300px;
height: 150px;
display: block;
}代碼：修改span設計樣式的高度、寬度。
上圖：修改成塊標簽以后，再去修改高度和寬度是可以的，否則如果還是行內標簽，修改高度和寬度是不生效的。
span{
background-color: violet;
width: 300px;
height: 150px;
/*display: block;*/
}
代碼：注釋掉display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
/*display: none;*/
display: inline;
}
p{
background-color: blue;
/*width: 250px;*/
}
span{
background-color: violet;
width: 300px;
height: 150px;
/*display: block;*/
}
a {
background-color: teal;
width: 300px;
height: 150px;
}
input{
width: 500px;
height: 50px;
}
button{
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<!--塊級標簽-->
<div>我是塊級標簽</div>
<div>我是塊級標簽</div>
<p>段落</p>
<br>
<br>
<!--行內標簽-->
<span>我是span，行內標簽</span>
<span>我是span，行內標簽</span>
<a href="#">我是超鏈接</a>
<a href="#">我是超鏈接</a>
<br>
<br>
<!--行內-塊級標簽-->
<input placeholder="我是輸入框">
<button>我是按鈕</button>
</body>
</html>
代碼：
修改div標簽，新增display: inline;
body中增加一條div標簽。
上圖：塊級標簽變成了行內標簽，且因為變成了行內標簽設計的寬度和高度是不生效的。
div{
background-color: red;
width: 400px;
height: 100px;
/*display: none;*/
/*display: inline;*/
display: inline-block;
}
上圖：變成了行內-塊級標簽，可以將多個標簽放在同一行，且能改變寬度、長度大小。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
