牛ブリスケットリリースシステムCSSボックスモデルの基礎_html/css_WEB-ITnose

ボックスモデルはCSSでページを制御する際に非常に重要な概念です。ボックス モデルは、ブリスケット パブリッシング システム全体で使用されます。ボックス モデルとその中の各要素の使用法をマスターすることによってのみ、ページ上の各要素を真に制御することができます。ページ上の要素はボックスとみなすことができ、これらのボックスも相互に影響を与えます。

1. ボックスの内部構造 まず例を見てみましょう。壁に図のように配置された 4 つの絵画があるとします。各絵画には境界線があり、絵画と境界線の間には少しの距離があります。写真間の距離、余白。

フォトフレームだけでなく、コンピューター、窓など、私たちの生活の中でそのような例はたくさんあります。これらの長方形のオブジェクトは「ボックス」と呼ばれます。

ページレイアウトでは、さまざまなパーツを合理的に整理するために、ボックスモデルが導入されています。 CSS では、ボックス モデルは、図に示すように、コンテンツ、ボーダー、パディング、マージンの 4 つの部分で構成されます。

CSS では、各部分の幅と高さ、サイズを設定してボックスを制御できます。これらの特性をうまく利用することによってのみ、理想的なレイアウト効果を達成することができます。これはプロジェクトにおいて私が深く理解していることですが、場合によっては 1 ピクセルさえ間違えることはできず、わずかな違いが大きな違いを生む可能性があると言えます。

2. 属性設定

1) border

主な属性は、border、color(色)、width(太さ)、style(スタイル)の3つです。 3 つの属性の連携により、境界線の設定で良好な結果が得られます。 CSS を使用して境界線を設定する場合、border-width、border-color、border-style を使用してそれぞれを設定できます。

*border-width は、厚さを設定します: 薄い (細い)、中程度 (中程度)、厚い (太い)、および (特定の値)。これは、ボーダー幅など、私たちのシステムで最も一般的に使用されます。 : 4px;

*style 境界線のスタイルを設定します: なし (書式なし)、非表示 (非表示)、点線 (点線)、ダッシュ、実線、二重など

*色の設定: ステートメント境界線-color: red ；

2) パディング

境界線と同様に、コンテンツとマージンの間の距離を制御するために使用されます。

注: パディングには 1、2、3、または 4 つの属性を設定できます

1: 上、下、左、右の 4 つのパディング値はすべて同じ値です

2:前者は上下 2 つのパディング値、後者は左右の 2 つのパディング値です。時計回りに 1 つが上、右、下の 4 つに分けることができます、左のパディング値

3) margin

margin 属性値の設定方法はパディングとほぼ同じなので、ここでは詳しく説明しません

ボックスモデルはCSS の核となる内容をしっかりと理解し、上手に使いこなす必要があります。これらの基礎知識があればこそ、理想的なページをデザインすることができます。この知識を熟知し、実際に適用する必要があります。ブリスケット ニュース リリース システムを開発する場合、ビデオの形式に完全に従って独自のリリース システムを作成する必要はありません。