时间:2021-05-08
盒模型规定了元素框处理元素内容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; margin: 10px 20px; margin: 10px 20px ; margin: 10px 20px 30px; border: 5px solid red; width: 100px; height: 100px; } </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"> div{ display: inline-block; width: 1200px; } .box1{ margin: 10px 20px; } .box2{ margin: 80px 10px; } p{ width: 800px; } .box3,.box4{ margin: 30px; } .box3{ background-color: green; padding: 10px; } .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>到此这篇关于详解盒模型大小取决于它的padding,margin,border数值的文章就介绍到这了,更多相关padding,margin,border数值内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.盒模型是有两种标准的,一个是标准模型,一个是IE模型。从上面两图不
盒模型由以下CSS属性组成:0.内容(content)1.padding内边距2.border边框3.margin外边距下面有一个最常见的例子,虚线不属于盒模型
盒模型主要定义四个区域:内容(content)、内边框距(padding)、边框(border)和外边距(margin)。自从1996年CSS1的推出,W3C组
从上图可以看到标准W3C盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。从上图可以看到IE盒
【this详解】1、谁最终调用函数,this指向谁。①this指向的,永远只可能是对象!!!!!!②this指向谁,永远不取决于this写在哪!!而是取决于函数