吃土豆丝儿啵
获得徽章 0
#每天一个知识点# 今日学习小结：Normalize 对比 Reset
1. Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。
2. Normalize.css 修复了浏览器的bug
它修复了常见的桌面端与移动端浏览器的bug。这往往超出了Reset所能做到的范围。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。
1. Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。
2. Normalize.css 修复了浏览器的bug
它修复了常见的桌面端与移动端浏览器的bug。这往往超出了Reset所能做到的范围。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。
展开
评论
点赞
今日学习总结：
初始化样式表
1 reset 重置性样式表
original author : Eric Meyer
meyerweb.com
重置浏览器标签的样式表,因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
2 normalize 标准性样式表
original author : Nicolas Gallaghergithub.com
Normalize.css 是一个可定制的 CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 [CSS 重置样式集。
1. 保护有用的浏览器样式而不是去掉他们。
2. 一般化的样式：为大部分HTML元素提供。
3. 修复浏览器自身的bug并保证各浏览器的一致性。
4. 优化css可用性：用一些小技巧。
5. 解释代码：用注释和详细的文档来。
注意：Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
初始化样式表
1 reset 重置性样式表
original author : Eric Meyer
meyerweb.com重置浏览器标签的样式表,因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
2 normalize 标准性样式表
original author : Nicolas Gallagher
github.comNormalize.css 是一个可定制的 CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 [CSS 重置样式集。
1. 保护有用的浏览器样式而不是去掉他们。
2. 一般化的样式：为大部分HTML元素提供。
3. 修复浏览器自身的bug并保证各浏览器的一致性。
4. 优化css可用性：用一些小技巧。
5. 解释代码：用注释和详细的文档来。
注意：Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
展开
评论
点赞
#每天一个知识点# 今日学习总结：
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2; font-weight: 700
注意：
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2; font-weight: 700
注意：
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
展开
评论
点赞
#每天一个知识点# 今日学习小结：
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。
另一种方法比较省事
设置 margin为 auto
top left right bottom 四个方向设置为0
让外边距自动拉扯元素位置进行平衡
52.8 固定定位fixed(认死理型)
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
1. 固定定位的元素跟父亲没有任何关系，只认浏览器(window view)。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
ie6等低版本浏览器不支持固定定位。
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。
另一种方法比较省事
设置 margin为 auto
top left right bottom 四个方向设置为0
让外边距自动拉扯元素位置进行平衡
52.8 固定定位fixed(认死理型)
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
1. 固定定位的元素跟父亲没有任何关系，只认浏览器(window view)。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
ie6等低版本浏览器不支持固定定位。
展开
评论
点赞
#每天一个知识点# 今日学习总结：
绝对定位absolute
绝对定位的位置参考为相对定位父级的左上角定点
绝对定位于相对定位设置 left right时 都会保留自身外边距
绝对定位通过边偏移移动位置，但是它完全脱标，完全不占位置。
绝对定位元素的宽度高度100% 是相对于定位父级来的 不是结构父级
绝对定位与相对定位不同的地方在于
1. 绝对定位完全脱标 相当于自建一个新的层级
2. 绝对定位的移动相对坐标原点为 相对定位父级的左上角原点
1. 没有相对定位父级的情况下 以浏览器窗口显示区域(window view)左上角为定位原点
2. 有相对定位父级(绝对、固定或相对定位)的父元素/祖先的情况下 以相对定位父级的左上角为定位原点
3. 绝对定位的宽度百分比 继承自相对定位父级 并不继承于 结构父级
绝对定位absolute
绝对定位的位置参考为相对定位父级的左上角定点
绝对定位于相对定位设置 left right时 都会保留自身外边距
绝对定位通过边偏移移动位置，但是它完全脱标，完全不占位置。
绝对定位元素的宽度高度100% 是相对于定位父级来的 不是结构父级
绝对定位与相对定位不同的地方在于
1. 绝对定位完全脱标 相当于自建一个新的层级
2. 绝对定位的移动相对坐标原点为 相对定位父级的左上角原点
1. 没有相对定位父级的情况下 以浏览器窗口显示区域(window view)左上角为定位原点
2. 有相对定位父级(绝对、固定或相对定位)的父元素/祖先的情况下 以相对定位父级的左上角为定位原点
3. 绝对定位的宽度百分比 继承自相对定位父级 并不继承于 结构父级
展开
评论
点赞