快捷搜索:
来自 新京葡娱乐场网址 2019-07-07 19:51 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

【新京葡娱乐场网址】避免闪烁

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

那时候视觉效果上与上一方案未有差距,珍视来看看此时容器的盒子模型:

新京葡娱乐场网址 1

能够看来,此时容器的剧情高度与内容宽度一致,老妈再也不用顾虑本人一点办法也没有透过max-height来界定容器中度了。
另外,使用margin的话须要思量margin折叠的难题(参考),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).

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

安装容器的padding-bottom/top

应用margin/padding的百分比率来减轻自适应中度的关键在于:容器margin/padding的比重参照物是父成分的急剧,而容器的width的百分比参照物也是父成分的升幅,俩属性参照物一致,那么想要把那俩属性的值统一齐来就很轻巧了。
优化方案是那样的:给容器设置padding-top/padding-bottom跟width一致的值(百分比)。

#container { width: 50%; //父成分宽度的五成 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>

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

新京葡娱乐场网址 2

容器的盒子模型如下:

新京葡娱乐场网址 3

从盒子模型能够看出,尽管容器的内容中度为0,但鉴于有了跟内容宽度一致的padding,由此全体视觉效果上疑似被撑开了。此方案浏览器包容性很正确,独一的毛病是爱莫能助给容器设置max-height属性了,因为max-height只得限量内容惊人,而无法限制padding(作者原认为设置box-sizing: border-box;可以让max-height范围padding,可是亲测无效,精通的爱人费劲告知一下原因)。

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

2016/01/03 · CSS · margin, padding

原稿出处: array_huang   

宽高分歧的自适应如何是好?

有意中人大概会问,上边提到的都以升幅与中度一致的景况,即使不雷同那咋做呢?其实自适应的机要在于,成分的宽高非得保证二个长久的百分比,比如说宽高级中学一年级致比例正是1:1,宽是高的两倍那正是2:1,只要这么些比例是醒目何况一定的,那么只需求相应地修改margin/padding的百分比率就能够适应不一样的宽高比例。

后补

还大概有另外的宽高自适应方案吗?

道理当然是那样的有,比如说css3新生产的尺寸单位vw,正是以显示屏宽度为参照物的,只要给成分的width和height都用上vw单位,那width跟height就能够任性设成同样的了,可是既然是css3,浏览器兼容性肯定成难题:

新京葡娱乐场网址 4

惊人自适应占位

假如有这么个场景:

新京葡娱乐场网址 5

如上海教室所示,有如此一种用来放图片的容器,图片都以长方形(为了有助于举个例子用星型,实际上纵然固定长度宽度比例就能够)。
在PC端好办,容器的宽高都写死是多少px,这样固然图片加载不出去容器都不会转换。不过在移动端,由于各机型分辨率相差太大,写死px是相对不恐怕的,究竟还得靠百分比来达成自适应:

  1. 容器宽度设个百分之五十啊,那样一行放俩容器,各占显示屏宽度四分之二,没难点。
  2. 图表宽度设个百分之百取容器的升幅,没难题。
  3. 容器中度没有办法设置啊,因为容器宽高的参照物区别,并且需假如可观与幅度一致,所以不能够透过为容器中度设置百分比来完结,那就只好靠内容惊人撑开了。
  4. 容器的源委惊人正是图形的中度,若图片是星型,则图片中度与图片宽度一致,也即与容器宽度一致,看起来没难题是啊?实际上,在浏览器把图片加载出来此前,图片的莫斯中国科学技术大学学是零,那可就不能够把容器撑开了,如下图所示:

新京葡娱乐场网址 6

那样一来,纵然图片加载速度高速,容器在图片加载前后都会有一个浮动的进度,相当于俗称的“闪烁”,而只要图片加载不出来,全部布局就尤其难看了。
现行反革命主题材料早已出来了,就是怎么样做到不靠图片本身就能够把容器的万丈撑开。

容器内部怎样增多内容

上述方案只聊起怎样不依赖容器内容来撑开容器,那么,在撑开容器后,如何给容器增加内容(图片、文本等)呢?
答案很简短,那就是接纳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>

效果如下:

新京葡娱乐场网址 7

总结

自适应的美貌在于宽度,margin/padding设置百分比弥补了成分中度无法自适应地与成分宽度保持一致的重疾。

2 赞 9 收藏 评论

新京葡娱乐场网址 8

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:【新京葡娱乐场网址】避免闪烁

关键词: