使用css时，可能会出错的两个地方

陆斌发布于2019-08-30 15:55 / 1912人阅读

摘要：本文主要介绍一下两个在日常的工作中可能会出错的地方。注意的百分比取值，总是相对于父元素的高度。例外父代元素中，有元素设置了，则相对于设置了的父元素定位。写在后面本文总结了平时开发中需要稍微注意一下的，可能会出错的两个问题。

本文首发于公众号：符合预期的CoyPan

写在前面

css大家都很熟悉了，这里就不多介绍了。本文主要介绍一下两个在日常的工作中可能会出错的地方。

margin-top 与 padding-top

这两个属性大家都很熟悉了，margin-top表示外部的上边距，padding-top表示内部的上边距。

取值可以是一个具体的值或者一个百分比，如：

margin-top: 10px;
margin-top: 10%;

padding-top: 20px;
margin-top: 20%;

当取值为具体的值时，没有什么好说的。当取值为百分比时，需要特别注意：百分比不是相对于父元素的高度的，而是相对于父元素的宽度的。

w3c标准如下：

直接看例子：

用处：可以用来在页面中显示 固定宽高比的图片。

注意：height、top的百分比取值，总是相对于父元素的高度。

这里提一下，w3cSchool中文站中，关于margtin-top的描述是错误的。地址在这里：http://www.w3school.com.cn/css/pr_margin-top.asp

position: fixed

一提到position:fixed，自然而然就会想到：相对于浏览器窗口进行定位。

但其实这是不准确的。如果说父元素设置了transform，那么设置了position:fixed的元素将相对于父元素定位，否则，相对于浏览器窗口进行定位。

w3c的官方标准如下：

看例子：

给.parent加上transform:translateY(0)以后，

总结

padding-top、margin-top、padding-bottom、margin-bottom取值为百分比时，是相对于父元素的宽度。

position:fixed，相对于浏览器窗口定位。例外：父代元素中，有元素设置了transform，则postion:fixed相对于设置了transform的父元素定位。

写在后面

本文总结了平时css开发中需要稍微注意一下的，可能会出错的两个问题。符合预期。

欢迎关注我的公众号: 符合预期的CoyPan
这里只有干货，符合你的预期

GPU云服务器云服务器可能不知道地方可能会什么地方会用到云服务器 dns服务器可能发生故障时

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117260.html

CSS 自定义属性 - 入门

摘要：变量的函数引用的自定义属性被称为变量。为此，可读性和可维护性是自定义属性最大的优势。自定义属性作用域在中，变量有作用域一说。因此，在选择器中声明的自定义属性，其作用域的范围是全局范围，也就是全局作用域。引言 CSS语言是一种声明式语言，不像其他语言有变量、条件和逻辑等特性，因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一...

seanlook 2019-08-30 15:44 评论0 收藏0
Web真相: CSS不是真正的编程 | Christian Heilmann

摘要：每隔几个月就会出现一篇文章表明并不是真正的编程语言。你无需担心因添加了一行不支持的代码而出错，解析器会跳过它不支持的属性。当遇到错误时，解析器会中断解析并且抛出错误信息，而解析器会忽略这些错误并继续解析。每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性：人们对CSS有一些强烈的情愫。— Dave Rupert...

wind5o 2019-08-02 16:14 评论0 收藏0
Web真相: CSS不是真正的编程 | Christian Heilmann

摘要：每隔几个月就会出现一篇文章表明并不是真正的编程语言。你无需担心因添加了一行不支持的代码而出错，解析器会跳过它不支持的属性。当遇到错误时，解析器会中断解析并且抛出错误信息，而解析器会忽略这些错误并继续解析。每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性：人们对CSS有一些强烈的情愫。— Dave Rupert...

vvpale 2019-08-29 18:39 评论0 收藏0
move.js操作CSS3动画

摘要：是一款简单的支持动画的库，对于对的操作不是很熟悉的人来说，使用提供的方法操作动画更简单方便。要想使用提供的方法，首先应在我们的页面中引入使用操作动画样式注意的位置应该在中，并且紧放在的标签的上一行，放在其他地方将会出错。 move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。 ...

novo 2019-08-20 12:30 评论0 收藏0
move.js操作CSS3动画

摘要：是一款简单的支持动画的库，对于对的操作不是很熟悉的人来说，使用提供的方法操作动画更简单方便。要想使用提供的方法，首先应在我们的页面中引入使用操作动画样式注意的位置应该在中，并且紧放在的标签的上一行，放在其他地方将会出错。 move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。 ...

ethernet 2019-08-01 15:58 评论0 收藏0