html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myDiv</title>
<link rel="stylesheet" type="text/css" href="mydiv.css"/>
</head>
<body>
<div class="container">
<span>行內(nèi)元素1</span>
<span>行內(nèi)元素2</span>
<span>行內(nèi)元素3</span>
<span>行內(nèi)元素4</span>
<span>行內(nèi)元素5</span>
<div class="myDiv1">行內(nèi)塊狀元素1</div>
<div class="myDiv2">行內(nèi)塊狀元素2</div>
<div class="myDiv3">塊狀元素1</div>
<div class="myDiv4">塊狀元素2</div>
</div>
</body>
</html>
css代碼
.container{
width: 600px;
height: 600px;
border: 1px solid green;
color: #000000;
}
span,.myDiv1,.myDiv2,.myDiv3,.myDiv4{
/* 此時span為inline; */
width: 200px;
height:100px;
border: 1px solid red;
}
瀏覽器加載如圖:
截屏2020-12-30 上午8.53.21.png
1 通過瀏覽器打開,你會發(fā)現(xiàn),在塊級元素container 內(nèi),
行內(nèi)元素的特點:
- 設(shè)置寬高無效
- 不自動換行
- 默認(rèn)排列從左到右。
- 設(shè)置margin左右有效，上下無效
- 設(shè)置padding上下左右都有效
- 但會撐大空間
- 常見的標(biāo)簽為span b i sub sup做出平方效果
- 行內(nèi)元素可通過 display: inline-block; 轉(zhuǎn)換為 行內(nèi)塊級元素
塊級元素的特點:
- 設(shè)置寬高有效
- 對margin、padding上下左右都有效
- 自動換行,一行1個,從上到下排列
2將行內(nèi)元素轉(zhuǎn)為行內(nèi)塊級元素,
css代碼
span{
display: inline-block;
}
瀏覽器加載如圖:
截屏2020-12-30 上午10.11.13.png
此時行內(nèi)元素span 轉(zhuǎn)為 行內(nèi)塊級元素
其特性如下:
- 設(shè)置寬高有效
- 不自動換行
3 將行內(nèi)元素轉(zhuǎn)為塊級元素
span{
display: block;
}
瀏覽器加載如圖:
塊級.png
此時行內(nèi)元素span也是塊級元素起具有塊級元素的特點
4以上是行內(nèi)元素轉(zhuǎn)為 行內(nèi)塊級元素 和 塊級元素.
那是否可以將塊級元素轉(zhuǎn)為 行內(nèi)元素或者 行內(nèi)塊級元素 轉(zhuǎn)為 行內(nèi)元素.
.myDiv1,.myDiv2{
display:inline;
}
瀏覽器加載如圖:
塊級1.png
5 在以上測試時發(fā)現(xiàn) 行內(nèi)元素 span之間有詭異的3em的間隔,解決辦法如下:
- 行內(nèi)元素拼接起來,不要換行. 這也是行內(nèi)元素的通常做法.
- 在js里拼接好字符串后再通過innerHtml方法顯示出來
- 換行符號的寬度是由所在標(biāo)簽的字體大小有關(guān)，以上面的代碼為例，span的font-size越大，塊1與塊2之間的空白就越寬，反之則越小,所以將字體設(shè)置為0即可
- 將margin-right: -3em; 這個比較麻煩 當(dāng)行內(nèi)元素多時.
