多用来占位,padding的百分比率达成中度自适应

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

2016/01/03 · CSS · margin, padding

原来的书文出处: array_huang   

正文依赖于三个基础却又便于混淆视听的css知识点:当margin/padding取情势为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!
兴许你会说,left/right以父元素的width为参照物好精晓,不过top/bottom缘何也是以父元素的width为参照物的啊?网络智者见智,关键依然看W3C的规范:

多少个基础却又轻易模糊的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).

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

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).

可观自适应占位

若是有这么个场景:

图片 1

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

  1. 容器宽度设个二分之一吧,那样一行放俩容器,各占显示器宽度二分一,没难题。
  2. 图表宽度设个百分之百取容器的宽度,没难题。
  3. 容器中度无法设置啊,因为容器宽高的参照物差异,并且须求是可观与幅度一致,所以十分的小概通过为容器中度设置百分比来完毕,那就只可以靠内容惊人撑开了。
  4. 容器的剧情惊人就是图表的惊人,若图片是圆锥形,则图片高度与图片宽度一致,也即与容器宽度一致,看起来没难点是吧?实际上,在浏览器把图纸加载出来从前,图片的万丈是零,那可就不能把容器撑开了,如下图所示:

图片 2

那样一来,纵然图片加载速度火速,容器在图片加载前后都会有三个变化的进程,也正是俗称的“闪烁”,而只要图片加载不出去,整体布局就越发难看了。
近些日子难题早就出去了,便是什么产生不靠图片自个儿就会把容器的惊人撑开。

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

安装容器的padding-bottom/top

采用margin/padding的百分比率来化解自适应中度的关键在于:容器margin/padding的比例参照物是父成分的肥瘦,而容器的width的百分比参照物也是父成分的小幅,俩品质参照物一致,那么想要把这俩属性的值统一同来就很简短了。
优化方案是这样的:给容器设置padding-top/padding-bottom跟width一致的值(百分比)。

#container { width: 四分之二; //父成分宽度的四分之二 background-color: red; //仅为了便于演示 } .placeholder { padding-top: 四分之二; //与width: 六分之三;的值保持一致,也等于也正是父成分宽度的百分之五十。 }

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>

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

图片 3

容器的盒子模型如下:

图片 4

从盒子模型能够看来,尽管容器的开始和结果中度为0,但出于有了跟内容宽度一致的padding,因而总体视觉效果上疑似被撑开了。此方案浏览器宽容性很正确,独一的败笔是敬敏不谢给容器设置max-height属性了,因为max-height只得限量内容惊人,而不能限制padding(小编原感觉设置box-sizing: border-box;可以让max-height限定padding,可是亲测无效,通晓的爱侣劳顿告知一下缘由)。

惊人自适应占位

如果有这么个现象:

图片 5

如上海图书馆所示,有这样一种用来放图片的器皿,图片都是圆柱形(为了方便比方用星型,实际上借使固定长度宽度比例就可以)。在PC端好办,容器的宽高都写死是有个别px,那样就算图片加载不出来容器都不会转移。但是在移动端,由于各机型分辨率相差太大,写死px是相对不容许的,究竟还得靠百分比来完成自适应:

  1. 容器宽度设个四分之二啊,那样一行放俩容器,各占显示器宽度二分一,没难点。

  2. 图形宽度设个百分之百取容器的增长幅度,没难题。

  3. 容器中度没法设置啊,因为容器宽高的参照物不等同,并且须要是莫斯中国科学技术大学学与幅度一致,所以不可能透过为容器高度设置百分比来完毕,那就只好靠内容惊人撑开了。

  4. 容器的剧情惊人就是图表的万丈,若图片是星型,则图片高度与图片宽度一致,也即与容器宽度一致,看起来没难题是吧?实际上,在浏览器把图片加载出来在此之前,图片的可观是零,那可就不可能把容器撑开了,如下图所示:

图片 6

那样一来,固然图片加载速度快速,容器在图片加载前后都会有一个扭转的进度,也等于俗称的“闪烁”,而若是图片加载不出去,全部布局就更为难看了。现在主题素材已经出来了,就是什么样实现不靠图片本人就能够把容器的可观撑开。

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

从地点的方案看出max-height失效的由来是容器的中度本来正是padding撑的,而内容惊人为0,max-height无法起效果。那想要优化那或多或少,独一的章程正是行使内容中度来撑开而非padding,这一个方案跟解决浮动所用的方案非常相似:给容器增加一个子成分/伪元素,并把子成分/伪成分的margin/padding设为百分之百,使其实际中度也便是器皿的上涨的幅度,如此一来,便能把容器的莫斯中国科学技术大学学撑至与幅度一致了。由于增加子成分与HTML语义化相悖,由此更推荐使用伪成分(:after)来促成此方案。

#container { width: 二分之一; 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>

此刻视觉效果上与上一方案一点差别也未有,入眼来探视此时容器的盒子模型:

图片 7

能够看见,此时容器的内容惊人与内容宽度一致,老妈再也不用挂念本人一点办法也没有通过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>

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

图片 8

容器的盒子模型如下:

图片 9

从盒子模型能够看看,纵然容器的源委惊人为0,但出于有了跟内容宽度一致的padding,由此全体视觉效果上疑似被撑开了。此方案浏览器宽容性十分不错,独一的后天不足是无可奈何给容器设置max-height属性了,因为max-height只得限量内容高度,而不能够限制padding(小编原感到设置box-sizing: border-box;可以让max-height限定padding,不过亲测无效,掌握的相爱的人困苦告知一下缘故)。

容器内部怎么着增加内容

上述方案只谈到怎样不信任容器内容来撑开容器,那么,在撑开容器后,怎么着给容器增加内容(图片、文本等)呢?
答案很简单,那正是使用position: absolute;

#container { width: 二分之一; position: relative; background-color: red; overflow: hidden; //须要触发BFC解决margin折叠的主题素材 } .placeholder:after { content: ''; display: block; margin-top: 百分百; //margin 百分比相对父成分宽度总括 } img { position: absolute; top: 0; width: 百分之百; }

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="" /> </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>

功效如下:

图片 10

给子成分/伪成分设置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>

这时视觉效果上与上一方案未有差距,重点来拜访此时容器的盒子模型:

图片 11

能够见到,此时容器的开始和结果惊人与内容宽度一致,老妈再也不用惦记自个儿不可能透过max-height来界定容器中度了。
除此以外,使用margin的话要求思量margin折叠的主题素材(参考),padding则无此郁闷。

后补

容器内部怎么样增多内容

上述方案只谈起如何不相信任容器内容来撑开容器,那么,在撑开容器后,怎么着给容器增多内容(图片、文本等)呢?
答案很简短,那便是利用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">
  <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" />
</div>

效果与利益如下:

图片 12

宽高差别的自适应怎么办?

有对象或然会问,上边提到的都以急剧与中度一致的图景,假若区别样那怎么做呢?其实自适应的珍视在于,成分的宽高非得维持二个稳固的比例,举个例子说宽高级中学一年级致比例正是1:1,宽是高的两倍那便是2:1,只要那些比重是分明并且一定的,那么只须求相应地修改margin/padding的百分比率就能够适应不一致的宽高比例。

后补

还恐怕有另外的宽高自适应方案吗?

自然有,譬喻说css3新推出的长短单位vw,正是以荧屏宽度为参照物的,只要给成分的width和height都用上vw单位,那width跟height就能够私行设成同样的了,然则既然是css3,浏览器包容性确定成难题:

图片 13

宽高不等同的自适应如何是好?

有对象可能会问,下边提到的都以开间与高度一致的状态,借使不等同那如何是好吧?其实自适应的重点在于,成分的宽高非得保证七个恒久的比重,比方说宽高级中学一年级致比例正是1:1,宽是高的两倍这正是2:1,只要这几个比例是威名昭著并且一定的,那么只须要相应地修改margin/padding的百分比率即可适应分歧的宽高比例。

总结

自适应的精彩在于宽度,margin/padding设置百分比弥补了成分低度无法自适应地与成分宽度保持一致的破绽。

2 赞 9 收藏 评论

图片 14

还会有别的的宽高自适应方案吗?

本来有,比方说css3新推出的长短单位vw,正是以荧屏宽度为参照物的,只要给成分的width和height都用上vw单位,那width跟height就可以自由设成同样的了,但是既然是css3,浏览器宽容性料定成难题:

图片 15

总结

自适应的精髓在于宽度,margin/padding设置百分比弥补了元素中度不可能自适应地与成分宽度保持一致的劣点。

  •  
  •  

本文由星彩网app下载发布于前端技术,转载请注明出处:多用来占位,padding的百分比率达成中度自适应

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。