css的position属性（后台开发时，右侧容器container的布局居中absolute）

最新推荐文章于 2024-04-16 17:45:13 发布
最新推荐文章于 2024-04-16 17:45:13 发布
阅读量346 收藏
点赞数
分类专栏： 大前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46037781/article/details/118360966
版权

position的四大值

  • position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中.
1、 absolute====绝对定位

当使用制作后台页面时！！！左边有侧栏导航时，容器container使用。居中时不会只在右侧布局中

2、fixed 固定定位元素,相对于浏览器窗口进行定位
3、relative 生成相对定位的元素，相对于其正常位置进行定位
4、static:默认值
5、inherit:规定应该从父元素继承 position 属性的值(static和inherit不是很常用)
Program W
关注
专栏目录
CSS 定位 position
houyanhua1的专栏
11-02 363
position: （配合着定位坐标来使用）定位坐标：left:10px 距左边， top距上边， right 距右边， bottom 距底边 static 静态，不定位 fixed  固定， 脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。不会随页面的滚动而移动。 relative 相对定位。（相对于自己原来的位置，霸道的相对，定位之后任然霸占着原来的位置） abso
【CSS 】tansform:translate结合position:absolute实现水平和垂直居中
weixin_41899098的博客
06-07 452
HTML <div class="wrapper"> <img src="./头像.jpg"/> <p>My text, size unknown</p> </div> CSS html, body {height: 100%;} /* necessary when using percentage heights withn body on non-absolutely
使用 position 属性进行左和右对齐
06-01 1598
 实例 .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } 亲自试一试 提示：如果宽度是 100%，则对齐没有效果。 注释：在 IE5 中，对于块元素存在一个外边距处理方面的 BUG。如需使上面的例子在 IE5 中有效，请添加一些额外的代码。亲自试一试。
container / pull-left
weixin_33713503的博客
07-26 147
<div class="container"> <h2>实例</h2> <div class="pull-left">元素浮动到左侧</div> <div class="pull-right">元素浮动到右侧</div&gt...
CSS position(定位)属性
weixin_30621919的博客
05-16 112
关于CSS position，来自MDN的描述： CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。 然后来看看什么是文档流(normal flow)，下面是www.w3.org 的描述： Normal flow Boxes in the normal flow belong to af...
CSS实现元素居中的三个常用方法
qq_63806300的博客
08-07 276
CSS实现元素居中，absolute+margin，flex，absolute+transform
CSS网页布局：div垂直居中的各种方法
12-10
在CSS布局中，垂直居中是一项常见的需求，但相比水平居中，它的实现方式更为多样且复杂。在本文中，我们将探讨如何通过不同的方法在网页布局中实现div元素的垂直居中。 首先，我们注意到CSS的`vertical-align`属性...
css label 居中布局_CSS页面布局总结
weixin_34480323的博客
12-31 510
display：设置元素的显示方式display：block(块级元素)默认为父元素宽高，可设置宽高相对前序换行显示，其后续也为换行显示默认display：block元素 --div, p, h1-h6, form...应用：水平居中margin:0 auto;display:inline默认宽度为内容宽度，不可设置宽高inline元素之间为同行显示，元素内部可换行默认display：inline...
CSS 将两个button按钮垂直+水平居中
01-20
在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种方法适用于知道元素宽度和高度的情况。 首先，我们需要创建...
CSS 常用属性总结
weixin_47906106的博客
11-25 3081
CSS简介 层叠样式表，设置样式规则，控制页面的外观样式 1为什么使用CSS 实现内容与样式的分离 样式复用,便于维护 页面的精准控制，让页面更精美 2.CSS作用 页面美观化 布局和定位 3.CSS语法 <head> <style> 选择器{ 属性名:属性值； 属性名:属性值； } </style> </head> 选择器，要修饰的对象 属性名，属性对象的哪个属性(样式) 属性值,样式的取值 4.CSS应用方式 CSS引用方式 有三种
Android Container 系列： 显示切换
omnispace的博客
05-02 616
Switch and Display between Containers Background SurfaceFlinger SurfaceFlinger inside has a series of layers,which correspond to the windows of applications SurfaceFlinger overlaps the windows according to the Z value of layers,calculates the blanking
position下 设置靠右
a1057962851的博客
11-25 2954
justify-content: flex-end;
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化
最新发布
柑橘乌云_
04-16 1298
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化，容器查询，@container 、container-name和container-type。
container的讲解
zayyo的博客
05-02 2973
container是和的简写属性，用来显式声明某个元素是一个查询容器，并且定义查询容器的类型（由指定）和查询容器的名称（由指定，使用反斜杠（）隔开。表示指向容器的类型，是水平方向的（对应宽度），还是包括垂直方向的（对应宽度和高度）。其中normal是默认值，表示不建立容器元素，size表示水平和垂直方向都建立，是只在水平方向建立，会给元素同时应用layout、style和inline-size容器状态。
position:absolute绝对定位能不能使之相对于容器右对齐？ 网摘
weixin_30301183的博客
02-02 655
如果要将绝对定位元素相对父元素定位，就必须设置父元素为相对定位，如：<style type="text/css"> .a{position:relative;background:green;} .b{position:absolute;right:0;top:0;background:red;}</style><div class="a">父元素，...
图解CSS布局（一）- Grid布局
小丞同学
05-10 9519
Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局
CSS中的各种居中
qq_60856466的博客
03-31 147
在CSS布局时经常会需要实现水平居中，垂直居中，水平垂直居中这样的要求但是却又不是非常的在意，所以总结一下。
CSS学习笔记
u011447403的专栏
03-10 101
CSS中常用的实现方式汇总
Flex布局
weixin_68485297的博客
04-12 1087
一、Flex布局 Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。 弹性盒子是由弹性容器和弹性子元素组成，弹性容器就是父元素，弹性子元素就是父元素里面的子元素。 1、任何一种元素都可以指定为flex布局 flex设定布局的方法和之前的方法不一样。它是给父元素设定属性，来确定子元素的布局模式。之前讲的布局，是通过设定元素自身来确定自己的布局模式。 语法： 块级元素：display：flex 行内元素：display：inline-flex
CSS布局技巧：全面解析水平与垂直居中方法
本文主要探讨了CSS布局中关于水平和垂直居中的多种方法，包括常见的margin、text-align、inline-block等技术，适用于不同场景和需求。 在CSS布局中，元素的居中对齐是一个常见的需求，无论是水平居中还是垂直居中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值