菜单

巧用margin/padding的百分率实现高度自适应(多用于占位,避免闪烁)

2018年11月15日 - CSS/CSS3

深受子元素/伪元素设置margin/padding撑开容器

从点的方案看max-height失效的来头是容器的惊人本来就padding撑的,而内容高度为0,max-height无法从作用。那想如果优化这一点,唯一的法门就是下内容高度来支撑起来要非padding,这个方案以及排浮动所用底方案充分相似:给容器添加一个子元素/伪元素,并把子元素/伪元素的margin/padding设为100%,使其实际高度相当给器皿的涨幅,如此一来,便能够把容器的莫大撑至同幅度一致了。由于加加子元素以及HTML语义化相悖,因此再度推荐使用伪元素(:after)来兑现这方案。

#container { width: 50%; position: relative; background-color: red;
overflow: hidden; //需要触发BFC消除margin折叠的问题 } .placeholder:after
{ content: ”; display: block; margin-top: 100%; //margin
百分比相对父元素宽度计算 }

1
2
3
4
5
6
7
8
9
10
11
#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: ”;
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
}

<div id=”container” class=”placeholder”></div>

1
<div id="container" class="placeholder"></div>

此刻视觉效果上以及齐亦然方案无异,重点来看望这容器的盒子模型:

manbetx2.0手机版 1

好看来,此时容器的内容高度与情宽度一致,妈妈再也为无用担心自身一筹莫展透过max-height来界定容器高度了。
除此以外,使用margin的讲话需要考虑margin折叠的题目(参考),padding则凭夫烦恼。

尚产生任何的富高起适应方案也?

当然发,比如说css3新生产的长单位vw,就是因屏幕宽度为参照物的,只要被元素的width和height都因此上vw单位,那width跟height就足以无限制设成一样的了,不过既然是css3,浏览器兼容性肯定成问题:

manbetx2.0手机版 2

图片.png

可观自适应占位

借设有这么个现象:

manbetx2.0手机版 3

要齐图所示,有这般一种用来放大图片的容器,图片都是刚刚方形(为了好举例用刚刚方形,实际上要固定长宽比例即可)。
在PC端好惩治,容器的富贵高都写很是有点px,这样即便图片加载不出来容器都无见面变动。但是当移动端,由于各个机型分辨率相差太大,写死pxmanbetx2.0手机版是绝不容许的,终究还得仰仗百分比较来贯彻由适应:

  1. 容器宽度设个50%吧,这样一行放俩容器,各占屏幕宽度一半,没问题。
  2. 图片宽度设个100%取容器的宽窄,没问题。
  3. 容器高度没法装啊,因为容器宽高的参照物不均等,而且需要是可观和幅度一致,所以无法通过也容器高度设置百分比较来上,那即便只好依靠内容高度撑起来了。
  4. 容器的情高度就是图表的万丈,若图片是刚刚方形,则图片高度与图片宽度一致,也就是同容器宽度一致,看起没问题是吧?实际上,在浏览器把图片加载出来以前,图片的万丈是心碎,那可是即使从未有过办法把容器撑起来了,如下图所示:

manbetx2.0手机版 4

这样一来,即使图片加载速度飞快,容器在图片加载前后都见面生出一个转变的历程,也就是俗称之“闪烁”,而一旦图片加载不出去,整体布局就越是难看了。
如今题材早已出了,就是何许做到无因图片本身就会管容器的莫大撑起来。

总结

于适应之精髓在宽度,margin/padding设置比例弥补了元素高度无法从适应地以及素宽度保持一致的弱点。

安装容器的padding-bottom/top

下margin/padding的百分率来解决自适应高度的关键在于:容器margin/padding的比例参照物是父元素的小幅,而容器的width的比重参照物也是父元素的宽窄,俩属性参照物一致,那么想如果把当时俩性能的价值统一起来就是格外简单了。
优化方案是这般的:给容器设置padding-top/padding-bottom跟width一致的价值(百分比)。

#container { width: 50%; //父元素宽度之一半 background-color: red;
//仅为了方便演示 } .placeholder { padding-top: 50%; //与width:
50%;的价值保持一致,也就算是相当给父元素宽度之一半。 }

1
2
3
4
5
6
7
#container {
  width: 50%;  //父元素宽度的一半
  background-color: red;  //仅为了方便演示
}
.placeholder {
  padding-top: 50%; //与width: 50%;的值保持一致,也就是相当于父元素宽度的一半。
}

<div id=”container” class=”placeholder”></div>

1
<div id="container" class="placeholder"></div>

结果,容器的视觉效果如下:

manbetx2.0手机版 5

容器的盒子模型如下:

manbetx2.0手机版 6

自从盒子模型可以见到,虽然容器的情节惊人也0,但由生了与内容宽度一致的padding,因此总体视觉效果上如是叫撑起来了。此方案浏览器兼容性好正确,唯一的败笔是力不从心给容器设置max-height属性了,因为max-height只能限量内容惊人,而未能够限制padding(我原以为设置box-sizing: border-box;可以让max-height界定padding,不过亲测无效,明白的意中人辛苦告知一下因)。

惊人自适应占位

假设有这么个场景:

manbetx2.0手机版 7

图片.png

如图所示,有如此一种用来加大图片的器皿,图片都是正方形(为了便利举例用刚刚方形,实际上要固定长宽比例即可)。在PC端好惩治,容器的富足高都写很是聊px,这样即便图片加载不出来容器都无见面变动。但是当移动端,由于各机型分辨率相差太大,写死px是绝不容许的,终究还得凭借百分比较来落实由适应:
容器宽度设个50%吧,这样一行放俩容器,各占屏幕宽度一半,没问题。
图片宽度设个100%取容器的升幅,没问题。
容器高度没法装啊,因为容器宽高的参照物不均等,而且需要是可观和幅度一致,所以无法通过为容器高度设置百分比较来达成,那就算只好依靠内容高度撑起来了。

容器的情高度就是图表的万丈,若图片是刚刚方形,则图片高度和图片宽度一致,也便同容器宽度一致,看起没问题是吧?实际上,在浏览器把图片加载出来以前,图片的万丈是散,那可是就从未有过办法把容器撑起来了,如下图所示:

manbetx2.0手机版 8

图片.png

这样一来,即使图片加载速度很快,容器在图纸加载前后都见面产生一个转移的过程,也即是俗称之“闪烁”,而而图片加载不出去,整体布局就进一步难看了。现在题材都出了,就是何许做到无靠图片本身就会管容器的莫大撑起来。

容器中如何添加内容

上述方案只有提及如何不依赖容器内容来支撑起来容器,那么,在支撑起来容器后,如何让容器添加内容(图片、文本等)呢?
答案非常粗略,那便是运用position: absolute;

#container { width: 50%; position: relative; background-color: red;
overflow: hidden; //需要触发BFC消除margin折叠的题目 } .placeholder:after
{ content: ”; display: block; margin-top: 100%; //margin
百分比相对父元素宽度计算 } img { position: absolute; top: 0; width:
100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: ”;
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
}
img {
  position: absolute;
  top: 0;
  width: 100%;
}

<div id=”container” class=”placeholder”> <img
src=”http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e\_415w\_415h\_1c\_0i\_1o\_1x.jpg”
/> </div>

1
2
3
<div id="container" class="placeholder">
  <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" />
</div>

功能如下:

manbetx2.0手机版 9

有钱高不等同的从适应怎么开?

有意中人可能会见咨询,上面提到的还是开间与高度一致的景况,如果未一致那怎么收拾呢?其实自从适应之重中之重在,元素的有余高得维持一个定位的百分比,比如说宽高一致比例虽是1:1,宽是赛的一定量加倍那就算是2:1,只要这比重是明白而一定的,那么单纯待相应地改margin/padding的百分比率即可服不同的丰足高比例。

富国高不平等的从适应怎么开?

有对象可能会见咨询,上面提到的还是开间和高度一致的情景,如果非同等那怎么收拾为?其实自从适应的严重性在,元素的松动高得维持一个原则性的比例,比如说宽高一致比例虽是1:1,宽是大的鲜倍增那便是2:1,只要这比例是显然而一定的,那么单纯待相应地改margin/padding的百分比率即可服不同的富足高比例。

深受子元素/伪元素设置margin/padding撑开容器

于地方的方案看max-height失效的原由是容器的莫大本来就padding撑的,而内容高度为0,max-height无法起作用。那想要优化这或多或少,唯一的主意就是是用内容惊人来支撑起来而非padding,这个方案和排浮动所用之方案特别相像:给容器添加一个子元素/伪元素,并拿子元素/伪元素的margin/padding设为100%,使该实际高度相当给器皿的宽度,如此一来,便能将容器的万丈撑至与幅度一致了。由于上加子元素与HTML语义化相悖,因此还推荐下伪元素(:after)来实现这个方案。

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
} 

<div id="container" class="placeholder"></div>

这时候视觉效果上及齐亦然方案无异,重点来看看这容器的盒子模型:

manbetx2.0手机版 10

图片.png

可以看,此时容器的情惊人和情宽度一致,妈妈又为不用担心自身一筹莫展通过max-height来界定容器高度了。
此外,使用margin的口舌需要考虑margin折叠的问题(参考),padding则不管此烦恼。

后补

设置容器的padding-bottom/top

以margin/padding的百分率来化解自适应高度的关键在于:容器margin/padding的百分比参照物是父元素的宽窄,而容器的width的比例参照物也是父元素的肥瘦,俩性质参照物一致,那么想使管当下俩特性的价统一起来就充分简短了。优化方案是这样的:给容器设置padding-top/padding-bottom跟width一致的价值(百分比)。

#container {
  width: 50%;  //父元素宽度的一半
  background-color: red;  //仅为了方便演示
}
.placeholder {
  padding-top: 50%; //与width: 50%;的值保持一致,也就是相当于父元素宽度的一半。
}

<div id="container" class="placeholder"></div>

于盒子模型可以见到,虽然容器的始末惊人也0,但由于生了和内容宽度一致的padding,因此总体视觉效果达到如是被撑起来了。此方案浏览器兼容性好是,唯一的缺点是无法让容器设置max-height属性了,因为max-height只能限量内容高度,而无克限制padding(我本以为设置box-sizing:
border-box;可以吃max-height限制padding,不过亲测无效,明白的爱人辛苦告知一下原因)。

一个基础也还要易于混淆的css知识点

本文依赖让一个基础也又易混淆视听的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width啊参照物的!
兴许你会说,left/right以父元素的width为参照物好理解,但是top/bottom胡吧是盖父元素的width呢参照物的呢?网上众说纷纭,关键还是看W3C的规范:

Note that in a horizontal flow, percentages on ‘margin-top’ and
‘margin-bottom’ are relative to the width of the containing block, not
the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are
relative to the height, not the width).

Note that percentages on ‘padding-top’ and ‘padding-bottom’ are
relative to the width of the containing block, not the height (at
least in a horizontal flow; in a vertical flow they are relative to
the height).

贵一发出,记住就好,科科。

后补

尚时有发生外的丰足高起适应方案吗?

当然发,比如说css3新生产的尺寸单位vw,就是坐屏幕宽度为参照物的,只要被元素的width和height都因此上vw单位,那width跟height就得随意设成一样的了,不过既然是css3,浏览器兼容性肯定成问题:

manbetx2.0手机版 11

容器内如何添加内容

上述方案只有提及如何不依赖容器内容来支撑起来容器,那么,在抵起来容器后,如何给容器添加内容(图片、文本等)呢?
答案非常简单,那就是是采取position: absolute;:

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
} 
img {
  position: absolute;
  top: 0;
  width: 100%;
}

<div id="container" class="placeholder">
  ![](http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg)
</div>

作用如下:

manbetx2.0手机版 12

图片.png

巧用margin/padding的百分率实现高度自适应(多用于占位,避免闪烁)

2016/01/03 · CSS ·
margin,
padding

原稿出处: array_huang   

总结

从今适应的精粹在于宽度,margin/padding设置百分比弥补了元素高度无法自适应地跟素宽度保持一致的短处。

2 赞 9 收藏
评论

manbetx2.0手机版 13

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图