欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页

浅解relative和absolute

程序员文章站 2022-05-27 09:21:31

...

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>

运行效果
浅解relative和absolute

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

运行效果
浅解relative和absolute

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

示例2（同上实例，改变css)
浅解relative和absolute

运行效果
浅解relative和absolute

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：
浅解relative和absolute

运行效果：
浅解relative和absolute

示例2：
浅解relative和absolute

运行效果：
浅解relative和absolute

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

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

相关标签： html&css html css

上一篇： [译文&摘抄] 前端 Console 调试小技巧

下一篇： keil5 if else 问题

推荐阅读