盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容区域的宽度+2(内边距+外边距+边框),也就是该示例中的元素宽度为170px,需要注意的是在 css 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。(浏览器查看的时候记得打开控制台F12,点击对应的元素查看)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒模型大小取决于它的padding,margin,border数值</title> <style type="text/css"> div{ padding: 10px;/*内边距*/ margin: 20px;/*外边距*/ margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/ margin: 10px 20px;/*上下 左右*/ margin: 10px 20px ;/*上 上下不一样,左右一样*/ margin: 10px 20px 30px;/*外边距*/ border: 5px solid red;/*边框*/ width: 100px;/*内容区域宽度100*/ height: 100px;/*内容区域高度100*/ } /*盒子大小值=2(内边距+边框+外边距)*//*该div大小*/ </style> </head> <body> <div>看再多的书是学不全脚本的,要多实践。</div> </body> </html>
不论是margin还是padding,它们都是按照顺时针排列的,上右下左定义数值的;比方说这个margin:10px 10px 10px 10px是讲这个盒子上下左右都增加了10px的外边距,简写margin:10px;marigin:10px 10px;上下 左右外边距10px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin所谓bug居然是重叠,咋解决</title> <style type="text/css"> .box1,.box2{ width: 200px; height: 200px; margin: 10px 20px; background-color: red; } </style> </head> <body> <div class="box1">功能说明书里不存在可操作性</div> <div class="box2">软件在能够复用前必须先能用。</div> </body> </html>
按照正常思维来讲,上面的代码里面的2个盒子的上下间距应该是20px缝隙,但是实际我们在控制台查看的时候确只有10px,另外10px显然被重叠了,如果我们调整2个盒子的margin值大小,会发现上下间距取最大值20px(margin平级元素取最大值 );解决办法:1.float2改变元素结构display:inline-block此外如果margin嵌套关系,也就是父子关系的时候你会发现他们是重合的,没有缝隙,那么如何解决margin带来的这些问题了,解决办法:盒子是没有盖子的,想办法给2端填充内容,可以使用border、padding、overflow:hidden;盒子模型对于我们后面的网站布局很重要,利于网站的精确定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>解决margin产生的bug方法</title> <style type="text/css"> /* .box1,.box2{ width: 200px; height: 200px; background-color: red; } */ /* .box1{ margin: 10px 20px; } .box2{ margin: 20px 10px; } .box3{ margin: 20px 10px; } .box4{ margin: 10px 20px; } */ /* 盒子模型平级带来的问题解决办法:1.float 2.display:inline-block 3.直接写一个最大值,平级取最大值的margin*/ div{ /* float: left; */ display: inline-block; width: 1200px; } .box1{ margin: 10px 20px; } .box2{ margin: 80px 10px; } /* 盒子模型平级嵌套带来的问题解决办法:盒子是没有盖子的,想办法给2端填充内容,可以使用border、padding、overflow:hidden;上下填充文字*/ p{ width: 800px; } .box3,.box4{ margin: 30px; } .box3{ background-color: green; /* border:1px solid red*//*给父元素加border*/ padding: 10px; /*给父元素加padding*/ /*overflow: hidden;*//*添加overflow:hidden 超出部分隐藏,带来效果是所有超出全部裁剪掉*/ } .box4{ display: block; background-color: greenyellow; } </style> </head> <body> <div class="box1">功能说明书里不存在可操作性</div> <div class="box2">软件在能够复用前必须先能用。</div> <p class="box3"> <!-- 简单不先于复杂,而是在复杂之后。 --> <span class="box4">过去的代码都是未经测试的代码。</span> <!-- 要么做第一个,要么做最好的一个 --> </p> </body> </html>
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】