父级有padding，子div设置margin，起始位置参照谁的问题

最新推荐文章于 2024-07-10 14:12:35 发布
最新推荐文章于 2024-07-10 14:12:35 发布
阅读量251 收藏
点赞数
分类专栏： html和css 文章标签： div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cutemurphy/article/details/6712050
版权

（1）

做了个实验:

<div id="f">

    <div id="s"></div>

</div>

结果是，s的margin-left值是相对于padding后的位置，而不是f的边框。如果不是这样,padding还有什么意思，所有都要从最开始处重新计算的话。

（2）

cutemurphy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html无序列表位置改变,如何设置子无序列表的位置？
weixin_39946327的博客
06-05 961
我有一个导航栏与儿童无序列表嵌套在主导航栏项下。我的问题是在内部列表中，当我绝对定位，内部列表居中到页面，并且当我定位相对时，它与父列表内联定位。如何设置子无序列表的位置？我想让第一个子项直接排列在它的父项下。/* OUTER LIST STYLING */div#navbar2 {position:relative;width: 100%;border-top: solid #000 1px;b...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 8688
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
父级使用padding后子元素绝对定位的BUG(转)
最初的梦想
10-04 976
以前遇到过，今天又无意中看到了别人总结的，害怕遗忘，还是记下来：～～～   在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。 在父层使用position:relative;和padding（当然0值...
父元素设置了padding，子元素如何忽略掉这个padding
weixin_43821171的博客
08-18 6799
背景： 现如今在进行前端开发时，为了能够快速的构建项目，我们往往会使用到现存市面上封装好的一些ui组件库，比如vue的element组件库，react的ant-design，但在使用这些组件库时，往往会出现比较让我们头疼的情况，那就是有的组件封装有中间层，不对外暴露，这让我们很难设置这个中间元素的样式。今天在项目开发时我就遇到了这个问题，使用的一个组件对外暴露的两层中还插入了一个div，而这个div设置了padding的值，正常来说，我是无论如何都改变不了这个父元素的padding的值，但这就与我的设计图不
html元素水平垂直居中父级,CSS子元素在父元素中水平垂直居中的几种方法
weixin_32306885的博客
06-16 418
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。#div1{width: 300px;height: 300px;border: 1px solid red;}#div1 p {width: 100px;height: 100px;background-color: green;/*float: left; ...
CSS3 transform-origin属性设置元素旋转起始位置
weixin_44167504的博客
09-05 3326
CSS3 transform-origin属性 作用：设置元素旋转的基点位置。注：元素旋转前后基点位置不变。 使用：transform-origin：x-axis y-axis z-axis; x-axis取值：left、right、center、length、% y-axis取值：top、bottom、center、length、% z-axis取值：length transform-origin：center center；（默认位置，以元素中心点为基点，相当于50% 50%） tran
html的div位置
热门推荐
chpllp的博客
11-07 1万+
原文：https://blog.csdn.net/afeichuanqi/article/details/53991951  position：一般用absolute和relative，分别是绝对定位和相对定位，以原点的距离为单位； margin：有margin-top,margin-bottom,margin-left,margin-right 调节外边距； Padding：有Paddin...
HTML设置页面动画效果有几种,前端制作动画的几种方式（css3，js）
weixin_30092051的博客
06-04 1841
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。1.css的transition。语法：transition: property duration timing-function delay;property:填写需要变化的css属性如：width,line-...
offsetTop的计算判断，父级与自身修改position时原点的位置判断及pandding造成的影响
最新发布
lk2913128603的博客
07-10 375
offsetTop的计算判断，父级与自身修改position时原点的位置判断及pandding造成的影响
javascript之鼠标拖动位置互换效果代码
10-30
javascript之鼠标拖动位置互换效果代码 在本文中，我们将探讨javascript之鼠标拖动位置互换效果代码的实现方法，包括HTML、CSS和JavaScript三方面的内容。 一、HTML结构 在HTML结构中，我们使用div元素来创建容器...
jquery实现页面常用的返回顶部效果
11-23
在网页设计中，返回顶部的功能是一项实用且常见的交互设计，它可以帮助用户快速回到页面的起始位置。在本文中，我们将探讨如何使用jQuery库来实现这个功能。jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM...
CSS高级教程
10-09
正确设置编码能确保网页上的文本正确显示，避免乱码问题。 3. **HTML标签 (HTML Tags)**：HTML标签用于构建网页结构，如 `<head>`, `<body>`, `<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `...
CSS去除列表默认边距的简单方法
09-25
需要注意的是，在某些旧版浏览器（例如Firefox）中，即使已经将UL的内边距（padding）设置为0，UL元素仍然会有一个默认的外边距（margin）。为了消除这个外边距，我们还需要额外设置UL的左边距（margin-left）为0，...
利用transform实现一个纯CSS弹出菜单的示例代码
11-19
`来指定过渡动画的起始位置。 6. **鼠标悬停效果**：当鼠标悬停在`li`元素上时，`:hover`伪类将触发`div`的`transform`和`opacity`变化，使子菜单向上传动并变为可见。 完整的CSS代码如下： ```css * { padding:...
ul的默认边距问题/body默认边距的问题
08-23 959
（1） FF下，ul的有默认的内左边距，padding-left:40px（留给列表符号的位置），还有默认的margin-top:16px，所以能去掉最好去掉。 （2） 而ie下，ul没有默认的内边距，只有默认的margin，而且上下左右都有，上下是15px，左右是10px
内外嵌套div的边距重叠（加border或者随意padding就能解决）
09-13 781
以前关于上下margin的重叠，不叠加取其中较大的一个，主要是并列的，并没有包含嵌套关系。 现在外层div和内层div都设有margin的时候，也会出现叠加取较大一个的现象。 # box { margin:20px;background-color:red; } p { m
上层div进行float，下层div的margin-top问题（全部浮动来解决）
08-23 507
经过测试： （1）IE，比较正常，margin-top多少，就表现出多少距离。 （2）FF下，浮动的元素就好象不存在一样，所以底下的margin-top参照位置是参照浮动元素的上一层或者body。 （3）所以是两个div，其中只有一个浮动，然后它们并列在一起的时候，这个时候
两个div进行float后的margin设置
09-13 364
我们都是好孩子   你们都是好孩子   当id=f的div设置float的时候，如果id=s不设置float，则要设置id=s的div的margin-left的时候，就必须至少大于id="f"的width才有效果。 而如果id=s同时设置float的时候，这个时候ma
position: fixed之后怎么让div居中
09-08
通过`left: 50%`和`top: 50%`将`div`的起始位置定位在屏幕的中心点，然后使用`transform: translate(-50%, -50%)`将`div`自身向左上方移动自身宽度和高度的一半，实现居中效果。 方法二：使用flexbox布局。 ```css...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值