73_绝对定位元素的位置（水平和垂直方向的布局）

VIP文章 已于 2022-06-13 11:20:29 修改
阅读量468 收藏 2
点赞数
分类专栏： HTML CSS 基础 文章标签： css css3 前端
于 2021-08-20 22:24:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gty204625782/article/details/119832241
版权

水平布局

margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其包含块的内容区的宽度

当我们开启了绝对定位后：

水平方向的布局等式就需要添加 left 和 right 两个值：left + margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含块的内容区的宽度

当发生过度约束，也就是等式两边不相等时：
  • 如果9个值中没有 auto ，则自动调整 right 值以使等式满足
  • 如果9个值中有 auto ，则自动调整 auto 的值以使等式满足
  • 这时候可以设置 auto 的值有：margin、width、left、right
  • 因为 left 和 right 的值默认是 auto ，所以如果不指定 left 和 right 的值，当等式不满足时，会自动调整这两个值
垂直方向的布局此时也需要满足等式：

top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 其包含块的内容区的高度

使元素在父元素内水平垂直居中：
<!DOCTYPE html>
<html>
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
绝对定位元素的水平垂直居中的方法（3种任选）
01-21
缺点：需要提前知道元素的宽度和高度。 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .box{ width: 600px; height:...
js实现盒子水平垂直居中
qq_42349528的博客
10-03 3103
假设我们不知道盒子的宽高 方法1：绝对定位 + transform中的translate。首先对子元素进行绝对定位，父元素进行相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面中央，最后通过translate来调整子元素的中心点到页面的中心。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</ti
css绝对定位元素的位置
m0_47001401的博客
07-11 135
绝对定位元素的位置
wxwmb11的博客
03-29 99
不满足这个等式，要调整right margin left right content 水平，垂直方向都要满足等式 元素的层级 对于开启定位的元素 可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数，值越大元素的层级越高 z-index 都不写的话按照代码位置靠下的 定位的层级都是一样的 祖先元素的层级在高也不会盖住后代元素 ...
前端学习笔记56-绝对定位元素的位置
weixin_45034895的博客
05-04 130
前端学习笔记56-绝对定位元素的位置水平方向垂直方向让box2居中的一种方法 没想到定位还没学完，继续学。 水平方向 在笔记36提到过水平布局 元素的以下七个值的和等于包含块的内容区宽度。 margin-left border-left padding-left width padding-right border-right margin-right 但是当我们开启了绝对定位后，就不止七个了，还得加上left和right，变成了九个值。 <!DOCTYPE html> <html lan
~64绝对定位元素的位置
sanda_nd的博客
02-01 857
一、开启绝对定位后的水平布局 开启绝对定位后，水平布局的等式需要添加left和right两个值，即变成： left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素内容区的宽度 二、变化 当发生过度约束时，若9个值中没有auto则自动调整right以使等式满足；若9个值中有auto则会调整auto的值以使等式满足 注意：1、left和right的默认值就是auto
56绝对定位元素的位置
quanxiaobai_的博客
06-13 72
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定
CSS网页布局教程:绝对定位和相对定位
12-07
以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇...
网页布局绝对定位(position)轻松简单
09-27
网页制作Webjx文章简介：要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得... 使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器
CSS基础(19)_绝对定位元素的水平或垂直布局
no15870678621的博客
04-12 941
绝对定位元素的水平或垂直布局
绝对定位元素的布局
weixin_46149357的博客
07-25 357
水平布局： left + margin-left + border- left + padding-left + width + padding-right + border-right + margin-right + right 当我们开启绝对定位后： 水平方向的布局等式就需要多添加left 和right 两个值 此时规则和之前一样只多了两个值 当发生过度约束： 如果9个值中没有auto 则自动调整right 的值以使等式成立 如果有auto， 则自动调整auto的值来使得等式满足 .
绝对定位元素的水平与垂直布局
abc630727719的博客
03-24 679
水平布局 开启绝对定位的元素进行水平布局，必须设置left与right属性.box{ position:absolute; left:0; right:0; } 等式与以前一样。 发生过度约束，当有auto值时，自动进行调整，以满足等式。否则margin-right自动补足。 可以设置auto值的属性 margin、width、left、right left、right默认为auto ...
绝对的水平和垂直定位
weixin_30610755的博客
09-17 248
先看效果： 用法：只需要给定位居中的盒子设置margin：auto；position：absolute；left：0；top：0；right：0；bottom：0；就可以实现居中 兼容性：非常好，Chrome, Firefox, Safari, Mobile Safari, IE8-10. 原理：参考https://codepen.io/shshaw/full/gEiDt 转载于:htt...
CSS 定位,绝对定位(absolute),相对定位(relative)
houyanhua1的专栏
03-11 503
定位方向: left  | right  | top  | bottom一、静态定位  position:static;  默认值，就是文档流。 二、绝对定位Position:absolute;特点：1.元素使用绝对定位之后不占据原来的位置（脱标）2.元素使用绝对定位，位置是从最近的有relative相对位置的父级(祖先)元素(直到body标签)出发。3.嵌套的盒子，父盒子(祖先盒子)没有使用定位...
各种情况下的定位方式总结（元素水平/垂直居中）
weixin_44463883的博客
06-09 201
1.定长定宽 1.1绝对定位和负magin值 HTML: <div class="father-box"> <div class="children-box"></div> </div> CSS: .father-box { width: 200px; height: 200px; border: 1px solid red; margin: 0 auto; position: relative; }
html-css7 定位/水平和垂直方向属性/元素层级/图标字体库/字体设置和样式/水平垂直对齐/文本修饰及省略号
Kerryliuyue的博客
08-04 415
定位(position) -定位是一种更加高级的布局手段 -通过定位可以将元素摆放到页面的任意位置 -取值: static 默认值，元素静止就是没有开启定位 relative 开启元素的相对定位 absolute 开启绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 相对定位:需要设置元素的偏移量，否则不会发生任何的变化 一定要先开启定位，再设置偏移量 偏移量(offs
实现绝对定位元素水平垂直居中的两种方法
04-09 189
平时,用的方法即第一种方法是设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。 例如，绝对定位元素的width:100px;height:100px; 代码如下: position:absolute; left:50%; top:50%; margin-left:-50px...
CSS中的定位
fairy_zhong的博客
03-19 122
1、什么是定位（position） 定位是一种更加高级的布局手段。通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位。 可选值：static 默认值，元素是静止的没有开启定位。 relative 开启元素的相对定位。 absolute 开启元素的绝对定位。 fixed 开启元素的固定定位。 sticky 开启元素的粘滞定位。 1.1、相对定位： 当元素的position属性值设置为relative时则开启了元素的相对定位。 相对定位的特点： a.元素开启相对定位以后，如果不设置偏移量
栅格布局如何实现水平居中和垂直居中
最新发布
06-15
栅格布局可以通过以下方式实现元素的水平居中和垂直居中： 1. 水平居中：使用`justify-content: center`实现水平方向上的居中。 ``` .container { display: grid; justify-content: center; /* 水平居中 */ } ``` 2. 垂直居中：使用`align-items: center`实现垂直方向上的居中。 ``` .container { display: grid; align-items: center; /* 垂直居中 */ } ``` 3. 同时实现水平居中和垂直居中：可以将上述两种方式结合使用。 ``` .container { display: grid; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 需要注意的是，以上方法都是针对容器内部的元素进行居中处理。如果要使整个容器水平垂直居中，可以使用绝对定位和`transform`属性实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值