《CSS世界》学习笔记（一）

《CSS世界》，张鑫旭著，人民邮电出版社，2017年12月第一版。

1.P9二维码链接文章的demo值得一看，可以实现有关“某些区域颜色始终保持一致”的效果。

 

P9二维码所链接文章的一个demo里，图标用i标签+背景图的形式实现。我在模仿知乎、简书网站的时候发现他们的图标实现和你的不一样。比如回到顶部的按键，知乎是用button+svg，简书则是i标签+content属性生成图片。我自己用的是a+img实现。
我想知道这些实现有什么区别么？从语义上考量我感觉知乎的更好，因为这个功能就是按键。

鑫大回复：知乎意义好，兼容性不好。知乎放弃了IE8用户。如果图标是按钮，a标签具有键盘可访问性，同时兼容性好（尺寸控制上），同时设置role=”button”具有按钮语义。i标签用在装饰图形上。

role的值不是随便取的，参考：http://www.w3.org/TR/2014/REC-wai-aria-implementation-20140320/#mapping_role

为什么role值不能依开发者自取？

一.role的作用是增强“语义”。这里的“语义”更多的是为了以后的兼容。比如某些浏览器无法支持input<button>，我们只好写<a role="button">让这个通过图像和a标签形成的按键兼容现在和未来——当浏览器支持button后，role的值就会让浏览器把这个标签当作按键渲染了。

二.role的作用不是“解释”。比如你引入一个div，是为了统一某个界面的样式，你不能给这个div加上诸如“bodyStyle”这样的role值，这就是在“解释”了，这是注释的作用。如果允许role随开发者自定，难免会发生这种情况。

当然，如果某种标签在标准中不存在，而开发者需要，可以考虑自己开发后提交标准组织，通过后自然就有相应的role值出现了，哈哈。

 

 

关于vh、vw，参考这篇文章：

1.显示器分辨率和显示器尺寸并无直接关系——所以兼容布局考虑的不是尺寸而是分辨率（你的单位是px，是分辨率而不是“英寸”）

2.1024x768=“一条水平线上有1024个像素点，共768条线”

3.视区宽度=innerwidth；浏览器宽度=outerwidth；显示器宽度=screenwidth

4.弹框图片不超出浏览器窗口；纯CSS实现弹框的水平与垂直居中效果（没有JS计算与定位）

 

2.P11

1.焦点元素=a、button；非焦点元素=没设置tabindex属性的div、span——————这意味着二者是可以互相转化的。

之所以有互相转化的需要，是因为在一些浏览器里面，非焦点元素对伪类“:active”置若罔闻。

 

 

3.P14的链接文章。

为什么浮动元素会使父元素（高度）塌陷？

在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的，即子元素多高，父元素就有多高。但是当子元素设置浮动之后，子元素就会完全脱离文档流，父元素还在文档流中，此时父元素的高度就没有子元素撑起（子元素无法撑起父元素的高度），从而导致父元素的高度塌陷。简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去，这样会导致页面布局混乱。

————引用自文章：https://zhuanlan.zhihu.com/p/27671651?utm_source=qq&utm_medium=social

从上面的讨论可以额外知道一些东西：没有设置高度的元素，默认是auto，宽度同理。auto是怎么个自动法？是根据元素的内部元素的高宽自适应的，对于具体的元素又不同，比如P14链接文章里的div，其高度是根据内部元素所定，所以当内部元素脱离文档流后就会变成高度=0，但是由于div是块级元素，默认是占满一行，所以可以看到其宽度是铺满的，既然是在元素浮动后也是如此。

 

刚开始我没看懂P14文章的原因有二，其一已经在上面解释了，其二就是为什么在后面加个空元素（还得是块级的）就可以解决塌陷问题？

当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。

————引自文章：http://m.blog.csdn.net/sjinsa/article/details/70932804

百度了好几篇，这一篇的这一段我感觉是比较靠谱的，结合鑫大在书里提到的“正是由于块级元素具有换行特性，因此理论上它都可以配合clear属性来清楚浮动带来的影响”，可以知道为什么后面加的元素还必须是块级元素才能解决塌陷问题——塌陷的父元素是一个块级元素，要想出现“父元素看到这个子元素抛开了，自然想包裹住它”这个效果，就必须要换行，如果不换行，或者换个说法后面加的的内联元素，其在文档流中与父元素是“同一水平面”的（按鑫大的说法，是“木头”不是“水”），无法影响父元素高度；而只有加了clear:both，才能让这个块元素跑到浮动元素的下面，从而让父元素的高度超过图片。

IE浏览器不支持伪元素display值为list-item的原因和为什么设置display：list-item会出现项目符号：p15

 

4.width:auto

1.width默认值是auto

 

2.width：auto时，有至少四种宽度表现：

一：fill-available，充分利用可用空间；二：fit-content，收缩与包裹；三：min-content，收缩到最小；max-content，超出容器限制。

3.P18

外部尺寸的块级元素一旦设置了宽度，流动性就消失了——所谓流动性指，margin/border/padding和content内容区域自动分配水平空间的机制。

 

4.

有包裹性（P20）的元素：display：inline-block；table元素；绝对定位、浮动。———————应用：不需要担心某个元素内容太多而破坏布局，比如：

某个模块的文字内容是动态的，可能是几个字，希望字少的时候居中显示，字超过一行巨作显示（实现见P21或者自己写的Demo：动态文字居中）

 

5.关于首选最小宽度

在CSS世界中，图片和文字的权重要远大于布局，因此，CSS的设计者显然是不会让图文在width：auto时宽度变成0的，此时的表现就是“首选最小宽度”。具体规则见P22

设置width：0，借用首选最小宽度可以实现单竖显示文字的效果（P22）；HTML实现凹凸效果（P23或者自己写的Demo：凹凸效果）

类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。

 

6.content：url()、background（背景图）、<img>的区别。

伪元素的content属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中（譬如::before和::after伪元素，用于在CSS渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在CSS渲染层中加入。事实上， 伪元素可以被浏览器渲染，但本身并不是DOM元素。它不存在于文档中，所以JS无法直接操作它。 而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。）。所以为了SEO优化和HTML的语义化，不要在伪元素中包含与文档相关的内容————基于这个原因，属于内容的图片要用img标签添加。

对于装饰用的图片，最好用伪元素配合background加入——伪元素+content：url()有一个弊端，这样加入的图片是没有办法改变宽高的，必须提前设置好。而通过伪元素+background背景图的形式加入的图片，可以用background-size调整尺寸（其实还是有办法通过JS控制伪元素的属性的，用背景图属性加入的话我们也可以通过修改background-size来动态改变图片大小了）

参考文章：

http://blog.jobbole.com/49173/

https://segmentfault.com/q/1010000009215970

http://www.jb51.net/article/81984.htm

https://developer.mozilla.org/zh-CN/docs/Web/CSS/content