作者：admin 发布时间：2024-01-24 04:00 分类：资讯 浏览：93 评论：0
方法一：使用绝对布局位置：absolutefordiv并设置top、left、right、bottom的值相等，但不一定都等于0；并设置边距：自动。方法二：这个方法需要知道div的宽度和高度。
绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。
您可以使用以下方法之一来水平垂直居中一个行内块元素： 利用绝对定位实现元素垂直，水平居中显示。 利用margin： 0 auto实现块级元素水平居中。 根据margin： auto 实现居中。
其中 margin-left：-100px 和 margin-top：-100px 可以写成 margin：-100px 0px 0px -100px 方法三：div使用绝对定位position：absolute，并且设置left和top的值都为50%。
bodydiv：nth-of-type（1）div{ width：100px； height：100px； background：#0f0； position：absolute； top：50%； left：50%； margin-left：-50px； margin-top：-50px；} 第二种：利用绝对定位居中，非常常用的一种方法。
HTML：CSS：重点：在父元素中设置相对定位position： relative，子元素设置绝对定位 position： absolute；top和left相对父元素的50%，与其搭配的 transformse： translate（-50% ， -50%）表示X轴和Y轴方向水平居中。
如果是文字或者其他块级元素。使用定位的思想。position：absolute，然后boottom：0。父元素注意要设置一下position：relative。因为绝对定位是相对于最近一个非static定位的元素的相对位置。
运用这个CSS把DIV永远置于页面的底部 利用绝对定位，然后设置底部距离为0。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于：sticky：ticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position： sticky； 基于用户的滚动位置来定位。
CSS布局方式有很多，从远古时代的table（表格）布局--float（浮动）布局--position（定位）布局--flex（弹性）布局--grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。float的定义和常见用法：float属性定义元素在哪个方向浮动。
css三种基本布局方式如下：流式布局：css流式布局是将网页元素按照宽度自适应地排列。弹性布局：是CSS3中新增的一种布局方式，通过设置容器元素的display属性为flex，来实现相应子元素的自适应布局。
Flex 是 Flexible Box 的缩写，意为弹性布局，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。
footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。原生css布局的方式，position布局，也是最基础的方式。
Flex 是 Flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left：20px；top：80px； 这个容器始终位于距离浏览器左20px，距离浏览器上80px的这个位置。
一：绝对定位 position： absolute；绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
相对定位中的「top」、「right」、「bottom」和「left」被用于设定相对于该元素原本所在位置的偏移量，而绝对定位的这四个属性则不太一样。