<p></p>
1.3 置換される要素のサイズ計算ルール
置換される要素のサイズは、内側から、固有サイズ、HTML サイズ、CSS サイズの 3 つのカテゴリに分類されます
固有サイズは、置換コンテンツの元のサイズを指します; たとえば、画像、ビデオ、入力が独立したファイルとして存在する場合、それらはすべて独自の幅と高さになります
HTML サイズ、「HTML サイズ」は HTML ネイティブ属性。これらの <code>HTML
ネイティブ属性には、<img alt="CSS ボックス モデルの 4 つのプロパティの紹介 (コード付き)" >
の width
属性と height
属性が含まれます。 <input>
の size
属性、<textarea></textarea>
の cols
および rows 属性
HTML
原生属性改变,这些HTML
原生属性包括<img alt="CSS ボックス モデルの 4 つのプロパティの紹介 (コード付き)" >
的width
和height
属性、<input>
的size
属性、<textarea></textarea>
的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:
<img alt="美女沉思图" data-src="1.jpg">
<p><button>设置src属性显示图片</button></p>
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で設定したサイズはコンテンツボックス
に対応します
<p></p>
<p></p>サイズ計算の優先順位: CSS サイズ > HTML サイズ > 固有サイズ
2. Content 属性
-
content
属性は、::before/::after でのみ使用できるわけではありません。要素にもありますが、互換性はあります。 Chrome ブラウザでは、すべての要素が content 属性をサポートしますが、他のブラウザでは::before/::after 擬似要素のみがサポートされます
ケース 1: 擬似要素に基づく画像コンテンツ生成テクノロジー
- HTML:
img { content: url(1.jpg); }
<img alt="CSS ボックス モデルの 4 つのプロパティの紹介 (コード付き)" >
img:hover {
content: url(laugh-tear.png);
}
CSS:
<h1>《CSS 世界》</h1>
h1 {
width: 180px;
height: 36px;
background: url(logo.png); /* 隐藏文字 */
text-indent: -999px;
}
<p></p>原則
: 画像に src がない場合、::before
と :: after
は、src
アドレスを画像に追加すると有効になり、元の ::before
と が通常の要素から置換要素に変わります。 >::after
のコードもサポートされています。現時点ではすべて無効です
ケース 2: コンテンツに画像が導入されています
正在加载中<dot>...</dot>
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: ホバーによる画像置換の実装
<div class="reset">
<div class="counter">我是王小二 <div class="reset">
<div class="counter">我是王小二的大儿子</div>
<div class="counter">我是王小二的二儿子 <div class="reset">
<div class="counter">我是王小二的二儿子的大孙子</div>
<div class="counter">我是王小二的二儿子的二孙子</div>
<div class="counter">我是王小二的二儿子的小孙子</div>
</div>
</div>
<div class="counter">我是王小二的三儿子</div>
</div>
</div>
<div class="counter">我是王小三</div>
<div class="counter">我是王小四 <div class="reset">
<div class="counter">我是王小四的大儿子</div>
</div>
</div></div>
ケース 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><a>注册</a>
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. パディング属性
-
<p></p>パディングはインライン要素の水平方向と垂直方向の両方に影響します
- <p></p>
パディング 幅と高さのパーセンテージ親要素の幅の計算に基づいています
<p></p>
非常に多くのフロントエンドの同僚は、インライン要素のパディングは水平方向にのみ影響し、垂直方向には影響しないという間違った理解を持っています。この認識は不正確です。インライン要素です
パディングは、垂直方向のレイアウトと視覚的なパフォーマンスにも影響します。 インライン要素には視覚的な幅と視覚的な高さ (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 尺寸变化 */
<div>
<div></div>
</div>
.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>第一行</p>
<p>第二行</p>
p { margin: 1em 0; }
4. マージン属性マージンの機能:
パディングと異なり、マージンは負の値にすることもできます
<p></p> パディングと同様に、マージンのパーセンテージも親の幅に相対します。要素<p></p> <p></p>4.1 負のマージン値の適用🎜🎜 (1) ボックスのサイズを大きくする🎜🎜🎜要素が「利用可能なスペースをフルに使用している」状態にある場合にのみ、マージンは要素の視覚的なサイズを変更できます🎜🎜
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<!-- 这种情形也只表现为上边距80px,margin发生了合并 -->
<div>
<div></div>
</div>
🎜 (2) クラシック なし 2 列レイアウトとの互換性🎜
.father { overflow: hidden; }
.son { margin: 1em 0; }
<div>
<div></div>
</div>
🎜 レイアウト原則:🎜🎜 デフォルトでは、垂直ブロックレベル要素の上下の距離は 0 です。 margin-bottom:-9999px は、その後のすべての要素を意味します要素と上位要素
要素の空間距離は -9999px になります。これは、後続のすべての要素が 9999px 上に移動したことを意味します。この時点で、神のpadding-bottom:9999pxをストロークします。
要素の高さ (プラスまたはマイナス) を増やしても、レイアウト レイヤーには影響しませんが、必要なものがもたらされます。ビジュアル レイヤーには、追加の 9999 ピクセルの高さの利用可能な背景色があります。 🎜🎜4.2 マージンのマージ🎜🎜🎜 ブロックレベル要素の上マージン (margin-top) と下マージン (margin-bottom) が 1 つのマージンにマージされる場合があります。この現象は「マージンマージ」🎜 と呼ばれます。 🎜2 つの条件: ブロックレベルの要素とマージンのマージが垂直方向にのみ発生する 3 つのシナリオ🎜🎜🎜🎜🎜🎜 (1) 隣接する兄弟要素のマージンのマージ。これは、最も一般的で基本的なマージン マージ 🎜
<div>
<div></div>
</div>
.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; }
<div>
<div></div>
</div>
此时.father 所在的这个父级<p></p>
元素高度仅仅是 1em,因为.son 这个空
元 素的 margin-top 和 margin-bottom 合并在一起了
如何阻止margin发生合并?
对于 margin-top 合并,可以进行如下操作(满足一个条件即可):
父元素设置为块状格式化上下文元素;
父元素设置 border-top 值;
父元素设置 padding-top 值;
父元素和第一个子元素之间添加内联元素进行分隔。
对于 margin-bottom 合并,可以进行如下操作(满足一个条件即可):
margin 合并的计算规则:
“正正取大值”“正负值相加”“负负最负值”
4.3 margin:auto深入
margin:auto 的填充规则如下
(1)如果一侧定值,一侧 auto,则 auto 为剩余空间大小。
(2)如果两侧均是 auto,则平分剩余空间。
一侧auto应用
<div>
<div></div>
</div>
.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中流体布局、元素以及尺寸的介绍
css box-sizing属性(盒子模型)的用法介绍