CSS ボックスモデルの 4 つのプロパティの紹介 (コード付き)-CSSチュートリアル-php.cn

この記事では、CSS ボックス モデルの 4 つの属性について説明します (コード付き)。必要な方は参考にしていただければ幸いです。

1. 置換要素と非置換要素

「外部ボックス」がインラインレベルかブロックレベルかに応じて、要素をインライン要素とブロックレベル要素に分けることができます。コンテンツを置換するには、要素を置換要素と非置換要素に分けることもできます

1.1 置換要素の定義 特定の属性値によって示されるコンテンツを変更することで置換できる要素を「置換要素」と呼びます一般的な置換要素には、 、 、 またはフォーム要素 1.2 置換要素の特徴

1.コンテンツの内部スペース、背景色、その他のチェック ボックスなどの CSS の影響を受けません。 、 など、すべて独自のサイズを持ちます。サイズ 3. 多くの CSS プロパティには独自のパフォーマンス ルールがあり、vertical-align では、置換要素はデフォルトでベースライン (文字 x の下端) になり、置換要素のベースラインは突然下端として定義されます。要素の端

1.3 置換される要素のサイズ計算ルール 置換される要素のサイズは、内側から、固有サイズ、HTML サイズ、CSS サイズの 3 つのカテゴリに分類されます

固有サイズ は、置換コンテンツの元のサイズを指します; たとえば、画像、ビデオ、入力が独立したファイルとして存在する場合、それらはすべて独自の幅と高さになります

HTML サイズ 、「HTML サイズ」は HTML ネイティブ属性。これらの HTML ネイティブ属性には、 の width 属性と height 属性が含まれます。 の size 属性、 の cols および rows 属性 HTML 原生属性改变，这些 HTML 原生属性包括 的 width 和 height 属性、 的 size 属性、 的 cols 和 rows 属性

CSS 尺寸 特指可以通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的尺寸，对应盒尺寸中的 content box

尺寸计算优先级: CSS 尺寸 > HTML 尺寸 > 固有尺寸

二、content属性 注意， content 属性不仅能用于::before/::after中，还能用于元素中，不过有一定兼容性。

在 Chrome 浏览器下，所有的元素都支持 content 属性，而其他浏览器仅在::before/::after 伪元素 中才有支持

案例1：基于伪元素的图片内容生成技术

HTML：

设置src属性显示图片

ログイン後にコピー var eleButton = document.querySelector('button'), eleImg = document.querySelector('img');if (eleButton && eleImg) { var initValueButton = eleButton.innerHTML; // 图片地址 var srcImage = eleImg.getAttribute('data-src'); // 移除该属性 eleImg.removeAttribute('data-src'); // 按钮点击事件 eleButton.addEventListener('click', function() { if (this.innerHTML == initValueButton) { this.innerHTML = '移除src属性'; // 图片显示 eleImg.setAttribute('src', srcImage); } else { this.innerHTML = initValueButton; // src属性移除 eleImg.removeAttribute('src'); } });} ログイン後にコピー CSS：

img { display: inline-block; width: 256px; height: 192px; /* 隐藏Firefox alt文字 */ color: transparent; position: relative; overflow: hidden;}img:not([src]) { /* 隐藏Chrome alt文字以及银色边框 */ visibility: hidden;}img::before { /* 淡蓝色占位背景 */ content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #f0f3f9; visibility: visible;}img::after { /* 黑色alt信息条 */ content: attr(alt); position: absolute; left: 0; bottom: 0; width: 100%; line-height: 30px; background-color: rgba(0,0,0,.5); color: white; font-size: 14px; transform: translateY(100%); /* 来点过渡动画效果 */ transition: transform .2s; visibility: visible;}img:hover::after { transform: translateY(0);} ログイン後にコピー

原理 ：图片没有src时， ::before 和 ::after 可以生效；给图片添加一个 src 地址时，图片从普通元素变成替换元素，原本都还支持的 ::before 和 ::after

CSS サイズ 具体的には、 width と height または max-width/min-width と max-height/ min-height で設定したサイズは コンテンツボックス に対応します

サイズ計算の優先順位: CSS サイズ > HTML サイズ > 固有サイズ 2. Content 属性 content 属性は、::before/::after でのみ使用できるわけではありません。要素にもありますが、互換性はあります。 Chrome ブラウザでは、すべての要素が content 属性をサポートしますが、他のブラウザでは::before/::after 擬似要素のみがサポートされます

ケース 1: 擬似要素に基づく画像コンテンツ生成テクノロジー HTML: img { content: url(1.jpg); } ログイン後にコピー

img:hover { content: url(laugh-tear.png); } ログイン後にコピー CSS:

《CSS 世界》 h1 { width: 180px; height: 36px; background: url(logo.png); /* 隐藏文字 */ text-indent: -999px; } ログイン後にコピー

原則 : 画像に src がない場合、 ::before と :: after は、 src アドレスを画像に追加すると有効になり、元の ::before と が通常の要素から置換要素に変わります。 >::after のコードもサポートされています。現時点ではすべて無効です

ケース 2: コンテンツに画像が導入されています

正在加载中 ...

dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } } ログイン後にコピー ケース 3: ホバーによる画像置換の実装

我是王小二 我是王小二的大儿子 我是王小二的二儿子 我是王小二的二儿子的大孙子 我是王小二的二儿子的二孙子 我是王小二的二儿子的小孙子 我是王小二的三儿子 我是王小三 我是王小四 我是王小四的大儿子 ログイン後にコピー ケース 4: h1 SEO のエレガントな実装

CSS： .reset { padding-left: 20px; counter-reset: wangxiaoer;}.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer;} ログイン後にコピー ケース 5: アニメーションの読み込み

a { padding: .25em 0; } ログイン後にコピー ケース 6: カウンタ (理解) 登录 注册

a + a:before { content: ""; font-size: 0; padding: 10px 3px 1px; margin-left: 6px; border-left: 1px solid gray; } ログイン後にコピー /* 矩形 */ div { padding: 50%; } /* 正方形 */ div { padding: 25% 50%; } ログイン後にコピー 3. パディング属性

パディングはインライン要素の水平方向と垂直方向の両方に影響します

パディング 幅と高さのパーセンテージ親要素の幅の計算に基づいています

非常に多くのフロントエンドの同僚は、インライン要素のパディングは水平方向にのみ影響し、垂直方向には影響しないという間違った理解を持っています。この認識は不正確です。インライン要素です パディングは、垂直方向のレイアウトと視覚的なパフォーマンスにも影響します。 インライン要素には視覚的な幅と視覚的な高さ (clientHeight と clientWidth は常に 0)、垂直方向の動作は line-height とvertical-align に完全に影響されます。 前の行の内容と次の行の内容の間の距離が視覚的に変化しないため、垂直方向のパディングが効果がないように感じられます。 ケース 1: クリック領域を増やす

/* 菜单 */ .icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; /* 默认border-color:currentColor; */ border-top: 10px solid; border-bottom: 10px solid; /* 核心 */ background-color: currentColor; background-clip: content-box; } ログイン後にコピー ケース 2: 任意の高さのセパレーター

/* 无法改变尺寸 */ .father { width: 300px; margin: 0 -20px; }

/* .son 尺寸变化 */

.father { width: 300px; } .son { margin: 0 -20px; } ログイン後にコピー ケース 3: 等比率ボックス

Web ページのバナーの等比率サイズの画像などのアダプティブ レイアウトの実装に使用されます

.column-box { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; } ログイン後にコピー ケース 4: グラフィック描画 第一行

第二行

p { margin: 1em 0; } ログイン後にコピー 4. マージン属性 マージンの機能:

パディングと異なり、マージンは負の値にすることもできます

パディングと同様に、マージンのパーセンテージも親の幅に相対します。要素

4.1 負のマージン値の適用🎜🎜 (1) ボックスのサイズを大きくする🎜🎜🎜要素が「利用可能なスペースをフルに使用している」状態にある場合にのみ、マージンは要素の視覚的なサイズを変更できます🎜🎜

ログイン後にコピー 🎜 (2) クラシック なし 2 列レイアウトとの互換性🎜 .father { overflow: hidden; } .son { margin: 1em 0; }

ログイン後にコピー ログイン後にコピー 🎜 レイアウト原則:🎜🎜 デフォルトでは、垂直ブロックレベル要素の上下の距離は 0 です。 margin-bottom:-9999px は、その後のすべての要素を意味します要素と上位要素 要素の空間距離は -9999px になります。これは、後続のすべての要素が 9999px 上に移動したことを意味します。この時点で、神のpadding-bottom:9999pxをストロークします。 要素の高さ (プラスまたはマイナス) を増やしても、レイアウト レイヤーには影響しませんが、必要なものがもたらされます。ビジュアル レイヤーには、追加の 9999 ピクセルの高さの利用可能な背景色があります。 🎜🎜4.2 マージンのマージ🎜🎜🎜 ブロックレベル要素の上マージン (margin-top) と下マージン (margin-bottom) が 1 つのマージンにマージされる場合があります。この現象は「マージンマージ」🎜 と呼ばれます。 🎜2 つの条件: ブロックレベルの要素とマージンのマージが垂直方向にのみ発生する 3 つのシナリオ🎜🎜🎜🎜🎜🎜 (1) 隣接する兄弟要素のマージンのマージ。これは、最も一般的で基本的なマージン マージ 🎜

.father { width: 300px; } .son { width: 200px; margin-right: 80px; margin-left: auto; } ログイン後にコピー ログイン後にコピー 🎜 (2) 親要素と最初/最後の子要素 🎜 .father { width: 300px; height: 150px; background-color: #f0f3f9; position:relative; } .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; background-color: #cd0000; margin: auto; } ログイン後にコピー ログイン後にコピー 🎜 (3) 空のブロック レベル要素のマージン マージ 🎜 .father { overflow: hidden; } .son { margin: 1em 0; }

ログイン後にコピー ログイン後にコピー 此时.father 所在的这个父级 元素高度仅仅是 1em，因为.son 这个空 元 素的 margin-top 和 margin-bottom 合并在一起了

如何阻止margin发生合并？

对于 margin-top 合并，可以进行如下操作(满足一个条件即可):

父元素设置为块状格式化上下文元素;

父元素设置 border-top 值;

父元素设置 padding-top 值;

父元素和第一个子元素之间添加内联元素进行分隔。

对于 margin-bottom 合并，可以进行如下操作(满足一个条件即可):

父元素设置为块状格式化上下文元素;

父元素设置 border-bottom 值;

父元素设置 padding-bottom 值;

父元素和最后一个子元素之间添加内联元素进行分隔;

父元素设置 height、min-height 或 max-height。

margin 合并的计算规则 ：

“正正取大值”“正负值相加”“负负最负值”

4.3 margin:auto深入 margin:auto 的填充规则如下 (1)如果一侧定值，一侧 auto，则 auto 为剩余空间大小。 (2)如果两侧均是 auto，则平分剩余空间。

一侧auto应用

.father { width: 300px; } .son { width: 200px; margin-right: 80px; margin-left: auto; } ログイン後にコピー ログイン後にコピー 两侧auto，水平垂直居中

.father { width: 300px; height: 150px; background-color: #f0f3f9; position:relative; } .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; background-color: #cd0000; margin: auto; } ログイン後にコピー ログイン後にコピー 注意：

display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素， 垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。

五、border属性 几个特点：

border属性值不支持百分比

border-style 默认值为none

border-color 默认值为currentColor

应用1：图片上传hover变色

.add { color: #ccc; border: 2px dashed; } .add:before { border-top: 10px solid; } .add:after { border-left: 10px solid; } /* hover变色 */ .add:hover { color: #06C; } ログイン後にコピー 应用2：优雅增加点击区域

/* box-sizing非border-box时 */ .icon-clear { width: 16px; height: 16px; border: 11px solid transparent; } ログイン後にコピー 应用3：三角形绘制

div { width: 0; border: 10px solid; border-color: #f30 transparent transparent; } ログイン後にコピー border能构成三角形和梯形的原理如下：

通过改变width/height以及border-width在不同方位的尺寸，可以改变三角形的倾角方位和尺寸

应用4：border等高布局

.box { border-left: 150px solid #333; background-color: #f0f3f9; } .box > nav { width: 150px; margin-left: -150px; float: left; } .box > section { overflow: hidden; } ログイン後にコピー border等高布局的局限性：

由于 border 不支持百分比宽度，因此，适合至少一栏是定宽的布局

等高布局的栏目有限制。基本上，border 等 高布局只能满足 2~3 栏的情况，除非正好是等比例的，那还可以使用 border-style:double 实现最多 7 栏布局

CSS ボックス モデルの 4 つのプロパティの紹介 (コード付き)

CSS ボックスモデルの 4 つのプロパティの紹介 (コード付き)