margin、padding、position的故事

CSS padding 实用案例解析
最新推荐文章于 2024-07-28 14:20:29 发布
最新推荐文章于 2024-07-28 14:20:29 发布
阅读量270 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39571197/article/details/93783841
本文通过四个实例详细解析了 CSS 中 padding 属性的正常与非正常使用场景，展示了 padding 在不同元素状态下的表现，帮助读者深入理解并正确应用 padding。

4个例子，margin同理

正常使用：

<body>
<div style="width:1200px;height: 400px;background-color: blue;">
    <div style="padding-top: 10%;">
        <p style="position: relative">
            默认使用情况：参照物为父元素(前提是父元素不为inline元素)
        </p>
    </div>
</div>
</body>

非正常使用： 

<body>
<div style="width:1200px;height: 400px;background-color: blue;">
    <div style="width:800px;height: 400px;background-color: red;display: inline;">
        <div style="padding-top: 10%;">
        </div>
    </div>
</div>
</body>

<body>
<div style="width:1200px;height: 400px;background-color: blue;">
    <div style="width:800px;height: 400px;background-color: red;">
        <div style="position: absolute;top:0;right: 0;bottom: 0;left: 0;padding-top: 10%;">
        </div>
    </div>
</div>
</body>

 

<body style="width: 1500px;position: absolute;">
<div style="width:1200px;height: 400px;background-color: blue;position: absolute;">
    <div style="width:800px;height: 400px;background-color: red;">
        <div style="position: absolute;top:0;right: 0;bottom: 0;left: 0;padding-top: 10%;">
        </div>
    </div>
</div>
</body>

 

css重点17：background-position和清除默认的margin和padding
小黄呀呀呀的博客
09-03 473
1、background-position 分两种情况: 重复【是整体位置的变化】 background:url('images/mess.png') repeat left center; 不重复【就是这个背景图在这个盒子里的位置】 background:url('images/mess.png') no-repeat left center; 2、清除默认的margin和padding【每次写的时候都要先把这个写出来！！】 *{ margin:0; padding:0; } ...
-百分比设置margin和padding,line-height,height
rocktanga的博客
02-14 1094
用百分数设置margin和padding 用百分数设置margin和paddding的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算,如 .demo1{ width:980px;height:500px; } .demo1 div{margin:10% 5%; } // 相当于margin:98 49; 为什么都是以宽度为标准 1、高度持续增加 第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器.
margin、padding和position
miaosanpi的博客
08-17 252
margin <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>marjin</title> </head> <style> *{ margin: 0px; padding: 0px; } </style> <body> <!--<p>河南工业大学</p&
前端-2-样式布局（margin、padding、position）
qq_38328762的博客
08-15 649
ps:因为涉及布局的标签，调整布局一直很迷（不是说难，就是有些时候影响因素太多，不一定哪里就影响到了，这里简单先总结一下涉及到布局的css样式属性） style=“text-align:center” 使里面内容居中 margin:auto padding:30px 内边距 ...
position、margin、padding样式属性，hover伪类
z2366232723的博客
12-05 396
1.position样式属性 首先介绍一下文档流，文档流有称为正常流，是默认情况下元素会自上而下，从左到右排放的一种顺序。position属性是用于定义元素排版布局的一种定义类型。任何标记样式都有position属性。position属性具有下列值： static ：默认值，没有定位，元素出现在正常流中 fixed：会使当前标记脱离文档流,相对于浏览器窗口固定 relative：不会使当前标记脱离文档流,相对于原来位置定位 absolute：会使当前标记脱离文档流，相对于最近的且position为
margin，padding，position固定的值都是轻松的应用百分比呢？
github_36629330的博客
11-27 389
实验证明margin,padding的百分比竟然是相对与父元素的宽度来进行计算，同时position中相对于父级定位就是 相对于 父级的百分比，否者都是相对于浏览器的定位.
前端布局Padding、Border、Margin、Position关系
weixin_43243652的博客
07-28 563
属性设置内容的宽度和高度（注意，对于块级元素，分别设置上、右、下、左四个方向的内边距。分别设置上、右、下、左四个方向的外边距。意味着1像素宽、实线样式、黑色的边框。意味着上下左右都是10像素的内边距。边框是紧接内边距并围绕在内容周围的线。这是元素本身的文本、图片或其他内容。一次性设置四个方向的内边距，例如。Padding（内边距，绿色区域）内边距是内容区域与边框之间的空间。分别设置边框的宽度、样式和颜色。外边距是边框与其他元素之间的空间。Margin（外边距，橙色区域）一次性设置四个方向的外边距。
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
本文探讨了在使用CSS定位属性position: fixed的同时，给同级元素添加margin-top所产生的布局问题，并提供了一些解决方案。 在HTML文档结构中，通常将元素分为头部（header）、内容区（content）、侧边栏（aside）和...
前端面试题：当margin-top、padding-top 的值是百分比时,分别是如何计算的?
sdasadasds的博客
07-28 804
我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...
关于table的width:100%和margin导致溢出
09-25
在CSS的盒模型中，元素的总宽度等于`width + padding + border + margin`。浏览器默认采用的标准盒模型（W3C Box Model）就是这样计算的，但可以通过`box-sizing`属性来改变这一行为，使其使用IE盒模型（IE Box ...
Position定位详细总结
qq_52732369的博客
12-23 2070
Position定位详细总结
margin、position及padding的理解
DelphiXxy的博客
05-06 2647
盒子模型中的主要三个概念： - margin:主要是指该元素与相邻元素之间的距离 - padding：主要是指元素内容与块级元素设置边框之间的距离，这里不包含边框的宽度 - position：主要分relative/absolute，根据父级元素设置相应的位置这里有个width和height属性的设置问题，这两个属性设置的是该元素原始的宽高，就是去除其他属性设置的值（例如：padding
同时使用position和padding(或者margin)时出现的问题和解决方法
Rome_z的博客
05-04 1988
因为position: absolute;会使元素脱标，脱标之后父盒子的padding或者子盒子的margin会失效，这时会出现一些问题： <style> * { box-sizing: border-box; } .fa { width: 400px; height: 300px; background-color: skyblue; margin: 200px auto;
position,display,float,overflow,margin,padding之间的相互影响
小红帽的博客
06-05 1583
1、元素分为块级元素和行内元素， 块级元素可以设置宽高，会自动换行，并且会发生相邻margin的合并问题。行内元素设置宽和高无效，以水平方向排列，（行内元素，绝对定位，浮动元素不会发生外边距合并）并且垂直方向的margin和padding都是无效的。 2、display display可以取值为none，inline，inline-block，block，inherit以及table相关的属
绝对定位、相对定位 position padding内边距、margin外边距
weixin_36927767的博客
02-09 3422
值 描述 absolute 绝对定位，相对于static定位以外的最近的一个祖先元素。 left、top、right、bottom relative 相对定位，相对于自己的正常位置 fixed 绝对定位，相对于浏览器窗口。 left、top、right、bottom static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, rig...
关于使用position:fixed之后附加margin/padding的一些影响细节
FuChenRenShen的博客
01-02 5986
① 未设置（left/right/top/bottom属性）方位   -&gt;    该元素表现为包裹性（与内联元素的效果相似，目前来说margin和padding与内联元素中的margin/padding的表现是一样的）               1.能由包裹的span撑开               2.未设置方位时，margin无效，padding却是有效的,且其百分比是按照bo...
margin和padding理解
weixin_34355559的博客
08-30 872
W3C组织建议把所有网页上的对像都放 在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。 盒模型主要定义四个区域：内容 (content)、边框距(padding)即内边距、边界(border)和外边距(margin)。 对于初学者，经常会搞不清楚margin，background-color，background- image，p...
sanlyShi的前端之路三：css中position，margin、padding细节理解
sanlyshi's front-end road
08-17 402
position: 1.absolute：生产绝对定位的元素，相对于第一个有明确的定位的元素进行定位； （比如，如果父元素没有确定的position定位，那么就去找父元素的父元素，一直找到有明确定位的元素为止，body属于最高级明确定位） ；  可以使用top，bottom，left，right； 脱离文档流，原位置由后面的元素填充 2.relative：相对于正常位置（直接父元素）
margin和padding的%使用
最新发布
03-28
<think>嗯，用户问的是CSS中margin和padding使用百分比时的规则。这个问题看起来不复杂，但里面可能有些细节需要注意。首先，我得确认百分比到底是相对于哪个元素的哪个属性计算的。 记得标准里说过，margin和padding的百分比值都是相对于包含块的宽度来计算，无论是上下还是左右边距。比如，如果一个元素的包含块宽度是1000px，那么margin-top: 10%就是100px，不管是垂直还是水平方向都是这样。那为什么会有这样的设计呢？可能是因为在流动布局中，宽度通常是自适应的，而高度可能不确定，所以统一用宽度作为基准，保持一致性。 不过，用户可能会遇到一些特殊情况，比如绝对定位元素的情况。绝对定位元素的包含块可能是最近的定位祖先，这时候百分比的计算就会基于那个祖先的宽度。但如果是固定定位，可能相对于视口的宽度。这些情况需要分清楚。 然后，有没有例外情况呢？比如，在Flex或Grid布局中，这个规则是否适用？根据我的记忆，即使是在Flex或Grid容器里，margin和padding的百分比依然是根据包含块的宽度来计算，但可能需要考虑主轴方向的影响。不过，这可能需要进一步验证。 接下来，用户可能会想知道如何应用这些规则，比如实现宽高比固定的盒子。比如，设置padding-top为50%可以创建一个宽高比为2:1的容器。这时候内部内容需要用绝对定位来填充，避免内容溢出。这个方法在响应式设计中挺常见的，特别是处理图片或视频的比例。 还有，用户可能遇到父元素宽度变化时，边距和填充如何自适应。比如，父容器宽度是屏幕的百分比，子元素的margin和padding会随着父宽度的变化自动调整，这在响应式布局中非常有用。 需要注意的陷阱有哪些？比如，父元素没有明确宽度时，百分比计算可能会失效。例如，父元素是块级元素但宽度由内容决定，这时候子元素的百分比边距可能不如预期。或者，当包含块的宽度为0时，百分比值也会是0，导致布局问题。 此外，用户可能想知道如何调试这些问题。比如使用浏览器的开发者工具检查元素的计算样式，确认包含块的宽度是否符合预期，或者边距和填充的计算值是否正确。 最后，应该提醒用户不同浏览器是否有一致的行为。大多数现代浏览器应该遵循标准，但旧版本可能存在差异，不过现在这种情况可能较少见了。如果用户遇到不一致的情况，可能需要检查文档类型或CSS重置是否应用正确。 总结一下，回答需要涵盖百分比计算的基准，应用实例，注意事项，以及常见问题解决方法。同时，引用相关的CSS规范，比如CSS盒模型模块中的定义，来增强答案的权威性。</think>### CSS中margin和padding的百分比使用规则 #### 1. 百分比基准 - **margin**和**padding**的百分比值均相对于**包含块（containing block）的宽度**计算，包括垂直方向（如`margin-top`、`padding-bottom`）[^1]。 - 例如，若父元素宽度为`1000px`，子元素设置`margin-top: 10%`时，实际值为`1000px × 10% = 100px`。 #### 2. 规则细节 - **水平方向**：直接按父元素宽度计算，如`margin-left: 5%`即父宽度的5%。 - **垂直方向**：同样基于父元素宽度而非高度，例如`padding-bottom: 20%`等于父宽度的20%。 - **绝对定位元素**：若包含块为定位祖先，则基于该祖先的宽度计算。 #### 3. 应用场景 - **响应式宽高比**：通过`padding-top`实现固定比例容器： ```css .container { width: 100%; padding-top: 50%; /* 宽高比2:1 */ position: relative; } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` - **自适应间距**：父元素宽度变化时，边距自动按比例调整。 #### 4. 注意事项 - **父元素无明确宽度**：若父元素宽度由内容决定（如`display: inline-block`），百分比计算可能失效。 - **高度依赖性场景**：需通过JavaScript动态计算高度相关百分比。 #### 5. 调试技巧 - 使用浏览器开发者工具查看`Computed`标签，验证百分比计算后的实际像素值。 - 检查包含块是否被意外修改（如父元素`overflow`或`position`属性影响）。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值