CSSボックスモデル関連styles_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSSボックスモデル関連styles_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

早速、基本的なことから始めましょう。

ボックスの種類

1. ボックスの基本的な種類

cssでは表示を使ってボックスの種類を定義しますが、大きく分けてブロック型とインライン型に分けられます。

例えば、div はブロックタイプに属し、span はインラインタイプに属します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            background-color: yellow;        }        span        {            background-color: #000099;        }    </style></head><body>   <div>我是div</div>   <span>我是span</span>   <span>我也是span</span></body></html>

ログイン後にコピー

このコードを実行すると、ブロックタイプの幅がブラウザ全体を占めることが明確にわかりますが、 inline 要素の幅はそのコンテンツの幅に等しい

各行には 1 つのブロック要素のみを収容できますが、複数の inline 要素を収容できます。

次に、display 属性を通じて div を block タイプに変更し、span を inline 属性に変更して、その実行効果を確認します。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            background-color: yellow;            display: inline;        }        span        {            background-color: #000099;            display: block;        }    </style></head><body>   <div>我是div</div>   <span>我是span</span>   <span>我也是span</span></body></html>

ログイン後にコピー

2.inline-block 型

Inline-block は、要素の表示属性を inline-block に設定し、その表示と設定を行います

to inline 同じですが、要素の幅と高さの属性はブロック要素にのみ適用できます。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            background-color: yellow;            display:inline-block;            width: 100px;            height: 100px;        }    </style></head><body>   <div>我是div</div>   <div>我是div2</div></body></html>

ログイン後にコピー

3. インラインテーブル型

まず以下を見てください

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        table        {            width: 200px;            border: solid 1px red;            display: inline-table;            vertical-align: bottom;        }        td{            border: solid 1px red;        }    </style></head><body bo>   大家好   <table>       <tr>           <td>1</td>       </tr>       <tr>           <td>2</td>       </tr>   </table>   大家好</body></html>

ログイン後にコピー

必要に応じて、テーブルはブロックタイプに属します。 text と table ピア表示の場合、テーブルの表示属性を inline-table に設定する必要がありますが、ブラウザ

ごとにテキストとテーブルの配置方法が異なるのが一般的です。

4.list-item型

複数の要素をリストとして表示し、その前にリストマークを付けることができます。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">      div{          display: list-item;          list-style-type: decimal;          margin-left: 30px;      }    </style></head><body bo>   <div>list1</div>   <div>list2</div>   <div>list3</div>   <div>list4</div>   <div>list5</div></body></html>

ログイン後にコピー

5. none 型

要素を none 型に設定すると、要素は表示されません。

6.overflow属性

overflowは、ボックス内の内容が表示できない場合に使用される表示方法です。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">      #div1{          width: 100px;          height: 100px;          border: solid 1px red;          overflow: hidden;      }      #div2{          margin-top: 10px;          width: 100px;          height: 100px;          border: solid 1px green;          overflow: scroll;      }    </style></head><body>   <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>   <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div></body></html>

ログイン後にコピー

また、overflow-x と overflow-y という 2 つの属性もあり、水平または垂直方向のボックス範囲を超えるコンテンツの表示モードを設定するために使用できます。

7.box-sizing 属性

box-sizing 属性は、CSS3 の新しいボックスモデル属性です。

要素の幅と高さの設定にはcssのwidthとheightを使いますが、box-sizing属性でも指定できます

width属性とheight属性で設定した幅と高さに要素内のパディング領域を含めるかどうか、境界線の幅と高さだけでなく。

box-sizing 属性値は content-box と border-box です。 content-box は要素の幅と高さに内部パディング領域

が含まれていないことを示し、border-box は要素の幅と高さに境界線の幅と高さが含まれていないことを示します。内部のパディング領域と境界線。 ❤️

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7694

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。