浅解relative和absolute

最新推荐文章于 2022-07-18 13:37:40 发布

mufengs16

最新推荐文章于 2022-07-18 13:37:40 发布

阅读量311

点赞数

分类专栏： html&css 文章标签： html css

本文链接：https://blog.csdn.net/qq_44087363/article/details/108217375

版权

html&css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

relative和absolute的简介

relative即相对定位。是指元素在文档中相对于自身正常位置偏移的值。元素自身预留空间并没有改变。

例如：

<!DOCTYPE html>
<html>
  <head>
    <title>relative和absolute的使用</title>
	<meta charset="utf-8">
	<style type="text/css">
	  *{
	    margin:0;
		padding:0;}
	 body{
	   background-color:#e6eef2;}
	  .box1{
	    width:200px;
		height:200px;
		background-color:blue;
		position:relative;
		left:50px;
		top:50px;}
	  .box2{
	    width:100px;
		height:100px;
		background-color:red;
		position:relative;
		left:50px;
		top:0px;}
	</style>
  </head>
  <body>
    <div class="box1">
	  <div class="box2">测试</div>
	</div>
  </body>
</html>

运行效果
在这里插入图片描述

absolute即绝对定位。使用该属性元素会脱离文档流，并不会为元素预留空间。元素通过相对于最近已定位的祖先元素的偏移来改变元素的位置。绝对定位可以设置外边距，不与其他外边距合并。
示例1（同上实例，改变css)
在这里插入图片描述

运行效果
在这里插入图片描述

此时父元素box1设置了relative,则box2设置absolute是相对于box1的偏移量

示例2（同上实例，改变css)
在这里插入图片描述

运行效果
在这里插入图片描述

box-sizing属性对relative和absolute的影响

box-sizing:content-box ; 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，边框和边距都在盒子的外部。width=内容宽度; height=内容宽度;

box-sizing:border-box; width和height包括内容、边距、边框。width=border+padding+内容宽度；
height=border+padding+内容高度。

示例1：
在这里插入图片描述

运行效果：
在这里插入图片描述

示例2：
在这里插入图片描述

运行效果：
在这里插入图片描述

Boxing-sizing默认的属性值是content-box,在盒子模型是content-box时，父元素设置relative，子元素设置abosolute而未指定left和top值，此时子元素定位在内容区域的左上角。而当子元素设置left和top值时，此时子元素相对于整个盒子定位。

Boxing-sizing属性值设置为boredr-box时，子元素定位情况与content-box一致。

mufengs16

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅解relative和absolute

relative和absolute的简介relative即相对定位。是指元素在文档中相对于自身正常位置偏移的值。元素自身预留空间并没有改变。例如： relative和absolute的使用测试运行效果absolute即绝对定位。使用该属性元素会脱离文档流，并不会为元素预留空间。元素通过相对于最近已定位的祖先元素的偏移来改变元素的位置。绝对定位可以设置外边距，不与其他外边距合并。示例1（同上实例，改变css)运行效果此时父元素b
复制链接

扫一扫