澳门金沙app下载:细节点整理,避免闪烁

CSS3 vw 单位

Paste_Image.png

澳门金沙app下载:细节点整理,避免闪烁。100vw = 100% 视窗宽度
100vh = 100% 视窗高度

这样实现自适应正方形(固定长宽比例的容器)就会相当简单!

[lang=stylus]
.box
  width 10vw
  height 10vw

既然是新单位, 必然就会有 兼容性问题.

[lang=jade]
.img-box
  img(src="img/a.png")

[lang=stylus]
.img-box
  width 10vw
  height 10vw
  img
    width 100%
    height 100%
    object-fit cover

Paste_Image.png

代码正常效果应该是上左图, 实现一个正方形盒子里放一张图片, 自适应居中
然而安卓4.4手机里, 图片会失真, 高度不是以 .img-box 计算的, 如上右图
(object-fit cover 在 安卓 4.4 下也无效的)

偶然发现可以通过 给图片设置 position absolute 解决高度错误问题
(object-fit cover 无效)

[lang=stylus]
.img-box
  width 10vw
  height 10vw
  position relative
  img
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    object-fit cover

澳门金沙app下载:细节点整理,避免闪烁。css3 新的 flex vw vh 让布局灵活方便很多
正方形不再使用 padding-bottom 100% 让人看不容易不懂的方法了

最后希望大家多用 chrome 早日脱离 IE

澳门金沙app下载:细节点整理,避免闪烁。澳门金沙app下载:细节点整理,避免闪烁。前言


  这个CSS系列,是我从七月开始陆续整理的系列篇。存放在草稿箱里很久了,今晚把这几篇系列篇都整理下排版,然后发布出来。
  为什么要写这个系列,初衷也是因为有很多细节点是需要从源头上去理解的。像是很多属性设置,都是设置在某个元素自身无效,在其父元素设置就生效,诸如这一类的,都是细节点。当然,如果了解原理之后,就不难理解为什么是这样的设置了。
  总之,我热衷做总结梳理,不是我多勤快,恰恰是我懒,想通过这些知识碎点的整理,可以把这些知识点都学薄了,然后在有空就翻看的时候,又常翻常新。当然,后面有觉得需要补充添加的点的话,这几篇CSS系列篇会持续更新。

高度自适应占位

假设有这么个场景:

澳门金沙app下载 1

图片.png

如图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可)。在PC端好办,容器的宽高都写死是多少px,这样即使图片加载不出来容器都不会变型。但是在移动端,由于各机型分辨率相差太大,写死px是绝对不可能的,终究还得靠百分比来实现自适应:
容器宽度设个50%吧,这样一行放俩容器,各占屏幕宽度一半,没问题。
图片宽度设个100%取容器的宽度,没问题。
容器高度没法设置啊,因为容器宽高的参照物不一样,而且需求是高度与宽度一致,所以无法通过为容器高度设置百分比来达成,那就只能靠内容高度撑开了。

容器的内容高度就是图片的高度,若图片是正方形,则图片高度与图片宽度一致,也即与容器宽度一致,看起来没问题是吧?实际上,在浏览器把图片加载出来以前,图片的高度是零,那可就没办法把容器撑开了,如下图所示:

澳门金沙app下载 2

图片.png

这样一来,即使图片加载速度很快,容器在图片加载前后都会有一个变型的过程,也就是俗称的“闪烁”,而如果图片加载不出来,整体布局就更是难看了。现在问题已经出来了,就是如何做到不靠图片本身就能把容器的高度撑开。

一、块级元素和行内元素

设置容器的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,不过亲测无效,明白的朋友麻烦告知一下原因)。

1、块级元素

(1)块级元素占据一整行的空间,可以再包含块级元素和行内元素。
澳门金沙app下载:细节点整理,避免闪烁。(2)设定width和height属性有效。设定了width之后,没特殊要求可以不用再设定height,因为高度会按照宽高比自适应,这点常应用在img的使用。
(3)因为占据一整行空间,所以margin:0
auto的居中设定,需要在同时设定了width属性的情况下才有效。
需要记住的常见块级元素:div h1-h6 p form ul li dl ol table tr td th dd
dt
让我意外,原来它是块级元素的标签:p,ul,li

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

此时视觉效果上与上一方案无异,重点来看看此时容器的盒子模型:

澳门金沙app下载 3

图片.png

可以看出,此时容器的内容高度与内容宽度一致,妈妈再也不用担心我无法通过max-height来限制容器高度了。
另外,使用margin的话需要考虑margin折叠的问题(参考),padding则无此烦恼。

2、行内元素

(1)占据本身内容的宽度。设定width和height是无效的。需要设置display:inline-block才能让宽高的设置生效。
(2)同时设定盒模型的margin,只有左右margin生效,上下margin是无效的。

需要记住的常见行内元素:em strong span a br img button input label
select textarea script
让我意外,原来它是行内元素的标签:img、input、textarea、script、a

容器内部如何添加内容

上述方案只提及如何不依赖容器内容来撑开容器,那么,在撑开容器后,如何给容器添加内容(图片、文本等)呢?
答案很简单,那就是利用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>

效果如下:

澳门金沙app下载 4

图片.png

3、置换元素

置换元素就是会根据标签属性来显示的元素,反之就是非置换元素。比如img标签根据src属性来显示,input根据value属性来显示,同理textarea和select元素也是置换元素。
所以img元素是行内元素,同时也是置换元素,置换元素一般内置框高属性,可以直接设置框高。

后补

二、边框

border:1px solid/dotted/dash/double #333
注意:border-style:dotted solid double
dashed;
,分别对应是点状/实线/双线/虚线

宽高不一致的自适应怎么做?

有朋友可能会问,上面提到的都是宽度与高度一致的情况,如果不一致那怎么办呢?其实自适应的重点在于,元素的宽高必须维持一个固定的比例,比如说宽高一致比例就是1:1,宽是高的两倍那就是2:1,只要这个比例是明确而且固定的,那么只需要相应地修改margin/padding的百分比值即可适应不同的宽高比例。

1、应用:实现三角形和由此的其他图形组合

澳门金沙app下载 5

Paste_Image.png

澳门金沙app下载 6

Paste_Image.png

澳门金沙app下载 7

Paste_Image.png

澳门金沙app下载 8

Paste_Image.png

澳门金沙app下载 9

Paste_Image.png

还有其它的宽高自适应方案吗?

当然有,比如说css3新推出的长度单位vw,就是以屏幕宽度为参照物的,只要给元素的width和height都用上vw单位,那width跟height就可以轻易设成一样的了,不过既然是css3,浏览器兼容性肯定成问题:

澳门金沙app下载 10

图片.png

2、圆形的实现

澳门金沙app下载 11

Paste_Image.png

总结

自适应的精髓在于宽度,margin/padding设置百分比弥补了元素高度无法自适应地与元素宽度保持一致的缺陷。

3、边框圆角的实现

澳门金沙app下载 12

Paste_Image.png

三、盒模型

1、盒模型:就是margin+border+padding
2、上下左右距离的设置:

(1)举例:padding:10px 20px
30px:代表padding-top:10px;padding-bottom:30px;
padding-left和padding-right都是20px
(2)margin和padding的值都可以是百分比,是相对于父容器而言的

(3)margin外边距合并的问题
如下图:两个div之间的间距应该是10+10=20px,但却是10px。对此的解决方案是使用BFC。

澳门金沙app下载 13

Paste_Image.png

(4)行内元素设定padding的情况
行内元素设定padding时,左右padding是生效的,上下padding撑开了边距,但对其本身高度并没有发生变化,还是那么高。

澳门金沙app下载 14

Paste_Image.png

3、标准盒模型和IE盒模型

IE盒模型,是指IE678在怪异模式下(没有写!DOCTYPE:<!DOCTYPE
html>)的盒模型状态
标准盒模型,在IE9以上,以及IE678在严格模式下(<!DOCTYPE
html>)就是使用的标准盒模型。
标准盒模型:width和height的宽度高度设置,就是content的大小而已
IE盒模型:width和height的宽度高度设置是content+padding+border的大小。

4、box-sizing的使用

由盒模型延伸,有时我们设置父元素宽度900px,每个子元素小框宽度为300px,边框为1px,全部向左浮动,如果是在标准盒模型下,是无法同一行刚好布满3个小框的。因为实际3个小框的全部长度为300*3+1px*6=906px。这种时候,就需要用上IE盒模型这样的特性,才能刚好一行铺满。这时候就对子元素使用box-sizing:border-box属性,就可以实现刚好占一行。

澳门金沙app下载 15

Paste_Image.png

澳门金沙app下载 16

Paste_Image.png

四、居中的实现:

块级元素:margin:0 auto;(上下边距可以任意设,左右为auto即可)
行内元素:记住:是在其父元素上设定text-align:center,实现行内元素的居中

澳门金沙app下载 17

Paste_Image.png

五、display

块级元素的设定:display:blcok/table/list-item
行内元素的设定:display:inline/inline-table/inline-block

需要记住除了常见的inline、inline-block、block属性值外,还有的其他的display属性选项。

1、display:inline-block

这个属性很重要:因为它让元素呈现inline的特性,不占据一整行,宽度由内容宽度决定,又呈现
block 特性 ,可设置宽高,内外边距

(1)应用:面包屑

面包屑可以直接采用全部左浮动,然后父元素清除浮动的方式。也可以直接使用display:inline-block的属性设置,这种方法更简单。但对应的问题就是两个设置display:inline-block的行内元素之间会有缝隙。
缝隙情况如下:

澳门金沙app下载 18

Paste_Image.png

(2)解决缝隙问题:

因为换行也是等同于空白字符的
消除设置display:inline-block的元素之间的缝隙的方法:
1)、元素标签之间不要换行
如下:span不换行,直接挨着写:

澳门金沙app下载 19

Paste_Image.png

2)、父元素设定font-size:0,将空白字符给去掉,然后子元素再设定font-size大小

澳门金沙app下载 20

Paste_Image.png

六、基线对准问题

vertical-align这个属性,是只对行内元素和表格才有效。
vertical-align:top/middle/bottom,分别实现顶部对齐,中间对齐或底部对齐

澳门金沙app下载 21

Paste_Image.png

相关文章