5大CSS重点、难点、易错点总结，入门学前端必看_css的难点和重点

作者：IT小白 | 2024-02-27 06:52:16

踩

css的难点和重点

最近跟粉丝同学反馈，CSS中知识点多，在学习过程中，学到后边忘记前面。有些相似的内容很容搞混，弄得自己学起来特别的吃力和头痛。要对这些容易搞混点的做好区分，最好的办法就是把他们整合到一起来对比总结分析。

做我的粉丝我宠你，于是，我分了上中下两篇来把这些易错的难点整理出来，本篇内容概要：

在css中有很多属性值的单位可以是用%百分比表示，那%百分比最终的计算结果是多少？

比如 margin-top:100%; 这里的margin-top的值最终是多少呢？

margin-top的百分比是相对于父元素的width值而言，如果父元素width为100px，则margin-top:100%;换算后的值就是100px;

以下是常见属性%百分比单位计算

css属性	标准盒模型 content-box	怪异盒模型border-box
width、height	%百分比相对于`父元素`的`width`值	%相对于（`width-pading-border`)的值
margin和padding	%百分比相对于`父元素`的`width`值	%相对于（`width-pading-border`)的值
top、bottom	%百分比相对于`父元素`的（`width+上下padding`)	%相对于（`width-左右border`)的值
right、left	%百分比相对于`父元素`的（`height+左右padding`)	%相对于（`height-上下border`)的值
line-height	%百分比相对于`自身`的`font-size`大小	无关
font-size	%百分比相对于`父元素`的`font-size`大小	无关</

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/150849