ホームページ > 記事 > ウェブフロントエンド > CSSボックスモデルの紹介
CSSボックスモデルの紹介
- 一个新手オリジナル
- 2017-09-11 10:32:041755ブラウズ
ボックスモデル
1 ボックス内の領域
f35d6e602fd7d0f0edfa6f7d103c1b57ボックスの主な属性:
width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
2cc198a1d5eb0d3eb508d858c9f5cbdb次の 2 つのボックスの幅と高さは全く同じで、どちらも 302*302 です。
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;}
计算如下：1+100+100+100+1=302px.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border5bdf4c78156c7953567bb5a0aef2fc53 ボックスの実際の占有幅を変更しないようにしたい場合、幅を増やすことはパディングを減らすことを意味し、パディングを増やすことは幅を減らすことを意味します。
2. パディングを理解する
f35d6e602fd7d0f0edfa6f7d103c1b57 ; パディング領域は背景色です CSS2.1 では、背景色はコンテンツ領域と同じでなければなりません。
2cc198a1d5eb0d3eb508d858c9f5cbdbパディングは 4 方向にあるため、それぞれ 4 方向のパディングを記述することができます。
1 つ目のタイプ: 小さな属性、つまり複合属性。
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
2 番目のタイプ: 包括的な属性。
上下左右のスペースで区切ってください。
padding:30px 20px 40px 100px;
5bdf4c78156c7953567bb5a0aef2fc53小さな属性を使用して大きな属性をスタックできます (大きな属性の前に小さな属性を書き込むことはできません):
padding:20px;padding-left:30px;
質問 1:
p{
width:200px;
height:200px;
padding-left:10px;
padding-right:20px;
padding:40px 50px 60px;
padding-bottom:30px;
border:1px solid #000;
}答え:padding-left: 10px;padding-right: 20px; 後ろのパディングが大きな属性を持っていてオーバーレイしてしまうのでダメです。
一部のタグにはデフォルトでパディングが含まれています。たとえば、Web サイトを構築するときに、このデフォルトのパディングをクリアします。境界線:太さ、線のスタイル、色。
2cc198a1d5eb0d3eb508d858c9f5cbdb すべての線の種類:
none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有：solid 、dashed、 dotted
5bdf4c78156c7953567bb5a0aef2fc53 境界線属性は 2 つの主な方法で分割できます:
1 つ目: 要素ごとに
border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于：border:10px solid red;
が続く複数の値をスペースで区切ると、順序は上、右、下、左になります:
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
2 番目の方法: 方向による
最初の逆アセンブリの方法:border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red2 番目の逆アセンブリの方法: 値を分割することですそれぞれの方向で、各要素が分解されます:
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;等价于：border:10px solid red;
23889872c2e8594e0f446a471a78ec4c 境界線を使用して三角形を作成できます。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
p{
width: 0px;
height: 0px;
border: 30px solid white;
border-top-color: pink;
transition:all 1s ease 0s;
}
p:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>4. 標準的なドキュメント フロー
4.1 ブロックレベルの要素とインライン要素
f35d6e602fd7d0f0edfa6f7d103c1b57 マクロの観点から見ると、Web ページと PS などのデザイン ソフトウェアには本質的な違いがあります。
Web ページの制作、上から最後まで。デザインソフトを使えば、好きな場所に絵を描くことができます。標準流れの微視的性質:
(1) ブランクフォールディング現象。(2)高さが不均一で、下の端が揃っています。
(3) 自動行折り返し 1行で書ききれない場合は、別の行で折り返します。
ブロックレベル要素とインライン要素
(1) タグはブロックレベル要素とインライン要素の2つのレベルに分かれています。
(2) ブロックレベル要素:
霸占一行，不能与其他任何元素并列。 能接受宽高。 如果不设置宽度，那么宽度将默认变为父亲的100%。
(3) インライン要素:
可以与其他行内元素并排。 不能设置宽高。默认的宽度，就是文字的宽度。
(4) ラベルはテキストレベルとコンテナレベルに分かれています。
文本级：p、span、a、b、i、u、em 容器级：p 、h系列 、li 、dt 、dd
基本的に、すべてのテキストレベルのタグはインライン要素です。 p を除いて、それはブロックレベルの要素です。
すべてのコンテナレベルのタグはブロックレベルの要素です。 4.2 ブロックレベル要素とインライン要素間の変換
ブロックレベル要素をインライン要素として設定することができます。インライン要素はブロックレベル要素として設定できます。
display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。
5bdf4c78156c7953567bb5a0aef2fc53CSS には、要素を標準のドキュメント フローから切り離す方法が 3 つあります。 (1) フローティング
(2) 絶対配置
5. フローティング: CSS のレイアウトで最もよく使用される属性です。
5.1 浮動要素はスクリプトから外れています
5.2 浮動要素は互いに近接しています
f35d6e602fd7d0f0edfa6f7d103c1b57十分なスペースがある場合、それらは 2 番目の兄弟の近くになります。十分なスペースがない場合は、イー兄弟に頼ることになります。兄弟 1 にもたれるのに十分なスペースがない場合は、自分で左側の壁にくっついてください。
float:left/right;5.3 フローティング要素には「単語の周囲」効果があります以上がCSSボックスモデルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。