CSS の内側の境界線を設定する方法: 最初に HTML サンプル ファイルを作成し、次に div を定義し、最後に border 属性と box-sizing 属性を使用して内側の境界線を追加します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。
CSS では、border 属性と box-sizing 属性を併用して内枠を追加できます。 border 属性は境界線を追加するために使用され、box-sizing 属性は指定された領域に適合する特定の方法で特定の要素を定義するために使用されます。内側の境界線を追加するには、box-sizing 属性値を border-box 値に設定します。 。
まずはcssで内枠を設定する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box1 {
width: 50%;
border: 1em solid red;
float: left;
}
div.box2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">普通边框！！</div>
<div class="box2">内边框！！</div>
</div>
</body>
</html>box-sizing プロパティ
box-sizing プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を "border-box" に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。
構文
box-sizing: content-box|border-box|inherit;
プロパティ値:
content-box: CSS2.1で規定されている幅と高さの動作です。要素の幅と高さ (最小/最大プロパティ) を指定すると、ボックスの幅と高さに適用されます。指定された幅と高さを除く要素のパディングと境界線のレイアウトと描画
border-box: 幅と高さ (min/max プロパティ) を指定すると、要素の境界線が決まります。つまり、要素の幅と高さの指定には、パディングとボーダーが含まれます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。
inherit: 親要素から継承するボックス サイズ属性の値を指定します。
[推奨学習: css ビデオ チュートリアル ]
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html>レンダリング:
以上がCSSで内側の枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
マークダウンに埋め込まれたコンテンツApr 13, 2025 am 09:12 AMMarkdownはHTMLをサポートしているため、たとえばYouTubeビデオを埋め込む必要がある場合は、埋め込みコードをコピーして貼り付けて、Markdownドキュメントにドロップするだけです。
何が私たちが読んでいるのか、2019年Apr 13, 2025 am 09:10 AMそうです、だから、（そう）インターネット上で読むべき多くのこと。実際、非常に多くのことで、すべてに追いつくのは難しいです。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
