lightbrush / my-ife-learning-journey Goto Github PK

刚开始用Github，发现不太懂怎么在自己的仓库更新fork过的项目，昨儿费七八力的查了很久，算是稍微有了头绪，感谢那些写过教程的前辈~

这十多天来都在忙着期末，赶紧结束这无聊的日子，好好研究JS。

尽管基础差，也要干趴它

其实应该都是我不熟练的锅
1.布局怎么玩儿
2.表单怎么玩儿
3.标签和属性记不住
4.webstorm编辑器怎么玩儿

。。。。。。我只有反复看反复码了……

祖明学长说第一至五节的任务可以在_一天内熟练掌握_，但我感觉把所有资料通读一遍的时间都要好久了……还是怪我记性不太好吧。

因为自己比较蠢，感觉双飞翼布局布置得挺有些复杂……于是根据自己的理解写了一段双飞翼改。原始代码还参考了Github@DIYgod的。

测试下来发现效果居然很不错，至少在外观上和双飞翼差不多，其他方面我就不好发言了，确实新手……

目前看来，我写的这个双飞翼改复杂程度有所降低，兼容性没有问题（IE10开了IE7和8的兼容，chrome也过关），且不需要添加额外标签就能实现完美效果（我目前理解的完美是两边等宽中间自适应……）。

• W3school：
  • 不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
  • 上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
  • 每个边框有 3 个方面：宽度、样式，以及颜色
  • 元素的背景是内容、内边距和边框区的背景
  • 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。（可以采用border-color: transparent创造不可见边框）
  • 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
  • 利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
  • 从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
  • 外边距合并指的是，当两个_垂直外边距_相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    • 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
    • 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
    • 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。（？）
  • 行内框在一行中水平布置。可以使用_水平内边距_、_边框_和_外边距_调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
  • vertical-align:处理垂直排列
  • z-index：处理图层优先级
  • overflow：处理元素溢出问题
• MDN

  • 外边距将该元素与其它元素分开。（所以负边距应该就是指融合了。）

  • 内容区域content area 是真正包含元素内容的区域。位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。

    • 如果 box-sizing 为默认值， width, min-width, max-width, height, min-height 与 max-height 控制内容大小。
    • 其占用空间（行高）由line-height决定，即使有内边距与边框。

  • 到目前为止，你可以通过像素来指定border大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户_改变字体大小_之后，你的布局可能会发生_错位_。

    因此，最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。

  • 文本对齐会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。

  • position

    • relative

      通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。

    • fixed

      为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。

    • absolute

      为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。

    • static

      默认值。当明确要关闭位置属性时使用。