新浦京81707con > 注册购买 > 多用于占位,避免闪烁

原标题:多用于占位,避免闪烁

浏览次数:77 时间:2019-05-02

巧用margin/padding的百分比率完毕中度自适应(多用来占位,幸免闪烁)

2016/01/03 · CSS · margin, padding

最初的小说出处: array_huang   

巧用margin/padding的百分比率达成中度自适应(多用来占位,防止闪烁),marginpadding

二个基础却又便于混淆视听的css知识点

本文信赖于叁个基础却又轻巧模糊的css知识点:当margin/padding取情势为百分比的值时,无论是left/right,还是top/bottom,都以以父元素的width为参照物的!

 或许你会说,left/right以父成分的width为参照物好精通,可是top/bottom为啥也是以父成分的width为参照物的吗?

一、高度自适应占位

假使有这么个情景:

图片 1

 

如上海教室所示,有如此1种用来放图片的容器,图片都以长方形(为了便于比方用星型,实际上要是固定长度宽度比例就能够)。

在PC端好办,容器的宽高都写死是稍微px,那样即便图片加载不出去容器都不会变动。不过在移动端,由于各机型分辨率相差太大,写死px是相对不大概的,究竟还得靠百分比来实现自适应:

  1. 容器宽度设个二分之一啊,那样一行放俩容器,各占显示屏宽度3/6,没难题。

  2. 图表宽度设个百分百取容器的幅度,没难点。

  3. 容器中度无法设置啊,因为容器宽高的参照物差异,而且需求是莫斯中国科学技术大学学与幅度一致,所以不可能通过为容器中度设置百分比来达成,那就只可以靠内容惊人撑开了。

  4. 容器的内容惊人就是图形的可观,若图片是圆锥形,则图片中度与图片宽度一致,也即与容器宽度壹致,看起来没难点是吗?实际上,在浏览器把图片加载出来在此以前,图片的莫斯中国科学技术大学学是零,那可就不能把容器撑开了, 那样一来,固然图片加载速度迅猛,容器在图纸加载前后都会有1个变迁的长河,也正是俗称的“闪烁”,而只要图片加载不出去,全体布局就更是难看了。

当今主题材料早就出来了,就是何等做到不靠图片本人就能够把容器的莫斯科大学撑开。

安装容器的padding-bottom/top

利用margin/padding的百分比率来化解自适应中度的关键在于:容器margin/padding的比例参照物是父成分的幅度,而容器的width的百分比参照物也是父成分的肥瘦,俩天性参照物壹致,那么想要把那俩属性的值统一起来就很简短了。

优化方案是那般的:给容器设置padding-top/padding-bottom跟width一致的值(百分比)。

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

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

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

图片 2

容器的盒子模型如下:

图片 3

从盒子模型能够观望,尽管容器的剧情高度为0,但出于有了跟内容宽度一致的padding,因而全体视觉效果上像是被撑开了。此方案浏览器包容性很不错,唯壹的通病是心有余而力不足给容器设置max-height属性了,因为max-height只可以限量内容惊人,而不可能限制padding(笔者原感觉设置box-sizing: border-box;能够让max-height限制padding,不过亲测无效)

给子元素/伪成分设置margin/padding撑开容器

从地点的方案看出max-height失效的缘由是容器的冲天本来正是padding撑的,而内容惊人为0,max-height不可能起效果。那想要优化那一点,唯1的措施便是使用内容惊人来撑开而非padding,这一个方案跟化解浮动所用的方案充裕相似:给容器增多贰个子元素/伪成分,并把子成分/伪成分的margin/padding设为百分百,使其实际中度也正是器皿的大幅,如此1来,便能把容器的万丈撑至与幅度一致了。由于加多子成分与HTML语义化相悖,由此更推荐应用伪成分(:after)来贯彻此方案。

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

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

那时视觉效果上与上1方案没有差别,重视来看看此时容器的盒子模型:

图片 4

能够看到,此时容器的内容中度与内容宽度一致,老妈再也不用挂念本身无能为力通过max-height来限制容器中度了。

其余,使用margin的话供给挂念margin折叠的题目(参考),padding则无此烦恼。

 容器内部怎样增多内容

 上述方案只聊起怎样不依赖容器内容来撑开容器,那么,在撑开容器后,如何给容器增加内容(图片、文本等)呢?

答案很轻易,那就是应用position: absolute;

1 <div id="container" class="placeholder">
2   <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/[email protected]_415w_415h_1c_0i_1o_1x.jpg" />
3 </div>

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

图片 5

后补

 宽高不雷同的自适应怎么办?

 有恋人只怕会问,上边提到的都以急剧与中度一致的气象,假如不雷同那怎么做呢?其实自适应的最重要在于,成分的宽高非得维持三个恒定的比例,举个例子说宽高1致比例正是1:一,宽是高的两倍那正是2:一,只要这些比重是显明而且一定的,那么只要求相应地修改margin/padding的百分比率就能够适应分化的宽高比例。

 还有此外的宽高自适应方案吗?

 当然有,比如说css三新推出的长短单位vw,正是以屏幕宽度为参照物的,只要给成分的width和height都用上vw单位,那width跟height就足以自便设成同样的了,可是既然是css三,浏览器包容性显著成难点:

图片 6

总结

 自适应的精髓在于宽度,margin/padding设置比例弥补了成分中度无法自适应地与元素宽度保持一致的症结。

 

一个基础却又易于模糊的css知识点 本文正视于贰个基础...

1个基础却又轻松模糊的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).

高于一出,记住就好,科科。

可观自适应占位

如若有这么个场景:

图片 7

如上海教室所示,有如此一种用来放图片的器皿,图片都以长方形(为了便于比方用正方形,实际上只要固定长度宽度比例就能够)。
在PC端好办,容器的宽高都写死是稍稍px,那样就算图片加载不出来容器都不会变卦。可是在移动端,由于各机型分辨率相差太大,写死px是纯属不容许的,究竟还得靠百分比来落成自适应:

  1. 容器宽度设个八分之四吗,那样1行放俩容器,各占荧屏宽度四分之贰,没难题。
  2. 图形宽度设个百分百取容器的上升的幅度,没难点。
  3. 容器中度无法设置啊,因为容器宽高的参照物不相同等,而且供给是莫斯中国科学技术大学学与幅度一致,所以不能通过为容器高度设置百分比来落成,那就只好靠内容惊人撑开了。
  4. 容器的剧情惊人正是图表的惊人,若图片是正方形,则图片高度与图片宽度一致,也即与容器宽度一致,看起来没难点是吧?实际上,在浏览器把图纸加载出来在此从前,图片的中度是零,那可就无法把容器撑开了,如下图所示:

图片 8

那样一来,固然图片加载速度快速,容器在图纸加载前后都会有二个变通的进度,也便是俗称的“闪烁”,而只要图片加载不出去,全部布局就更是难看了。
近来难点一度出去了,就是如何实现不靠图片自己就能够把容器的可观撑开。

设置容器的padding-bottom/top

选取margin/padding的百分比率来化解自适应中度的关键在于:容器margin/padding的比例参照物是父成分的升幅,而容器的width的百分比参照物也是父成分的拉长率,俩属性参照物1致,那么想要把那俩属性的值统一同来就相当粗略了。
优化方案是那般的:给容器设置padding-top/padding-bottom跟width1致的值(百分比)。

#container { width: 5/10; //父成分宽度的2/四 background-color: red; //仅为了方便演示 } .placeholder { padding-top: 四分之二; //与width: 八分之四;的值保持1致,也等于一定于父成分宽度的四分之2。 }

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>

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

图片 9

容器的盒子模型如下:

图片 10

从盒子模型可以见到,纵然容器的内容中度为0,但由于有了跟内容宽度1致的padding,由此总体视觉效果上像是被撑开了。此方案浏览器包容性很精确,唯一的后天不足是相当小概给容器设置max-height属性了,因为max-height唯其如此限量内容惊人,而不能够限制padding(小编原感到设置box-sizing: border-box;可以让max-height限制padding,但是亲测无效,通晓的对象辛勤告知一下原因)。

给子成分/伪成分设置margin/padding撑开容器

从上边的方案看出max-height失效的来头是容器的莫斯中国科学技术大学学学本科来就是padding撑的,而内容高度为0,max-height心慌意乱起功效。那想要优化那或多或少,唯一的章程便是应用内容中度来撑开而非padding,这几个方案跟化解浮动所用的方案丰盛相像:给容器增多3个子成分/伪成分,并把子成分/伪成分的margin/padding设为百分百,使其实际中度相当于器皿的肥瘦,如此一来,便能把容器的惊人撑至与幅度壹致了。由于增添子成分与HTML语义化相悖,由此更推荐使用伪成分(:after)来兑现此方案。

#container { width: 5/10; position: relative; background-color: red; overflow: hidden; //要求触发BFC化解margin折叠的主题材料 } .placeholder:after { content: ''; display: block; margin-top: 百分之百; //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>

那会儿视觉效果上与上一方案一点差别也没有,重视来探视此时容器的盒子模型:

图片 11

能够看看,此时容器的始末惊人与内容宽度1致,老母再也不用顾虑本人不能够通过max-height来界定容器中度了。
除此以外,使用margin的话要求思考margin折叠的主题素材(参考),padding则无此烦恼。

本文由新浦京81707con发布于注册购买,转载请注明出处:多用于占位,避免闪烁

关键词: 新浦京81707con CSS

上一篇:CSS代码重构与优化,CSS代码重构与优化之路

下一篇:没有了