ホームページ > 記事 > ウェブフロントエンド > CSSボックスモデルの説明と例
CSSボックスモデルの説明と例
- 无忌哥哥オリジナル
- 2018-06-28 17:23:442847ブラウズ
1. ボックスとは:
1. ボックスモデルは、ページ上のすべての要素をボックスとみなすことができます
2. 人間の言葉で言えば、ボックスは要素の入れ物であり、キャリアです。ボックスは要素のホームです
2. ボックスの種類と機能:
1. 要素には 2 つのタイプがあります: ブロックレベル要素とインライン要素なので、対応するホームは次のとおりです。ブロック レベル ボックスとインライン ボックスの 2 つのタイプもあります
2. ブロック レベル ボックスは通常、他の要素のコンテナとして使用されます。通常、インライン ボックスはブロック レベル ボックスに配置されます。
3. ボックスの配置: 1. ボックスはページ上にあります 配置の順序はチーフスケジューラーによって決定されます: ボックスが家から飛び出して文書の流れから離脱しない限り、文書の流れ 2. 文書の流れ要素が配置される方法と配置する動作の両方であるため、名詞と動詞の両方ですIV、ボックスモデルのコンポーネント: 1. ボックスは主に要素コンテナとして使用されるため、主にブロックを使用します例としてレベル ボックスを紹介します 2. ボックスの 4 つの主要コンポーネント: コンテンツ (コンテンツ)、パディング (内側のエッジ) 距離)、ボーダー (境界線)、マージン (外側のマージン) 5. 4 つの美しさを使用します。ボックスのモデルをすぐに覚えましょう: 1. コンテンツ: 私たち自身の妻またはガールフレンド、これは目に見えて触れることができます 何かを得ることができます 2. パディング: ちょうどあなたの妻の親友のように透明であり、それは常に夫婦間の関係に影響しますあなたとあなたの妻 3. 境界線: それは目に見え、変化可能で魅力的です 何千種類もあり、最も官能的でコケティッシュで、ちょうどあなたの親友、夢の恋人、または小さな恋人のように 4. 余白: それはまた透明です上司の女性や友人の妻のように、パディングと内側のマージンは、あなたの想像力の中で永遠に生き続けましょう 6. コンテンツ: 1. 幅と高さの設定をサポートします 2. 内部はブロック要素またはインライン要素にすることができます 3. 背景設定をサポートします 7、パディング内側マージン: 1. 時計回りに配置された 4 方向のサイズ設定をサポートします: 上、右、下、左 2. 個別に設定することもできます padding-top: top margin padding-right : 右マージン using use with using through through off off off through throughアウト スルー アウト スルー アウト アウト アウト アウト アウト アウト アウト アウト アウト オーバー ‐‐ ‐‐‐ 、10px 5px から 10px へ 10px から 10px 5px から 10px 5px から 10px 5px から 10px 5px から 10px 、5px 下 パディング: 10px 20px 最大 10px、左右 20px、下 30px パディング: 10ピクセルから20ピクセルまで。下 10px、左右 20px パディング: 10px; 上、右、下、左すべて 10px 8、マージンの外側の距離: 1. 時計回りに配置された 4 つの方向のサイズ設定をサポートします: 上、右、 Bottom、Left 2. 個別に設定することもできます margin-top: 上マージン margin-right: 右マージン margin-bottom : 下マージン margin-left: 左マージン 3サポート略語: マージン: 10px 5px 10px 5px、右 5px、下 10px、下 5px 上 10px、約 10px 20px、下 30px マージン: 10px 20ピクセル;上下 10 ピクセル、左右 20 ピクセル マージン: 10 ピクセル、上下左右すべて 10 ピクセル 9. 境界線:1. 内側と外側のマージンは透明なので、幅のみが表示されます。設定してください 2. 境界線は表示されるので、設定できる 3 つのサブプロパティがあります: 幅、スタイル、色 3. 設定順序: 上、右、下、左 上の境界線を設定します:
O border-top-width: 5px; // 幅を設定します
border-top-style: Solid; // スタイルを設定します
border-top-color: // 外観/色を設定します
: 5px ソリッド #f60; //略語
右ボーダーを設定します:
border-right-width: 10px;
border-right-style: 破線ボーダー- right: 10px ダッシュボード
border-bottom: 10px ソリッド #555; 左の境界線を設定します: border-left-width: 8px; border-left-style: dotted;F Border-hered-color: #333;
border-left: 8px dotted #333; // 4 つの境界線のスタイルを統一して設定します使用する 使用する 使用する ‐‐ ‐ ‐‐ ‐‐‐‐‐ ボックスの色:
1: 角丸の設定: 以前は画像を使用して実行できましたが、現在はコードを使用して実行できます
2: 境界線には 4 つの頂点があり、次のように設定できます。各頂点
2.1: 左上隅のボーダー-top-left-radius:20px;
2.2: 右上隅のボーダー-top-right-radius:20px;
2.1:右下隅のボーダー-bottom-right-radius :20px;
2.1: 左下隅ボーダー-下-左-半径:20px;
注: 外国人は私たちとは考え方が異なります。属性では、上、下、下が左と右の前に書かれます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.盒子模型</title>
<style>
.box1 {
/*在父级盒子.box已经设置过了*/
/*width: 200px;*/
/*height:200px;*/
/*background-color: #f89;*/
border: 2px solid #363636;
/*通过计算,设置内边距40px,可实现图片居中*/
padding:40px;
/*结果并未实现居中,这是为什么呢?因为内边距会撑开盒子,这与我们生活中的盒子是不一样的*/
/*解决方法有二个:1.修改盒子大小,宽高减去padding值,2.为该盒子套一个父级盒子,单独设置宽高*/
/*第一种方案:修改当前盒子大小*/
/*width: 120px;*/
/*思考:为什么要减去80px?因为边距是成对的,40px的2倍就是80px*/
/*height:120px;*/
}
/*.box是.box1的父级盒子,在这里设置了宽高,子盒子就不必设置了*/
/*我这里忽略了边框宽度的影响*/
.box {
width: 200px;
height:200px;
}
.box2{
width: 200px;
height:200px;
background-color: lightskyblue;
borer: 2px solid #333;
margin-bottom: 20px;
}
.box3{
width: 200px;
height:200px;
background-color: lightgreen;
borer: 2px solid #333;
/*margin-top: 20px;*/
/*上下外边距的二个特征:*/
/*1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;*/
/*2.如果上下外边距不相待,则会产生塌陷,最终数值大的外边距胜出,以它为准*/
margin-top: 30px;
/*注意:左右外边距不会产生叠加和塌陷,仍是各自相加为最终结果*/
}
/*边框设置*/
.box4 {
width: 200px;
height:200px;
background-color: lightskyblue;
/*设置上边框:*/
/*设置宽度*/
/*border-top-width: 5px;*/
/*设置样式*/
/*border-top-style: solid;*/
/*设置前景色/颜色*/
/*border-top-color: #f60;*/
/*简写*/
/*border-top: 5px solid #f60;*/
/*设置右边框:*/
/*border-right-width: 10px;*/
/*border-right-style: dashed;*/
/*border-right-color: #888;*/
/*border-right: 10px dashed #888;*/
/*设置下边框:*/
/*border-bottom-width: 10px;*/
/*border-bottom-style: solid;*/
/*border-bottom-color: #555;*/
/*border-bottom: 10px solid #555;*/
/*设置左边框:*/
/*border-left-width: 8px;*/
/*border-left-style: dotted;*/
/*border-left-color: #333;*/
/*border-left: 8px dotted #333;*/
/*所有边框使用统一设置:*/
/*统一设置宽度*/
/*border-width: 10px;*/
/*统一设置样式*/
/*border-style: solid;*/
/*统一设置颜色*/
/*border-color: gray;*/
/*统一设置的简写*/
/*border: 10px solid gray;*/
}
/*圆角盒子设置技巧*/
.box5 {
width: 200px;
height:200px;
background-color: #f89;
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;
/*如果每个角的圆度是一样的,可以简化*/
border-radius: 20px;
/*如果原盒子是一个正方形的话,只需要把角度设置为宽度的一半即可得到一个正圆*/
border-radius: 100px;
/*为了适应外部盒子变化,建议设置为百分比,例如:50%,效果完全一样*/
/*border-radius: 50%;*/
}
/*创建有阴影盒子的技巧*/
.box6 {
width: 200px;
height:200px;
background-color: lightskyblue;
/*设置圆角*/
border-radius:50%;
/*设置内边距并重新调整盒子大小*/
padding: 10px;
width: 180px;
height: 180px;
/*设置盒子的阴影*/
/*box-shadow: X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 ;*/
/*外发光:模糊8px,阴影到边框为3px*/
box-shadow:0 0 8px 3px #888;
/*内发光:模糊8px,阴影到边框为3px*/
box-shadow:0 0 8px 3px #888 inset;
/*向右下投影*/
box-shadow:8px 8px 8px 3px #888;
/*向左上投影*/
box-shadow:-8px -8px 8px 3px #888 ;
}
</style>
</head>
<body>以上がCSSボックスモデルの説明と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSコンテキストセレクター次の記事：CSSコンテキストセレクター