盒模型规定了元素框处理元素内容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>
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。