セクションVのボックスモデル

5つのプロパティの1ボックスモデル

　関連するボックスモデルのプロパティは次のとおりです。幅（幅）、高さ（高さ）、パディング（詰め物）、ボーダー（国境）、マージン（余白）。

2つのモードの2ボックスモデル

　　モード1：幅=幅ボックス自体の（正常）

　　モード2：幅=幅+自身が+左右のパディング+左境界と右境界+をパディングボックス（及び+奇モードIE5 IE6にのみ現れます）

または癖モード（ボックスサイズ：ボーダーボックス）：もちろん、ボックスのサイズ変更プロパティにより、標準モード（コンテンツボックスボックスサイズ）を制御します。

例1：

　　例2：

3.パディングのプロパティ

　前提CSS2.1の下で、領域の背景色をパディング、パディングを参照し、背景色とコンテンツ領域と必ずしも同じ。それは、すべての境界内の塗りつぶし領域の背景色です。

　総合的な財産と小さなプロパティ：パディングのプロパティは、二つの書き込みです。

（1）統合されたプロパティ

　　パディング：10pxの20ピクセル30px 40ピクセル、（順：右下の左側）

　　パディング：10pxの20ピクセル30px、（上部と下部にそれぞれ10pxの30pxとは、左右20ピクセルです）

　　パディング：10pxの20ピクセル、（10pxのまで、左右20ピクセルなど）

　　パディング：10pxの、（右下の左側に10pxのです）

（2）小型のプロパティ　

　　パディングトップ：30px;

　　パディング右：20ピクセル;

　　パディング下：40ピクセル;

　　パディング左：100ピクセル;

特定の使用には：小さなプロパティは、統合プロパティを積み重ねて使用することができますが、使用をオンにしないでください。

　パディング：20ピクセル;

パディング左：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>

sinolover

发布了564 篇原创文章 · 获赞 52 · 访问量 8万+

私信关注

セクションVのボックスモデル

おすすめ