當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

第五节盒子模型

發布時間：2023/12/10 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了第五节盒子模型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 盒子模型的五個屬性

　盒模型主要涉及的屬性有：width(寬度)、height(高度)、padding(內邊距)、 border(邊框)、margin(外邊距)。

2. 盒子模型的兩種模式

　　模式一：width=盒子自身的width ?（正常情況）

　　模式二：width=盒子自身的width+左padding+右padding+左border+右border ?（僅在IE5和IE6+怪異模式中出現）

? ? 當然也可以通過box-sizing屬性，來控制標準模式(box-sizing:content-box)還是怪異模式(box-sizing:border-box)。

? ? 實例1：

? ??? ?

　　實例2：

? ? ??

? ? ? ??

3. padding屬性

　指內邊距，padding的區域有背景顏色，css2.1前提下，并且背景顏色一定和內容區域的相同。也就是說，background-color將填充所有border以內的區域。

　padding屬性分兩種寫法：綜合屬性和小屬性。

? ?(1). 綜合屬性

　　padding：10px 20px 30px 40px，（順序為：上右下左）

　　padding：10px 20px 30px，（上下分別為10px和30px，右左均為20px）

　　padding：10px 20px，（上下為10px，右左為20px）

　　padding：10px，（上右下左均為10px）

? ?(2). 小屬性　

　　padding-top: 30px;

　　padding-right: 20px;

　　padding-bottom: 40px;

　　padding-left: 100px;

???特別用法：可以用小屬性來層疊綜合屬性，但不要反過來用。

　padding: 20px;

? ?padding-left: 30px;

4. border屬性

　指邊框，border有三個要素：粗細、樣式、顏色。如果顏色不寫，默認為黑色，其它兩個屬性不能不寫。

? ?首先介紹一下border的所有線性：

? ?

　 border可以分兩種寫法：綜合屬性和小熟悉

? ?(1). 綜合屬性　

? ? border：10px solid red，（上右下左四個邊框均為10px的實線顏色為紅色）

? ?(2). 小屬性　

? ? A: 按照三要素來分

　　border-width: 10px 20px，（符合上右下左的規律，可以寫1、2、3、4個屬性）

　　border-style: solid，（符合上右下左的規律，可以寫1、2、3、4個屬性）

　　border-color: red blue green pink，（符合上右下左的規律，可以寫1、2、3、4個屬性）

? ?B: 按照方向來分

　　border-top:10px solid red;

　　border-right:10px solid red;

　　border-bottom:10px solid red;

　　border-left:10px solid red;

? ?C: 按照方向-三要素來分

　　border-top-width:10px;

　　border-top-style:solid;

　　border-top-color:red;

　　border-right-width:10px;

　　border-right-style:solid;

　　border-right-color:red;

　　border-bottom-width:10px;

　　border-bottom-style:solid;

　　border-bottom-color:red;

　　border-left-width:10px;

　　border-left-style:solid;

　　border-left-color:red;

　特別用法：可以用小屬性來層疊綜合屬性，但不要反過來用。

5. margin屬性

　指外邊距，border以為的區域，通常兩個盒子之間的距離。

? ?(1). 塌陷現象

? ?在標準文檔流中，margin豎直方向存在塌陷現象，豎直方向取margin的最大值。

<!DOCTYPE?html>

<html>

????<head>

????????<meta?charset="UTF-8">

????????<title></title>

????????<style?type="text/css">

????????????.p1 {

????????????????width: 200px;

????????????????height: 300px;

????????????????background-color: pink;

????????????????margin-bottom: 30px;

????????????}??

????????????.p2 {

????????????????width: 200px;

????????????????height: 300px;

????????????????background-color: yellow;

????????????????margin-top: 50px;

????????????}

????????</style>

????</head>

????<body>

????????

????????<p?class="p1"></p>

????????<p?class="p2"></p>

????</body>

</html>

? 在非標準文檔流中，margin豎直方向不塌陷。

<!DOCTYPE?html>

<html>

????<head>

????????<meta?charset="UTF-8">

????????<title></title>

????????<style?type="text/css">

????????????*{

????????????????margin: 0;

????????????????padding: 0;

????????????}

????????????.p1 {

????????????????width: 200px;

????????????????height: 300px;

????????????????background-color: pink;

????????????????margin-bottom: 30px;

????????????????float: left;

????????????}??????????

????????????.p2 {

????????????????width: 200px;

????????????????height: 300px;

????????????????background-color: yellow;

????????????????margin-top: 50px;

????????????????float: left;

????????????}

????????????div{

????????????????width: 200px;

????????????????border: 2px dashed black;

????????????????overflow: hidden;

????????????}

????????</style>

????</head>

????<body>

????????<div>

????????????<p?class="p1"></p>

????????????<p?class="p2"></p>

????????</div>

????</body>

</html>

? (2). 利用 “margin：0 auto” 屬性使盒子水平居中

? 使用條件：

?　　A：盒子要有明確的width。

　　 B：只有在標準文檔流中的盒子中才會生效，浮動了或定位了均無效。

? ? ? C：該特性作用的是盒子，使盒子水平方向居中。

　　 D：若要使盒子中的內容水平居中：text-align：center；豎直居中：line-height=height。

<!DOCTYPE?html>

<html>

????<head>

????????<meta?charset="UTF-8">

????????<title></title>

????????<style?type="text/css">

????????????.box1{

????????????????width: 300px;

????????????????height: 300px;

????????????????background-color: palevioletred;

????????????????/*盒子水平居中*/

????????????????margin: 0 auto;??

????????????????/*文字水平居中*/

????????????????text-align: center;

????????????????/*盒子豎直居中*/

????????????????line-height: 300px;

????????????}

????????</style>?

????</head>

????<body>

????????<div?class="box1">

????????????我要居中了

????????</div>???

????</body>

</html>

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的第五节盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

编程问答

第五节 盒子模型

總結

第五节盒子模型