盒模型大小取决于它的padding，margin，border数值
盒模型规定了元素框处理元素内容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>
盒模型大小取决于它的padding，margin，border数值的更多相关文章
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）
一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与 Margin 的宽度,四个加起来才是 di ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- CSS padding margin border属性详解【转载】
本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...
- 转-CSS padding margin border属性详解
原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...
- padding margin border 和元素大小
元素占用宽度 = 元素宽度+padding+border+margin 注意margin只是隔开元素,不会使得元素变大,而padding会使得元素变大,也就是说 元素真实宽度=元素宽度+padding ...
- 外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法
原因分析: chorme和firefox浏览器下当缩放窗口大小时,边框的计算宽度变大造成内部div宽度的计算宽度变大,外部div放不下内部div而溢出. 解决办法: 给内部div设置 box-sizi ...
随机推荐
- Windows10系统配置telnet服务的方法
通常情况下,Windows10正式版系统的telnet服务都是处于关闭状态的,需要我们手动开启才可以.telnet服务可以调试端口,其重要性不容小视.今天,系统城小编就教大家如何配置telnet服务. ...
- 安装Eclipse activity插件 报异常 Cannot complete the install because one or more required items could not be
下载插件:Activiti Designer 5.17 2)安装过程中错误处理 a.错误: Cannot complete the install because one or more requir ...
- Paper慢慢读 - AB实验人群定向 Double Machine Learning
Hetergeneous Treatment Effect旨在量化实验对不同人群的差异影响,进而通过人群定向/数值策略的方式进行差异化实验,或者对实验进行调整.Double Machine Learn ...
- 那些 JavaScript 自带的奇妙 Bug
米娜桑,哦哈哟~ 本章讲解关于 JavaScript 奇妙的 Bug,与其说是Bug,不如说是语言本身隐藏的奥秘.接下来就看看可能会影响到我们编程的那些Bug吧. typeof null === &q ...
- Docker应用部署实录（包含完善Docker安装步骤）
Docker应用部署实录(包含完善Docker安装步骤) 前言 首先说一下这篇文章的来源.我之前接手的一个IOT项目,需要安装多个中控服务器.中控服务器需要安装RabbitMQ,Mysql,多个服务, ...
- Ceph 存储集群5-数据归置
一.数据归置概览 Ceph 通过 RADOS 集群动态地存储.复制和重新均衡数据对象.很多不同用户因不同目的把对象存储在不同的存储池里,而它们都坐落于无数的 OSD 之上,所以 Ceph 的运营需要些 ...
- tmobst2
(单选题)与下面代码效果相同的HQL 语句是( ). Criteria criteria = session.createCriteria(User.class); criteria.add(Rest ...
- C语言笔记--传递结构指针以及值传递，址传递
#include <stdio.h> #include <windows.h> #include <mmsystem.h> #include <string. ...
- Java数据结构系列（1）——自平衡二叉树
1.基本概念 所谓自平衡二叉树,就是当我们插入或删除元素之后,二叉树的高度会自动调整到最小,这样我们就可以在对数时间内查找二叉树内的元素. 2.定义 TreeSet<Elemtype> s ...
- WeChall_Enlightment (Encoding)
解题: 刚开始一看这题就蒙逼了,完全没思路,过了几天后再仔细去想想,应该是二进制的ascii码,但是原来的三张图虽然都是8的倍数,但完全转换不成有用的东西,题目的意思能否找到光,百度了一下关于三原色的 ...