哪些CSS属性可以设置百分比,其计算原则是什么?

1.背景介绍

CSS 的属性值中经常会出现百分比,并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢?设置的原则又是什么呢?

2.知识剖析

可以使用百分比的样式属性: 

定位:top,right,bottom,left; 

盒模型:height,width,margin,padding, 

背景:background-position,background-size(css3), 

文本:text-indent,

字体:font-size;

各个属性使用详细:

top,right,bottom,left:全兼容,

height:基于包含它的块级对象的百分比高度。

width:基于包含它的块级对象的百分比宽度。

margin:百分数是相对于父元素的 width 计算的。

padding:百分数是相对于父元素的 width 计算的。

3.常见问题

1.怎么让字体设置进行自适应?

2.宽度设置为百分比是怎么使用的?

3.使用百分比要注意什么?

4.解决方案

1.利用媒体查询和字体的百分比设置。

2.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义,而非百分比),div用百分比是无效的。如果坚持要用百分比,请换成table标签。

3.认清子元素的父元素

5.编码实战


6.扩展思考

定位属性的包含块一定是父元素吗?

绝对定位的包含块



定位属性的百分比的参考系是包含块。关于包含块(containing block)的概念,不能简单地理解成是父元素。如果是静态定位和相对定位,包含块一般就是其父元素。但是对于绝对定位的元素,包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。

7.参考文献

CSS样式的设置

CSS 属性之中经常出现的百分比

W3School.

视频:

视频

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 大家好,我是IT修真院深圳分院第01期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    长天_阅读 1,820评论 0赞 3
  • 大家好,我是IT修真院郑州分院王姣妍,一枚正直、纯洁、善良的web程序员。 今天给大家分享一下,修真院官网 CSS...
    初晨晒暖心阅读 1,078评论 0赞 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,353评论 1赞 92
  • 再多想一步,甩开以后呢? 梦想是什么,什么是梦想? 每天,每一天,如果都在重复昨天,人生的道路就变成了一个小闭环。...
    大艳雁阅读 139评论 0赞 0
  • 对于我们之间的结局,其实我早就知道,只是我没想到来的这么快。 我在南方,很南的南方。这里节奏很慢,离家很近,我读大...
    小芒西阅读 250评论 0赞 0

友情链接更多精彩内容