CSS定位相关

宸起

于 2021-09-01 16:36:25 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

分类专栏： css学习文章标签： css html html5

本文链接：https://blog.csdn.net/qq_36262395/article/details/120043193

css学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS中的absolute和relative定位原理，absolute依据最近的定位父元素定位，而relative则是相对于自身定位。同时，列举了多种实现元素水平和垂直居中的方法，包括使用text-align、margin、transform等属性。另外，详细讨论了line-height的继承规则，当设置为百分比时，会根据父元素计算实际值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、absolute 和 relative 分别依据什么定位？

relative依据自身定位

absolute依据最近一层的定位元素定位

定位元素：

absolute relative fixed
body

2、居中对齐有哪些实现方式？

水平居中

inline元素：text-align: center
block元素：margin: auto
absolute元素：left: 50% + margin-left 负值

垂直居中

inline 元素： line-height 的值等于height 的值
absolute 元素：top:50% + margin-top 负值
absolute 元素：transform:translate(-50%,-50%)
absolute 元素：top,left,bottom,right = 0 + margin: auto

3、line-height继承问题

<style>
body {
	font-size: 20px;
	line-height: 200%;
}
p {
	font-size: 16px;
}
</style>
<body>
	<p>AAA</p>
</body>

问：上述代码，p 标签的行高将会时多少？
答： 40px

【line-height如何继承？】

写具体数值，如30px，则继承该值（比较好理解）
写比例，如2/1.5，则继承该比例（比较好理解）
写百分比，如200%，则继承计算出来的值（考点）