盒子模型与层模型

最新推荐文章于 2023-03-14 10:36:21 发布
最新推荐文章于 2023-03-14 10:36:21 发布
阅读量177 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721518/article/details/108141266
版权 
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
  
	 <div class="wrapper">
	    <div class="content">
		   <div class="box">
	    </div>
	  </div>
	</div>
 </body>
</html>


.wrapper{
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述

.wrapper{
   
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述

.wrapper{
    margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述

.wrapper{
    margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   position:absolute;
   left:50px;
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述

.wrapper{
    margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
   position:relative;
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   position:absolute;
   left:50px;
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述

.wrapper{
 position:relative;
    margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
  
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   position:absolute;
   left:50px;
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述
从最后三张图可以总结出absolute定位的特点，即子级是根据最近的有定位的父级进行定位，如果父级都没有定位，则相对于文档进行定位。而relative则相对于原来的位置定位。

.wrapper{
   position:relative;
   margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
  
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   position:relative;
   left:50px;
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述

.wrapper{
   position:relative;
   margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
  
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   position:relative;
   right:50px;
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述
根据absolute与relative两种定位技术的特性，一般将参照物定义为relative,被参照的物体定义为absolute然后进行位置参数的给出。

.wrapper{
   
   margin-left:100px;
   width:200px;
   height:200px;
   background-color:orange;
}
.content{
  position:relative;
   margin-left:100px;
   width:100px;
   height:100px;
   background-color:black;
}
.box{
   position:absolute;
   left:100px;
   width:50px;
   height:50px;
   background-color:red;
}

在这里插入图片描述
3.固定定位技术（fixed）

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
  
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
      <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br> <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br> <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>

 </body>
</html>



div{
  position:fixed;
  left:0;
  top:80px;
  width:50px;
  height:100px;
  background-color:red;
  color:#fff;
}

在这里插入图片描述

div{
  position:fixed;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  background-color:red;
  color:#fff;
  margin-left:-50px;
  margin-top:-50px;
}

在这里插入图片描述
无论怎么移动，它总是固定不动，对于最后一个应该考虑到自身的宽高，不然不可能完全居中，所以要添加margin-left:-50px; margin-top:-50px;

叹！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端的 position属性
Andybfw的博客
08-11 1278
CSS Position(定位) 常见的5个属性  static relative fixed absolute sticky----left right  top   bottom  4个属性值。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法   1.static------HTML元素的...
对div盒子模型使用心得总结
09-22
相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧，本文也有一个理解并附有示例代码，喜欢的朋友可以参考下
position定位的属性值
m0_62198921的博客
01-07 1663
posititon定位属性都有：static 、relative、absolute、fixed 、inherit和 sticky,这里sticky是CSS3新发布的一个属性。 1、position：static static(清除定位)是position的默认值，有时候给元素设置固定定位，可以使用position：static去掉 2、 position ：relative relative(相对定位),不影响元素本身的特性，不会使元素脱离文档流，相对于本身原本位置进行偏移 3、position：abs.
CSS 属性之 position讲解
请叫我然先生的博客
06-29 675
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: static position: inherit position: relative position: absolute position: fixed 依次讲解这5个值的应用。position: static static 为position 属性的默认值，static 元素会遵
position之static
lbs311709000127的博客
01-18 1万+
position ：static 静态定位/常规定位/自然定位 作用：使元素定位于常规流/自然流中 特点： 忽视top、bottom、left、right、z-index，是这些关键字作用失效 如果两个元素都设置了外边距，最终的外边距取决于外边距大的 在具有固定width和height值时的元素，如果把左右边距设置成auto，则左右边距会自动扩大占满剩余宽度，实现这...
position: inherit、static、relative、absolute和fixed
NewWent的博客
11-13 2927
inherit: 规定应该从父元素继承 position 属性的值。 static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明，z-index只对relative、absolute、fixed有效，默认为0）。 relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，"lef...
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的...
CSS 理解盒子模型
09-25
盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！
盒子模型.xmind
05-12
这是盒子模型的思维导图，便于理解CSS这一核心，通过思维导图我们可以成体系的理解盒子模型，便于学习和记忆
position 属性有哪些值，各有什么特点？
sinat_36825828的博客
03-22 1032
positon 定义和用法：position 属性规定元素的定位类型。 说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 —— 来自 w3school position有以下可选值： 其中，CSS 定位机制： CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的...
【CSS】定位属性position使用详解（static、relative、fixed、absolute）
全栈弄潮儿
03-14 976
css定位属性position：static、relative、fixed、absolute详细介绍及使用样例。
web前端的position定位及元素居中方式
tuantaun_的博客
07-27 2796
position定位方式 1.position:static 无定位（默认值） (1).元素出现在正常文档流（top、right、left、bottom等属性不使用） (2).当没有对一个元素指定定位时，使用static（默认），也就是按照文档的流式（flow）定位，将元素放到合适位置 (3).在不同分辨率下，采用流式布局可以很好地自适应，取得较好布局 2.position：inherit 继承父...
position inherit 定位
weixin_33804582的博客
05-23 2874
inherit 继承父元素 定位 举例 : <div class="father"> 　　<p></p> </div> div{ 　　position:fixed; 　　left:0; 　　top:0; } p{ 　　position:inherit;//继承了父元素的fixed;此时就会相对于浏览器定位;不会相对于父元...
CSS Position 定位
Auto
11-29 781
文章目录CSS Position 定位#1 说明#1.1 什么是Position塌陷#1.2 什么是文档流(normal flow)#2 开始#2.1 position: static#2.2 position: relative#2.3 position: absolute#2.4 position: fixed#2.5 position: sticky CSS Position 定位 #1 说...
关于position的六种属性
Yweivvv的博客
03-13 1750
css关于position的六种属性
CSS 布局 - position 属性：绝对定位和相对定位
sunshine__sun的博客
06-27 2005
position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。 一、position：static；（静态） 默认情况下是静态定位，静态定位的元素不受 top、bottom、left 和 right 属性的影响。 position: static; 始终根据页面的正常流进行定位； 二、position: relative;（相对定位） 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正.
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 8514
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
position四个属性详解
热门推荐
weixin_45663697的博客
06-01 1万+
1. position:static; 这个属性让元素使用正常的布局(元素在文档常规流中当前的布局位置)。 也就是说元素没加这个属性和加了以后位置都是不变的 只是此时 top, right, bottom, left 和 z-index属性无效。 2. position:relative;：相对定位 在元素原有的位置基础上，根据设置的top,left调整元素位置 不会改变页面布局，不影响其他元素的偏移，因此会在此元素未添加定位时所在位置留下空白 position:relative 对 table-*-
标准盒子模型与怪异盒子模型
最新发布
07-11
低版本的盒子模型与最新的盒子模型不同之处在于，低版本的盒子模型是指，它只考虑了内容区域，而没有考虑边框和内边距。这就导致在计算宽度时，需要将边框和内边距分别加上去，才能得出实际宽度。而在最新的盒子模型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值