CSSボックスモデルの紹介-CSSチュートリアル-php.cn

CSSボックスモデルの紹介

一个新手

リリース： 2017-09-11 10:32:04

オリジナル

1847 人が閲覧しました

ボックスモデル

1 ボックス内の領域

<1>ボックスの主な属性:

width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 
height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 
padding 内边距 
border 边框 
margin 外边距

ログイン後にコピー

<2>次の 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+右border

ログイン後にコピー

<3> ボックスの実際の占有幅を変更しないようにしたい場合、幅を増やすことはパディングを減らすことを意味し、パディングを増やすことは幅を減らすことを意味します。

2. パディングを理解する

<1> ; パディング領域は背景色です CSS2.1 では、背景色はコンテンツ領域と同じでなければなりません。

<2>パディングは 4 方向にあるため、それぞれ 4 方向のパディングを記述することができます。

1 つ目のタイプ: 小さな属性、つまり複合属性。

padding-top:30px;  上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左

ログイン後にコピー

2 番目のタイプ: 包括的な属性。
上下左右のスペースで区切ってください。

padding:30px 20px 40px 100px;

ログイン後にコピー

<3>小さな属性を使用して大きな属性をスタックできます (大きな属性の前に小さな属性を書き込むことはできません):

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; 後ろのパディングが大きな属性を持っていてオーバーレイしてしまうのでダメです。

<4> 一部のタグにはデフォルトでパディングが含まれています。たとえば、Web サイトを構築するときに、このデフォルトのパディングをクリアします。境界線:太さ、線のスタイル、色。

<2> すべての線の種類:

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

ログイン後にコピー

<3> 境界線属性は 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 red

ログイン後にコピー

2 番目の逆アセンブリの方法: 値を分割することですそれぞれの方向で、各要素が分解されます:

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;

ログイン後にコピー

<4> 境界線を使用して三角形を作成できます。

<!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 ブロックレベルの要素とインライン要素

<1> マクロの観点から見ると、Web ページと PS などのデザインソフトウェアには本質的な違いがあります。

Web ページの制作、上から最後まで。デザインソフトを使えば、好きな場所に絵を描くことができます。

<2>標準流れの微視的性質:

(1) ブランクフォールディング現象。

(2)高さが不均一で、下の端が揃っています。
(3) 自動行折り返し 1行で書ききれない場合は、別の行で折り返します。
<3>ブロックレベル要素とインライン要素
(1) タグはブロックレベル要素とインライン要素の2つのレベルに分かれています。
(2) ブロックレベル要素:

霸占一行，不能与其他任何元素并列。
能接受宽高。
如果不设置宽度，那么宽度将默认变为父亲的100%。

ログイン後にコピー

(3) インライン要素:

可以与其他行内元素并排。
不能设置宽高。默认的宽度，就是文字的宽度。

ログイン後にコピー

(4) ラベルはテキストレベルとコンテナレベルに分かれています。

文本级：p、span、a、b、i、u、em
容器级：p 、h系列 、li 、dt 、dd

ログイン後にコピー

基本的に、すべてのテキストレベルのタグはインライン要素です。 p を除いて、それはブロックレベルの要素です。

すべてのコンテナレベルのタグはブロックレベルの要素です。

4.2 ブロックレベル要素とインライン要素間の変換

<1>ブロックレベル要素をインライン要素として設定することができます。インライン要素はブロックレベル要素として設定できます。

<2>display は、要素のインラインおよびブロックレベルのプロパティを変更するために使用されます。

display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。

ログイン後にコピー

<3>CSS には、要素を標準のドキュメントフローから切り離す方法が 3 つあります。

(1) フローティング
(2) 絶対配置

(3) 固定配置

5. フローティング: CSS のレイアウトで最もよく使用される属性です。

5.1 浮動要素はスクリプトから外れています

5.2 浮動要素は互いに近接しています

<1>十分なスペースがある場合、それらは 2 番目の兄弟の近くになります。十分なスペースがない場合は、イー兄弟に頼ることになります。兄弟 1 にもたれるのに十分なスペースがない場合は、自分で左側の壁にくっついてください。

float:left/right;

5.3 フローティング要素には「単語の周囲」効果があります

以上がCSSボックスモデルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

CSSボックスモデルの紹介

ボックスモデル

1 ボックス内の領域

<1>ボックスの主な属性:

<2>次の 2 つのボックスの幅と高さは全く同じで、どちらも 302*302 です。

<3> ボックスの実際の占有幅を変更しないようにしたい場合、幅を増やすことはパディングを減らすことを意味し、パディングを増やすことは幅を減らすことを意味します。

2. パディングを理解する

<1> ; パディング領域は背景色です CSS2.1 では、背景色はコンテンツ領域と同じでなければなりません。

<2>パディングは 4 方向にあるため、それぞれ 4 方向のパディングを記述することができます。

<3>小さな属性を使用して大きな属性をスタックできます (大きな属性の前に小さな属性を書き込むことはできません):

<4> 一部のタグにはデフォルトでパディングが含まれています。たとえば、Web サイトを構築するときに、このデフォルトのパディングをクリアします。境界線:太さ、線のスタイル、色。

<2> すべての線の種類:

<3> 境界線属性は 2 つの主な方法で分割できます:

1 つ目: 要素ごとに

が続く複数の値をスペースで区切ると、順序は上、右、下、左になります:

4.1 ブロックレベルの要素とインライン要素

<1> マクロの観点から見ると、Web ページと PS などのデザイン ソフトウェアには本質的な違いがあります。

<2>標準流れの微視的性質:

5.2 浮動要素は互いに近接しています

<1> マクロの観点から見ると、Web ページと PS などのデザインソフトウェアには本質的な違いがあります。