今天完成：

笔记：

图片进行缩放transform：scale（0.5）； 是在中心点进行缩放的

如果想调整位置，可以通过

1.定位

2.transform-origin:top left; 中心点定位在左上角

Transform所有属性都不改变页面布局。

图片缩放方法：

1.固定宽高

2.Scale

3.zoom

Scale缩小后占位无法解决：除非改换zoom：0.5；

后代选择器和子选择器：后代选择器范围大，所有后代

子选择器仅限于子元素，子元素的子元素都不算在内

两种缩放方式zoom，scale区别

1、zoom的缩放是相对于左上角的；而scale默认是居中缩放；
2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
3、zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。
4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。zoom不能为负，scale可以。

5.zoom针对ie 火狐不支持

6.zoom与动画连用  css3 animation

关于找bug：

1、检查页面的标签是否闭合 
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。 
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。 
2、样式排除法 
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。 对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。 
3、模块确认法 
有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。 
4、检查是否清除浮动 
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。 
5、检查 IE 下是否触发 haslayout 
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》 
快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。 
6、边框背景调试法 
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^ 
最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。

position为absolute的元素如果没有设置left, top等值与left:0;top:0的的效果不一样：例如一个div中有个absolute属性元素，其没有left或是top值，其会像个普通的inline-block属性元素一样静静地呆在这个div里面，但是一旦设置了left:0;top:0 对不起，这个absolute元素立马变身，直接从DOM tree里面脱离，独立于文档流，结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）

没有定位值的Absolute是个没有实际宽度的float

子元素浮动导致父元素塌陷（注意：子元素的margin会导致父元素掉落）

清除浮动造成的影响（父元素塌陷）：全加在父元素的样式里

1.clear：left、right、both

2.overflow：hidden/auto

3.display：in-block

4.position：absolute

5.zoom：1（IE7以前）

6.伪元素after：

.container:after {  /*container父元素*/

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;/*隐藏可见性*/

}

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

说明

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

7.给父元素加高度，撑起来

文字的阴影效果
CSS3中有text-shadow属性可以实现文字阴影效果，但是IE对CSS3的支持不佳，所以我们需要想替他的方法实现，absolute+margin是个很好很简单的方法，见下面的效果图，截自Firefox3.5：

相关css代码代码如下：

.zxx_show{padding:20px; background:#f0f3f9; color:#aaaaaa; font-size:14px;}

.zxx_text{position:absolute; margin:-1px 0 0 -1px; color:#333333;}

HTML代码：

<div>

    <span>这是一段用来测试的文字，看看是否有投影效果~~</span>

    这是一段用来测试的文字，看看是否有投影效果~~

</div>

文本溢出显示省略号：

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

overflow: scroll; 这个表示给内容加上控制滑块，可以在容器内部拖动它查看，而不把容器撑大（相当于窗体上的控制滑块）

BFC：

页面中元素都有一个隐藏的属性--Block Formatting Content块级格式化上下文（简称BFC）

/* 我们这里简单说一下BFC

具有bfc的元素我们可以抽象的理解成为隔离了的独立容器

那这个隐藏的属性我们如何触发（开启）呢？

方法：

满足下面任一条件即可

浮动元素   float属性值为除了none以外的值

绝对定位元素 position 为 absolute、fixed

display 为inline-blocks,table-cells,table-captions

overflow 为 hidden,auto,scroll

bfc的三个特性：

a.阻止外边距折叠   （解决margin合并）

b.可以包含浮动的元素  （解决子元素浮动，父元素塌陷）

c.可以阻止元素被浮动元素覆盖 */

overflow 属性规定当内容溢出元素框时发生的事情。

取值：

关于垂直居中：https://www.cnblogs.com/hutuzhu/p/4450850.html

Transparent 颜色透明度  默认值全透明黑色

深度思考：

1. css绘制特殊图形：https://blog.csdn.net/acm765152844/article/details/51417562

（三角形，无穷符号，小心心，搜索符号，气泡....）

2. Line-height  行高是指文本行基线baseline之间的垂直距离

  vertical-align  使行内元素的基线相对于该元素所在行的基线的垂直对齐

  vertical-align:可加关键值（sub middle top....）、%、长度值（10em...）、全局值（inherit...）

  其中百分比赋值是相对于line-height

关于vertical-align和line-height的坑：

（1）图片下方的迷之空白：

原因：vertical-align默认值是baseline, 也就是基线对齐。

解决办法：一、vertical-align失效：图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）-----------破坏图片的inline

          二、vertical-align 改为其他值：bottom、middle等

          三、直接修改line-height值：下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。比方说，我们设置行高5像素：div { line-height: 5px; }

          四、line-height为相对单位，font-size间接控制
如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说来个狠的，font-size设为大鸡蛋0, 本质上还是改变line-height值.div { font-size: 0; }

/*关于line-height是相对单位，line-height：1.6：相当于设置样式为1.6倍的行高。

{

Font-size:12px;

Line-height:1.6;

}   即line-height=1.6*12=....  */

（2）基本现象衍生：垂直居中

div { line-height: 240px; font-size: 0; }

img { vertical-align: middle; }

因为字体的中心要低于绝对中心，加个font-size：0；content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。自然全垂直居中

列表的两端对齐布局实现：

1. 传统的浮动(float)布局，通过width属性强行增大父容器的宽度来实现看上去的“两端对齐”效果的。+overflow:hidden

2. inline-block布局+margin负值

3. white-space: nowrap，此方法需在inline-block布局基础上使用，一般用在实现单行列表元素看上去的“两端对齐”效果上。强制列表元素不换行

4.ul{text-align:justify;}/*列表父容器*/

li{display:inline-block;}/*列表元素*/

列表元素最后一行无法两端对齐：在列表（或文字段）的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了

.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

<span></span>

最后一行是左对齐排列： 加几个空的div 把缺少的空出补满

4.title与h1的区别

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong的区别

定义：b(bold)是实体标签，用来给文字加粗，而strong是逻辑标签，作用是加强字符语气

区别：b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、评测文章中的产品名称、文章的导言； 而strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过CSS添加样式，使用别的样式强调。

建议：为了符合CSS3的规范，b应尽量少用而改用strong

i与em的区别

定义：i(italic)是实体标签，用来使字符倾斜，而em(emphasis)是逻辑标签，作用是强调文本内容

区别：i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语（比如「de facto」这样的英语里常用的拉丁语短语）；而em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式

建议：为了符合CSS3的规范，i应尽量少用而改用em

img中的alt与title属性

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

Src（引入）与href（引用）的区别

定义：href指定网络资源的位置建立链接或关系，用在link和a等元素上。src将外部资源嵌入到当前标签所在位置，如img图片和js脚本等

区别：我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。 浏览器解析src属性时，会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕。 浏览器解析到href的时候会识别该链接内容，对其进行下载不会停止对当前文档的处理

加载CSS表 <link rel="stylesheet" href="../CSS/Task1(2).css"/>  用href /*页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被暂停）*/

加载js表  <script src=“script.js”></script>   用src /*在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停*/

这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 b 标签作为最后的选项。HTML5 规范声明：应该使用 h1 - h6 来表示标题，使用 em 标签来表示强调的文本，应该使用 strong 标签来表示重要文本，应该使用 mark 标签来表示标注的/突出显示的文本。对于搜索引擎来说em和strong比i和b要重视的多

5.如何使用iconFont：https://blog.csdn.net/paditang/article/details/70141040

6. HTML中dl、ul、ol用哪个比较好？

Ul 无序

Ol 有序

Dl 定义列表  用于要给出一类事物的定义的情形。

Dl有标题和内容，有点像加强版的ul 但是ul用起来比较随便 可以随便加样式 ul比较常见

关于伪类和伪元素：

伪类的效果可以通过添加实际的类来实现 
伪元素的效果可以通过添加实际的元素来实现 
它们的本质区别就是是否抽象创造了新元素

伪类最开始的时候只是用来表示元素的动态（典型的锚伪类link、visited、hover、active） 
在CSS2标准中对它进行了扩展让它虽然逻辑存在但不需要在DOM树中标识 
伪元素代表了某个元素的子元素，虽然逻辑存在，但不存在于DOM树

伪类就像真正的类一样，可以叠加使用 
没有数量上限，只要不是互斥的 
比如这样

em:first-child:hover {

    color: red;}

这里是“与”的关系 
也就是说既要满足“first-child”第一个子元素 
又要满足“hover”光标悬浮

伪元素就要严格的多 
伪元素在一个选择器中只能出现一次，并且只能出现在末尾 

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/

    color: red;}

p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/

    color: red;}

在计算权重的时候 
伪类与类优先级相同 
伪元素与标签优先级相同

伪元素：（双冒号）

::selection
选中当前元素中，选中的文字。
注意对::selection的只能使用 color, background-color和text-shadow这几个属性。

使用::before时， 必须使用content来指定子元素的内容。
.element::before {
    content: "Note: "; /* 字符串 */
}

清除浮动：
.element::before {
    content: "."; 
   display:hidden;
    clear:both;
}

::first-line
选择当前元素的第一行。
需要注意的是，其只作用于块级元素（此处块级元素指display的值为block, inline-block, table-cell, table-caption或 list-item中的一个的）
对::first-line只能使用下面的样式
Font: font, font-style, font-variant, font-weight, font-size, line-height和font-family.
Background: background, background-color, background-image, background-position, background-repeat, background-size和background-attachment
text-decoration, text-transform, letter-spacing和word-spacing
因此，对::first-line使用margin和padding是无效的。

伪类：（单冒号）H-V-L-A

:active向被激活的元素添加样式。/*多用于按钮点击*/

:focus向拥有键盘输入焦点的元素添加样式。/*点击之后的元素一直拥有某些样式*/

:hover当鼠标悬浮在元素上方时，向元素添加样式。

:link向未被访问的链接添加样式。

:visited向已被访问的链接添加样式。

:first-child向元素的第一个子元素添加样式。

:lang向带有指定 lang 属性的元素添加样式。/*lang 属性规定元素内容的语言。*/

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

cursor还有url属性，其为设置图片地址。

关于inline-block布局：

依次排列的布局，相对于浮动布局，可以水平对齐

使用white-space:nowrap属性可以让列表不换行

/*例子：列表元素的水平滚动切换，轮播*/

inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距

解决办法：

https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

flex弹性布局方案，弹性盒布局有如下优势：
       1.独立的高度控制与对齐。
       2.独立的元素顺序。
       3.指定元素之间的关系。
       4.灵活的尺寸与对齐方式。

 明日计划：

1.继续任务六

2.复习任务四和五的知识点

 遇到的问题：

1.想要文字垂直居中，使用弹性布局后   li列表左边模块宽度自适应了，上下的宽度不一致 ：min-width；

2.Footer固定在底部方法  fixed定位

3.Footer挡住content  把content加个padding-bottom

 收获：

 好多细节的知识点没有理解，很多标签也都没用过，就会出一些问题，学的时候多想想为什么，搞清楚，才有利于继续学习和解决问题