CSS的顯示模式
阿新 • • 發佈：2017-11-26
str 設置 doc microsoft block 圖片 tle meta font
div與span
div與span有什麽區別
div單獨占一行，span不會單獨占一行
div是容器級的標簽，而span是一個文本級的標簽
容器級的標簽有：div , h , ul , ol , dl , li ...
文本級的標簽有：span , p , buis , del , em , ins ...
容器級的標簽中可以嵌套其它所有標簽
文本級的標簽中只能嵌套文字/圖片/超鏈接
CSS顯示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
div {
display:inline;
}
span {
display:block;
background:green;
width:100px;
height:100px;
}
.cc {
background:blue;
width:200px;
height:200px;
display:inline-block;
}
</style>
</head>
<body>
<!--
在HTML中所有的標簽分為兩類：容器級與文本級
在CSS中將所有標簽分為兩類：塊級元素與行內元素
1：什麽是塊級元素，什麽是行內元素？
塊級元素獨占一行：div , h , ul , ol , dl , li , dt , dd , p
塊級元素如果沒有設置寬度就和父級元素一樣寬；如果設置了寬高就和設置的一樣寬高
行內元素不會獨占一行：span , buis , strong , em , ins , del
行內元素如果沒有設置寬度默認就和內容一樣寬
行內元素是不可以設置寬度和高度的
2：行內塊級元素
為了能夠讓元素既能夠不獨占一行，又可以設置寬度和高度，就出現了行內塊級元素
3：顯示模式的互相轉換
設置元素的display屬性：block 塊級, inline 行內, inline-block 行內塊級
-->
<div>這是DIV</div>
<div>這是DIV</div>
<span>這是SPAN</span>
<span>這是SPAN</span>
<p class="cc">這是P</p>
<b class="cc">這是B</b>
</body>
</html>
CSS的顯示模式