WEB遠位ボックスモデルの知人

CSSボックスモデルの概要

要素は、パディング、マージン内に表示されるコンテンツである中で、国境を箱の大きさの計算に関与することになります、例えば：ボックスは100ピクセルのサイズ、余白10pxの、パディング5pxのがあり、唯一の実際のコンテンツ70ピクセルを表示する

ことが容易にするためにページ上の制御要素は、それはデフォルトのマージンや外部の要素をクリアするのが最適です。

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

コンテンツ算出された幅と高さ

widthプロパティの幅と高さの属性は、ボックスの高さ寸法を制御することができます。

幅と高さの属性値は、親要素の割合％に対して、異なる単位または値とすることができる、最も一般的な方法は、画素値です。

例えば、上のFirefox、IE6となどほとんどのブラウザは、W3Cの仕様を採用している、CSSボックスモデルの合計の幅と高さの合計計算の原則の規範に沿ったものです。

/*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：

図1は、幅と高さの幅は、高さ属性のみインライン要素の（IMGタグと入力除く）ブロックレベル要素に適用される有効でない属性。

ボックスモデルの全体の高さを計算する際に、上下の余白が垂直ボックスを組み合わせた場合に2もまた、考慮されるべきです。

3、ボックスは幅/高さや父の幅/高さを与えていない場合は、パディングサイズが存在する場合には影響を与えません。

ボックスフレーム（枠線）

border : border-width || border-style || border-color

枠線のスタイル（ボーダースタイル）を設定 - ボーダーのプロパティ

次のようなスタイルは、境界線のスタイルは、ページフレームを定義するために使用され、属性値が使用されます。

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

ボックスフレーム書かれたサマリー表

セット内容	スタイルプロパティ	一般的なプロパティ値
国境に	border-top-スタイル：スタイル;国境トップ幅：幅;のborder-top-色：色;国境トップ：幅、スタイル、色、
ボトムボーダー	border-bottom-スタイル：スタイル; BORDER-ボトム幅：幅; BORDER-底色：色;のborder-bottom：幅、スタイル、色、
左ボーダー	border-left-スタイル：スタイル;のborder-left-幅：幅;のborder-left-色：色;国境左：幅、スタイル、色、
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边 下边 左边];	像素值
颜色综合设置	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色;

表格的细线边框

表格线变粗原因是因为边框重叠

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示边框合并在一起。

圆角边框(CSS3)

语法格式：

border-radius: 左上角  右上角  右下角  左下角;

案例:

<style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        div:first-child {  /* 结构伪类选择器 选亲兄弟 */
            border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
        }

        div:nth-child(2) {
            /*border-radius: 100px;    取宽度和高度 一半  则会变成一个圆形 */
            border-radius: 50%;   /*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
        }

        div:nth-child(3) {
            border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
        }
        
        div:nth-child(4) {
            border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
        }
        div:nth-child(5) {
            border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
        }
        div:nth-child(6) {
            border-radius: 100px;  
            height: 100px; 
        }
        div:nth-child(7) {
            border-radius: 100px 0;  
        }   
        </style>

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

值的个数	表达意思
1个值	padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值	padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

外边距（margin）

マージンプロパティは、セットの余白に使用されています。設定マージンは、これは通常、他空白に置くことができない、要素間の「ギャップ」を作成します。

マージントップ：余白に

マージン右：右マージン

マージン下：下マージン

margin-left：余白に

マージン：下マージン左外側にマージン右マージン

同じパディングを持つための値。

真ん中を達成するために箱の外から

ボックスには、中間レベルを達成することができます、我々は2つの条件を満たす必要があります。

1. これは、ブロックレベル要素でなければなりません。
2. ボックスの幅を指定する必要があります（幅）

次いで、得マージンがオートに設定されているについて、ブロックレベル要素を水平中心作ることができます。

この方法では一般的なページレイアウト、次のサンプルコード：

.header{ width:960px; margin:0 auto;}

中央揃えテキストボックスの写真と背景の違い

1. 中央：テキストは、水平テキスト整列を中心とします
2. ボックスが水平に自動に変更マージンを中心に

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

1. そのようなクラスの我々の使用に画像を挿入するなどの製品
2. 私たちの背景画像は、一般的に大きい、または小さいアイコンの背景の背景画像に使用されています

section img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }

aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
        background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
    }

マージン合併

上下に隣接する2つのブロック要素が出会うとき、上記素子はボトムマージンマージン底を有する場合、それらの間のマージン底マージン上面より垂直方向の間隔を外縁トップから、下記の要素を有します。合計が、二つの大きな。この現象は、（折りたたみマージンと呼ぶ）は、隣接するブロック要素を組み合わせて垂直マージンと呼ばれます。

マージンは、外部から別の要素に遭遇し、それが起こるマージされます：

ソリューション