CSS 之margin知识点(必看)

站长资源 2024/11/24 佚名

13 1538 13

DDR爱好者之家 Design By 杰米

1.margin的百分比值普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的。

这里我们在图片外面设置一个宽高分别为800 * 600的容器。设置img{ margin: 10%; }

结果如下

　
结果margin值都是 800 * 10% = 80px; 所以这里都是相对于容器的宽度计算的容器的宽度计算容器的宽度计算。说三遍

2.绝对定位的百分比maigin值

相对于第一个定位的祖先元素的 width值计算的。就是 parent 的 width = 1000px. 所以 margin = 100px；

3.可以使用margin 实现 2 ： 1 的自适应

比如有两个容器

这里 box的高度没有指定。由于设置 margin 50% 。他的高度就是父容器的一半所以高宽比就是 1 ： 2；

4. margin 的重叠为什么重叠

A) margin 重叠的两个特性

只会发生在block的水平元素上。（不包括 float 和 absolute元素）

不考虑 wirte-mode(就是书写格式) 只发生在垂直方向(margin-top margin-bottom)

B) 发生的情况

1> 相邻的兄弟元素

2> 父级的第一个和最后一个子元素

3> 空的 block。

例子一相邻的兄弟元素

这里就是两个兄弟元素。

这里的两个p 之间只有一个em 没有两个em。因为第一个margin-bottom 和第二个的 margin-top 发生了重叠。

例子二父元素和最后一个子元素重叠

按照常规理论 son 和父元素的 father 之间会留出 80px的 margin-top值。但是实际上没有。son的背景元素没有变化没有留出80px；

这里只是给父元素设置了 80px;

父子 margin重叠的条件

那么怎么干掉margin-top 重叠呢？

只要不让它满足那些条件就可以了。

父元素添加 overflow: hidden; border-top padding-top （在他们之间加个空格）;

例子三空block元素的 margin 重叠。

注意 里面没有任何内容的空元素 。空元素发生margin重叠的条件

4 margin重叠的计算规则。

A) 正正取大值

B) 正负值相加

C) 负负取最负。

5. margin 重叠的意义

A) 连续段落或列表之类如果没有margin重叠收尾出现 1 ： 2 就会显得不协调

B) web 中任何地方嵌套或直接放div 都不会影响原来的布局

C) 遗落的空的任意多个p元素不要影响原来阅读的排版

实际应用

制作列表的时候控制每个列表的距离里面的

.list{

margin-top : 15px;

margin-bottom: 15px;

}

更具有健壮性即使最后一个移除了亦不会影响布局

以上这篇CSS 之margin知识点(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

CSS,margin

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“CSS 之margin知识点(必看)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

2024年11月24日

搜索

关键字搜索

热门推荐：