ホームページ > 記事 > ウェブフロントエンド > Web 開発 (3) 伝説のボックス モデル border_html/css_WEB-ITnose
Web 開発 (3) 伝説のボックス モデル border_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:101027ブラウズ
シンプルへの道
前の章では、パディングの使用法は、ギフトのバブル領域 (つまり、保護領域) と同様に、テキスト領域に内側のマージンを追加することであることを学びました。ボックスの場合、ボックスは外側のボール紙のシェルがあります。これは Web 開発に対応する属性を持ちますか?
答えは明らかに「はい」です。今日の主役はボーダーです。次のコードを見てください:
rrree
border.png
効果は写真の通りで、オレンジ色の領域が境界線です。コードの境界線について考えてみましょう: 5px の実線のオレンジ色は何を意味しますか?このコード行は次のコードと同等です:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Border</title><style> div { width: 200px; height: 200px; background-color: red; border: 5px solid orange; }</style></head><body><div></div></body></html> 別々に記述した場合、上記の 3 つのステートメントは必須です。OK、元のステートメントを分析できます。
- 最初のパラメータは border-width です
- 2 番目のパラメータは border-style です
- 3 番目のパラメータは border-color です
以下のコードを見てみましょう:
/*定义边框宽度*/border-width: 5px;/*定义边框样式*//*solid为实线、dashed为虚线、dotted为点线*/border-style: solid;/*定义边框颜色*/border-color: orange;
そうです、私たちもできます特定の方向の境界線を個別に設定できるととても便利ですよね？
注: 境界線を使用すると、ボックスの領域が大きくなることがわかります。はい、境界線は外部に埋め込まれており、その存在は幅と高さに影響します。
創造は永遠です、お茶を飲みましょう...
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。