HTML5 5 日目のメモ

黄舟
リリース: 2016-12-28 17:17:02
オリジナル
1250 人が閲覧しました

CSS プロパティ

段落プロパティ

letter-spacing:10px; 単語間の距離

word-spacing:1px; 単語間の距離 (主に英語の Web サイトで使用されます)

text-transform:capitalize(各単語は大文字です) 大文字 (すべて大文字) 小文字 (すべて小文字) (主に英語の Web サイトで使用されます)

white-space:normal/nowrap (改行なし)

Box モデル

すべてのタグは 1 つの Box とみなされます。

ブロックレベル要素を大きなボックス、インライン要素を小さなボックスとして考えてください

ボックスモデルはどのような部分で構成されていますか?

width+height (コンテンツの幅と高さ)+padding (内側のマージン/パディング)+border(ボーダー)+margin(外側のマージン)

border:(ボーダー)

border-top:

border-bottom:

border-left:

border-right:

border-bottom: (下枠線)

border-bottom-style:solid (実線) dashed (破線) dotted (破線) double (double) Solid line) ボーダーの線のスタイル

border-bottom-color:red/#fff; ボーダーの色

border-bottom-width:3px; ボーダーの太さ

border:3px Solid red;

border:none/ 0;

border-top:none/0;

border-collapse:collapse (重複したエッジを削除)

padding: (inner margin, inner padding, inner padding) コンテンツからコンテンツまでの距離境界線は相対的です

padding-top:

padding-left:

padding-right:

padding-bottom:

(パディングはボックスの幅と高さに影響します)

padding:10px(上、下, left and right)

padding:10px 20px;(up, down, left, right) )

padding: 10px 20px 30px; (右上、下) left = right 「時計回りの原則に従う」

padding: 10px 20px 30px 40px; (右上、左下)

padding: 0 0 5px 0; (このようにのみ記述できます)

margin: (マージン、パディング) ラベル間の距離
相対

のインライン要素は実装できません

ブロックレベル要素の上下のマージンは累積できず、最大値のみを取ることができます

インライン要素とブロックレベル要素の左右のマージンは累積値です

。マージンはボックスの幅と高さに影響しません。

margin: 10px (上、下、左、右)

margin: 10px 20px; 20px 30px; (右上、下) left = right 「時計回りの原則に従う」

margin: 10px 20px 30px 40px; (右上、左下)

margin: 0 0 5px 0; )

ボックスの実際のサイズ:

幅: コンテンツの幅 (幅) + ボーダー (左右) + パディング ((左右) + マージン (左右)

高さ: コンテンツの高さコンテンツ (高さ) + ボーダー (上部と下部) + パディング (上部と下部) + マージン (上部と下部)

外側のマージンの適用: 親要素のセンタリング メソッドで、ブラウザーのボックスを中央に配置します

margin :0 auto;

CSS3の新しい属性

box-sizing: border -box/content-box borderとpaddingの値を無視する

以上がHTML5の5日目のメモの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート