[外门弟子]JS-8|2019年04月06日的日报-技能树.IT修真院

发表于： 2019-04-06 23:03:17

1 703

Day 47 task13-2

今天完成的事

1.完成task13

2.开始task14

遇到的问题

1.看到有师兄的成果展示中首页可以点击侧边栏，试图做出来

label可以绑定input来进行控制

input:checked ~ label ：相邻同胞选择器，选择被选中的input标签后所有的label标签［input 和 label标签有共同的父元素］；

input:checked ＋ label ：相邻同胞选择器，选择被选中的input标签后第一个label标签［input 和 label标签有共同的父元素］；

将一个input放置于header和main外面，然后把想要作为checked触发器的label放置于相应的header或者main中，并将input默认样式清除，此时input高度为零是无法选中并且不占高度的，与之绑定的label就变成了唯一能触发input的触发器。此时就可以设置checked触发

2.学习到一个很有意思的做法

投票页的audio控件，无法控制使得暂停键正好出现在img上

缩小只能以三个小圆点为中心点缩放

所以直接将控件翻转180度然后设置opcity： 0；

收获

1.属性书写顺序

同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性。

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等

如果包含 content 属性，应放在最前面。

2.BFC

BFC的F就是格式化的意思 formatting ，b就是最熟悉的block块级元素，c就是文本content。所以全称是块级格式化上下文本

一个与外部隔离，相对独立的盒子，但是存在于文档流中（absolute float这种都是脱离的）

想要触发BFC有以下几个条件

1.float: left

2.overflow 又分为 overflow-hidden 和 overflow-scroll

3.display:table

4.position的值，不是static或者relative ，也就是absolute和fixed也满足条件

3.CSS Reset

CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性

css reset主要是因为html标签在浏览器中都有各自的默认样式，不同浏览器的默认样式之间也会有差别，通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

2、关于CSS样式分离

CSS样式分离，一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。当然，对于一些重要的页面，例如淘宝首页，直接将CSS嵌在了页面头部，其降低链接请求的重要性要大于样式的重用。

CSS样式分离之再分离

表型上的两个特点为“分离”和“命名”，掌握与理解其深层次思想的关键是思维方式的转变，这包括“CSS库概念”意识。要想让样式再分离发挥其最大的功效，对其精髓思想有着较为深入的理解是很必须的，否则，您可能会用的很痛苦，或是滥用而产生其他一些问题。

样式彻底分离的副作用

如果我们把所有的CSS样式进行拆分。对于一些复杂的UI效果，例如圆角自适应的导航，则此处的HTML代码开销会非常之大，此时一味的样式再分离，会使得HTML代码变得很痛苦。可以肯定的是，所有样式都要分离显然是不行的，更加可以肯定的是，目前基本上所有的网站的样式的分离都是不够的，远远不够，CSS也是需要架构的，而没有架构这一意识，分离反而会出问题。

具体的规则

1. 总是类名优先

2. 组件代码放在一起

当使用一个组件的时候，如果所有和组件相关的资源（其 JavaScript 代码，样式，测试用例，文档等等）都可以非常紧密地放在一起，那就更好了：

3. 使用一致的类命名空间

4. 维护命名空间和文件名之间的严格映射

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

reset和normalize如何选用？还是直接不用？

按需求出发

1.如果要使用reset。则尽量不要去直接拷贝CSS reset的代码，自己网站上没用到的不用重置，且无意义的重置不要（比如div本不需要{margin：0；padding：0}），尽量保证用到的重置是高效简洁的；

2.如果要使用normalize，可以将normalize.css作为自己项目的基础CSS，自定义样式值来满足自己的需求。(例如去掉a标签自带的下划线和p标签的自带的margin）

3.如果选择不用，可以根据自己需要的再去设置改变，或者写一段适合自己的修改默认样式的代码。

4.DOM

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。