css內聯樣式的盒子模型

dapan發表於2021-09-11
CSS模型

css內聯樣式的盒子模型

1、內聯樣式是不能設定width和height的。

2、它可以設定水平內邊距，會影響頁面佈局，會將水平方向其他元素擠開。

但是垂直內邊距則不會影響頁面佈局，它是選擇覆蓋其他元素。

3、它可以設定邊框，垂直邊框不會影響頁面佈局。

但是水平邊框會（可以理解為跟水平內邊距一樣）

同時，內聯元素支援水平方向的外邊距，相鄰元素外邊距不會重疊而是求和。

內聯元素不支援垂直外邊框。

例項

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
  內容區、內邊距 、邊框 、外邊距
 * */
/*
 * 內聯元素不能設定width和height
 */
/*width: 200px;
height: 200px;*/
/*
 * 設定水平內邊距,內聯元素可以設定水平方向的內邊距
 */
padding-left: 100px ;
padding-right: 100px ;
/*
 * 垂直方向內邊距，內聯元素可以設定垂直方向內邊距，但是不會影響頁面的佈局
 */
padding-top: 50px;
padding-bottom: 50px;
/*
 * 為元素設定邊框,
 * 內聯元素可以設定邊框，但是垂直的邊框不會影響到頁面的佈局
 */
border: 1px blue solid;
/*
 * 水平外邊距
 * 內聯元素支援水平方向的外邊距
 */
/* margin-left:100px ;
margin-right: 100px; */
/*
 * 內聯元素不支援垂直外邊距
 */
margin-top: 200px;
margin-bottom: 200px;
}
.s2{
/*
 * 為右邊的元素設定一個左外邊距
 * 水平方向的相鄰外邊距不會重疊，而是求和
 */
/* margin-left: 100px; */
}
</style>
</head>
<body>
<span>我是一個span</span>
<span>我是一個span</span>
<span>我是一個span</span>
<span>我是一個span</span>
<div></div>
</body>
</html>

以上就是css內聯樣式的盒子模型，希望對大家有所幫助。更多css學習指路：

本文教程操作環境：windows7系統、css3版，DELL G3電腦。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/758/viewspace-2828555/，如需轉載，請註明出處，否則將追究法律責任。

相關文章