复习一下HTML和CSS

学习时间：1h30min+3h23min+3h12min+4h+3h
html和css还差最后一个作业，做倒数第二个作业用了太长时间，我对于知识掌握不牢。我今天开始复习了day1到day8的自学内容。
时间有限，只复习了选择器，列表。

color是自然继承，a标签强制转换颜色，覆盖了自然继承。

关于背景滚动的background-attachment属性，这个东西有三种，

scroll：页面滚他滚，内容滚他不滚
fixed：页面滚他不滚，内容滚他不滚
local：页面滚他不滚，内容滚他滚。

关于background-size属性：
cover（盖子）：等比拉伸，直至和长边对其。
contain（包含）：等比拉伸，直至和短边对其。

今天我才明白内部显示类型和外部显示类型，之前一直没懂，我觉得我应该每天记录遇到的问题，之前一段时间的问题积攒的太多了，导致我上回作业做了太久。

复习：box-sizing: border-box\

有一段话有那么一点点困惑，稍微记一下：

第二个div源代码顺序上比第三个div等级要高 (DOM上第二个div先出现并声明了float: right;) ，所以在浮动顺序上也会比第三个div等级要高。又因为两者同时像右浮动，第二个div就会更加地靠右。

MDN浮动中的伪列没看

使用 overflow: auto;解决高度塌陷。

：after伪元素，在被选元素的内容后面插入内容，使用 content 属性来指定要插入的内容。并且可以改变插入内容的属性。
使用
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
清除浮动！

复习完了布局，布局和包含块还不够了解，先放一阵子

script不能写在head和body里，可以和他俩并列写。

js的第一次使用，不太懂他的函数使用。
1.函数可以后定义？
2.内置函数有什么？

label和input组合使用，label是input的标注

在css中，也可以使用“标签[属性=值]的方式匹配标签”
不适用js，形成一个点击动画效果，路径：D:\programming\front-end\复习day1-11\定位实战复习2

假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。

flex-wrap属性可以控制 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

flex-direction: row;
flex-wrap: wrap;
可以缩写为：
flex-flow: row wrap;

可以用 align-self 属性覆盖 align-items 的行为。

first-child一组兄弟元素中的第一个元素
column排成一列 row排成一行

flex: 缩写与全写（MDN弹性盒子）
flex 是一个可以指定最多三个不同值的缩写属性：
第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow 属性的值。
第二个无单位比例 — flex-shrink — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。
第三个是上面讨论的最小值。可以单独指定全写 flex-basis 属性的值。
我们建议不要使用全写属性，除非你真的需要（比如要去覆盖之前写的）。使用全写会多写很多的代码，它们也可能有点让人困惑。

    align-items: center; /*控制flex项在交叉轴上的位置*/
    justify-content: space-around; /*控制flex项在主轴上的位置*/

一点关于flex的总结：
写在父元素里作用于子元素：
display: flex 设置弹性盒子
flex-direction: row; 设置弹性盒子方向为行
flex-wrap: wrap; 设置弹性盒子可以换行
flex-flow: row wrap; 设置弹性盒子方向为行且可以换行
alingn-items: center; 设置flex项（子元素）在交叉轴上的位置
justify-content: space-around; 设置flex项目（子元素）在主轴上的位置
写在子元素里作用于子元素：
flex: 1 100px; 设置子元素在弹性盒子中的比例。

max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

• {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  “学习css布局”
  box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

width: 50%;可以设置子元素宽度是父元素的一定百分比。

下面是所谓媒体查询
“http://zh.learnlayout.com/media-queries.html”

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

“如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙”这句话我没懂
出自http://zh.learnlayout.com/inline-block-layout.html

这个用到再看吧：http://zh.learnlayout.com/column.html

z-index只对定位元素有效。
如果父元素的生效，子元素无法摆脱诅咒，除非父元素失效。
如果该值一样，定位的覆盖未定位的，后面的覆盖前面的。

上图中。第一个例子，正常的img中间是会有空格的，因为多个img标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。
float还有一个大家可能不是很熟悉的特性——清空格。　“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

使用
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
.clearfix { *zoom:1; }
清除浮动！
更简单的版本
.clearfix:after {
content:" ";
display:table;（或者用block）
clear:both;
}
.clearfix{
*zoom: 1;
}

https://www.cnblogs.com/chaixiaozhi/p/8481778.html里面说尽量不要在大页面滥用浮动，可能会有小问题。

table-cell是个什么东西啊，用到再说吧：
https://www.cnblogs.com/chaixiaozhi/p/8490725.html
早上起来又有学习动力了！

关于居中：

水平居中：

1.子元素是行内元素
.parent{text-align: center;}
.child{display: inline-block;}（block：背景占一行；inline和i-b一样，所以这行可以不写）
2.子元素是块级元素（定宽度）
.child{
width: 200px;
margin: 0 auto;
}
3.子元素时块级元素（不定宽）
同1，但第二行要写。

垂直居中方法：

1.子元素是行内元素：父元素设定
line-height
2.子元素是块级元素且未设置高度：父元素设定
display: table-cell;（此元素会作为一个表格单元格显示）
vertical-align: middle;
3.元素是块级元素，高度已设定：
计算子元素的margin-top或margin-bottom即可

水平垂直居中：

1.水平对齐+行高
父元素设定
text-align: center;
line-height: 100px;
2.水平对齐+垂直对齐：
（1）子元素不是图像
父元素设定
display: table-cell;
text-align: center;
vertical-align: middle;
子元素设定
display: inline-block;如果是block，背景会占一行；用inline也差不多。
（2）子元素是图像
可不使用table-cell
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
并且在图像旁添加一个“1”用于触发行高。
解析：同1，居中文字，然后把字号调到0隐藏文字，在让图片“沾光”，图片的vertical-align默认值不是middle，所以要设置一下。
3.绝对定位+相对定位
父元素设置成相对定位，子元素设置为绝对定位，然后硬算。

设置双飞翼布局的步骤：

1、强迫症福利
* {
box-sizing: border-box;
text-align: center;
margin: 0;
}
2、写好基本属性
父元素：
.container {
height: 200px;
overflow: hidden;
}
中间弹性区：
.middle {
width: 100%;
height: 200px;
background-color: deeppink;
float: left;
}
左右小区：
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: darkorchid;
float: left;
}
三、使用负边框，让三个元素到一行。（但此时左右元素会挡住中间的元素）
使用负边框时，可以使用-100%或-200px这样的技巧。
四、父元素使用左右内边框，这样左右元素会向中间挤，文字也会被挤到中间一些。（即将解决遮挡问题）
五、最左右元素使用相对定位，解决遮挡。

如果自动格式化插件出现问题，一定是代码有地方用的有问题，比如说br自闭和时，斜杠写在了前面。

在父元素中使用font-size: 0;可以清除空格的影响。在vscode中，如果内容出现回车，会自动算一个空格，这个空格的存在可能会影响格式。