设置了position: absolute；还能设置margin 0 auto

最新推荐文章于 2024-03-14 12:33:50 发布

原创最新推荐文章于 2024-03-14 12:33:50 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用微信小程序实现特定视觉效果的方法。通过巧妙地利用view元素和CSS样式，可以创建出美观且响应式的界面。具体包括如何设置绝对定位、背景颜色及圆角等属性来构造层次分明的页面结构。

在这里插入图片描述
微信小程序实现这种效果：

<view class="topbg">
  <view class="topbg_top">
    
  </view>
  <view class="topbg_bottom">

  </view>
</view>

.topbg{width:100%;height:350rpx;text-align: center;}
.topbg_top{width:80%;height:300rpx;background-color:#fff;position: absolute;border-radius: 8rpx;left:10%;}
.topbg_bottom{width:100%;height:100rpx;background-color:rgb(41,125,96);}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小CX

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用绝对定位position:absolute；后，就不能使用margin: 0 auto；实现居中，为什么呢？如何解决？

王铁柱666的博客

04-06

520

的元素）进行定位，如果没有已定位的父元素，则会相对于初始包含块（通常是视口或页面本身）进行定位。在绝对定位元素上不起作用，因为绝对定位元素没有“自动”的边距空间可计算——它们的位置是固定的。如果你可以控制父元素的样式，并且希望多个子元素都居中，可以使用flexbox。属性将元素自身的中心点移动到该位置，从而实现水平和垂直居中。这四个属性来确定位置的，而不是像普通文档流中的元素那样根据。这种方法通过将元素的左上角移动到其父容器的中心，然后使用。如果元素的尺寸是已知的，你可以使用CSS变量和。

CSS之“绝对定位”的盒子使用margin:0px auto；不能实现水平居中的解决方案

鸭绒的博客

07-09

2758

在盒子实现水平居中的布局中，我们经常直接使用margin:0px auto;来实现居中，在很多时候的确可以一句这样的代码就实现了，但在绝对定位的盒子中，这是不起作用的。 1.根据代码测试是否真如上面所说： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.

参与评论您还未登录，请先登录后发表或查看评论

html的position边距怎么修改,CSS position 属性

weixin_35794835的博客

06-03

390

position: relative | absolute | static | fixedstatic :无特殊定位，对象遵循HTML定位默认规则absolute :绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行...

实操解决position:absolute之后margin:auto失效的问题

facial_123的博客

03-09

3091

实操解决绝对定位之后margin：auto失效的问题（亲测有效）前言最近在学习前端 HTML和 CSS的过程中，遇到了一个问题，那就是将一个div元素（内含文本）利用 position:absolute 属性设置为绝对定位之后，想再对整个元素进行依照设备的水平居中便很难了，也就是说属性及其值：margin:10px auto; 已经失效了，正如下面所示：一、问题重现可以看到，在下面的HTML代码中，我定义了一个div元素，并且里边包含了文本，如下所示： <!DOCTYPE html> &

绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

weixin_30851409的博客

10-13

308

声明： web小白的笔记，欢迎大神指点！联系QQ：1522025433. 我们都知道margin: 0 auto；可也实现块状元素的水平居中；但是对于绝对顶为的元素就会失效；请看实例： <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位...

前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项

热门推荐

Searchin_R的博客

10-12

2万+

在布局的过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。什么？使用绝对定位还要条件？？？当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。在讲这两个条件的之前，我们要先提一个概念——标准流。什么是标准流呢？标准流（normal flow），也被称为...

微信小程序页面布局

m0_74620049的博客

03-14

2084

采用Flex布局的元素的父元素称为Flex容器，而子元素则称为Flex项目。浮动（float）是CSS中的一个属性，它可以使元素向左或向右移动，其周围的元素也会重新排列。例如，当父元素仅包含浮动子元素时，父元素的高度可能会塌陷，因为其无法识别浮动元素的高度。元素的清除通常与浮动有关。通过调整外边距的大小，可以控制元素与其他元素之间的距离，从而调整页面的整体布局。常见的块元素有div、p、form、ul、li、ol、dl、dt、dd、address、fieldset、hr、menu、table等。

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

09-25

在IE6和IE7浏览器中，存在一个与CSS布局相关的特殊问题，特别是在处理绝对定位（position:absolute）元素和其相邻元素的margin时。这个问题是由于这些老版本的Internet Explorer对CSS标准实现的不完善导致的。本文将...

position: absolute;左右居中

04-01

要让子元素左右居中，可以设置 left 和 right 属性为 0，并且设置 margin 属性为 auto，如下所示： ``` .parent { position: relative; } .child { position: absolute; left: 0; right: 0; margin: auto; } `...

详解css粘性定位position：sticky问题采坑

12-14

1. **父元素不能设置`overflow: hidden`或`overflow: auto`**。因为`sticky`依赖于容器的滚动来触发其粘性效果，隐藏的溢出将阻止这一过程。 2. **必须指定`top`, `bottom`, `right`, `left`中的一个值**。否则，...

绝对定位元素的margin如何设置

lal_lal的博客

08-04

3634

1. 总体规则对于绝对定位元素若设置了top和left，则margin-top和margin-left有移动效果设置margin-bottom和margin-right会占据空间，但是无移动效果若设置了bottom和right，则margin-bottom和margin-right有移动效果设置margin-top和margin-left会占据空间，但是无移动效果设置margin时的参照物为，在定位结束后的位置 2. 关于position：absolute确定具体位置时的细节把to

css中position(absolute)与margin同时使用的情况

weixin_43939111的博客

02-02

1857

当元素绝对定位以后，它在父元素的位置是根据top/left/right/bottom来定位的，而margin是根据自身当前位置来定位的当它距离父元素left:50%,top:50%，那就是父元素一半的距离，因为要实现居中即自身的中点在父元素的中间才算，所以margin-left/margin-top 负的自身宽/高的一半，那么正好水平垂直居中。元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的，不像margin-left作用的时候margin-right没用，如果现在lef.

解决使用绝对定位absolute后，margin：0 auto居中方法失效

qq_40678503的博客

09-20

1万+

我们都知道，当给一个块级元素设置宽度后，使用margin:0 atuo可以实现水平上的居中。 margin:0 auto的理解是，上下边距为0，左右边距为auto（auto是自动调整大小）在浏览器中div如果没有设置宽度，那么宽度自动为浏览器的宽度，这是给div设置宽度后，div会靠左显示，margin:0 atuo就是为了填充右侧的空白空间。但是<img>当不设置宽度时，不会块级...

设置了position后为什么margin:auto没用

L2395183536的博客

12-28

2080

设置了position后为什么margin:auto没用原因：因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。所以margin这个时候不会骑作用滴，需要用left， right, bottom,top来进行精确定位了 ...

从Position：absolute到margin的合并

能不能开拖拉机

03-03

1008

转载请注明出处：http://blog.youkuaiyun.com/qq_31359337/article/details/60152277问题起因：在设置父元素Position：absolute之后发现了一些有趣的事情Html & Css<style type="text/css"> .a{ position:absolute; background-color: #cad5eb; } </

关于使用position:fixed之后附加margin/padding的一些影响细节

FuChenRenShen的博客

01-02

6035

① 未设置（left/right/top/bottom属性）方位 -> 该元素表现为包裹性（与内联元素的效果相似，目前来说margin和padding与内联元素中的margin/padding的表现是一样的） 1.能由包裹的span撑开 2.未设置方位时，margin无效，padding却是有效的,且其百分比是按照bo...

微信小程序tab栏切换高度自适应-代码模板（直接复制即可）

Ark方舟

10-10

1603

效果图 wxml文件代码：  <view class="mun"> <span class="{{munStyle[0]}}" bindtap="clickMun" data-num="1">全部酒席</span> <span class="{{munStyle[1]}}" bindtap="clickMun" data-num="2">待办酒席</span.

同时使用position和padding(或者margin)时出现的问题和解决方法

Rome_z的博客

05-04

2035

因为position: absolute;会使元素脱标，脱标之后父盒子的padding或者子盒子的margin会失效，这时会出现一些问题： <style> * { box-sizing: border-box; } .fa { width: 400px; height: 300px; background-color: skyblue; margin: 200px auto;

在有position: absolute;出现时margin:0 auto;是不起作用,如何居中？

Jesse

01-16

2298

需要设置两个属性 left:50%; margin-left: -100px; ( -100px 等于position: absolute 元素中的宽度的 1/2 )图形介绍：

position: absolute 居中设置