html如何给盒子设置位置,CSS盒子定位

又到周末了，又结束了一周的课程了，表示昨前天开始老师布置家庭作业开始写页面了，前天的还好，12点之前搞定，昨天的熬到2点，表示大神不要笑哈，毕竟能力有限，第二天看了老师的讲解，才发现做了非常多的无用功，好了，闲聊就到这里吧，下面我分享下这周老师讲到的一些内容，以下都是自己的理解哈，仅供参考：

CSS盒子定位：

什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种：

1、静态位置(position：static)也就是默认值：

每一个元素在没有float值的时候，都有position值，就是static，可以直接理解它在是默认值的时候就是常规流，所有规则与常规流一样；

2、相对位置(position：relative)：

相对定位：相对于自己原来的位置进行移动。

实际代码操作：对于标签样式先声明

position:relative;

再描述移动方向与像素大小

left带正数向右移，以此类推，正数情况下方向相反，那么在这种情况下对于初学的我们，这种定位可以以带负数形式就与标签头方向相同了。

以相对定位移动盒子后盒子时不脱离标准流的，所移动的是一个“虚影”，并非整个盒子往那边移动，所以盒子移动之后，周围的盒子是不会发生变化的。

相对定位在实战中用得比较少，一般用于盒子微调。

3、固定位置(position：fixed)：

固定定位，顾名思义就是固定盒子不随网页滑动而移动

实际代码：position:fixed;

可以通过top、bottom、left、right设置像素值来固定位置；

一般用于导航栏或者网页角落的广告；

4、绝对位置(position：absolute)：

绝对定位使元素的位置与文档流无关，也就是脱离文档流，因此不占据空间，比如说有三个纵向排列的三个元素盒子，尺寸宽高都为100px，如果给中间的盒子设置了position：absolute；那么他就会脱离出来，它下面的那个盒子就会向上浮，绝对定位盒子的包含块主要看他父级或祖先级里面有没有定义了position值的，如果有，就是他的包含块；

这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

其实相对定位与绝对定位都属于常规流。

标签：定位,盒子,位置,相对,position,移动,CSS

来源： https://www.cnblogs.com/potapo-tudou/p/10540166.html

html如何给盒子设置位置,CSS盒子定位相关推荐

html盒子的相对位置,CSS盒子的相对定位于绝对定位 ·
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 之前看了CSS的布局与定位,看的云里雾里的,不是太理解,这里做实验总结一下. 为了便于理解,这里引用两个空间: 另外设置 ...
css中盒子模型图片,CSS 盒子模型
盒子模型(Box Model) 一般的标签都是盒子,但是除了极个别的标签(例如:img.input标签)不是盒子盒子模型的属性 width 盒子内容的宽度 height 盒子内容的高度 margin ...
css中盒子的属性,css盒子模型及属性介绍
盒子模型块元素(盒子) 搭建网页结构 1.特点: 1)独占一行空间 2)默认宽度为100%(占满父元素) 3)高度默认为0,如果有子元素,父元素高度由子元素决定 4)宽度和高度可以改变,通过width ...
html盒子自动居中,css盒子怎么居中？
在前端切图的时候,可能经常会遇到一个div盒子怎么在固定区域垂直居中的需求,下面我们来看一下css实现盒子居中的方法. css设置盒子居中的方法: 第一种: 用css的position属性 .div1 ...
html盒子宽高,css盒子模型之宽度和高度
盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) HTML代码 *lt;div class="pag1">*lt;/div ...
html盒子圆角属性,CSS盒子模型-圆角边框
CSS3中新增了圆角边框样式,可以将盒子变为圆角. border-radius 用于设置元素的外边框圆角. 语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正 ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS盒子的三种类型（border-box、content-box）
文章目录一.CSS盒子 1.1 盒子的四个区域二.CSS盒子的类型 1.content-box 内容盒子 content-box盒子的宽高计算公式 2.border-box 边框盒子(怪异模型) ...

html如何给盒子设置位置,CSS盒子定位

html如何给盒子设置位置,CSS盒子定位相关推荐

最新文章

热门文章