下载文档原格式
什么是盒模型？
什么是盒⼦模型？
⼤家好，今天我来给⼤家分享⼀下关于盒模型的知识。
盒⼦模型由通俗的来说就是：
宽=左右外间距+左右边框+左右内间距
⾼=上下外间距+上下边框+上下内间距
盒⼦模型有哪些属性？
margin外边距，可以是正值也可以是负值。
margin-top上外边距
margin-bottom下外边距
margin-left左外边距
margin-right右外边距
padding内边距，只可以是正值，不能有负值。
padding-top上内边距
padding-bottom下内边距
padding-left左内边距
padding-right右内边距
border边框，
border标签的写法：border：1px（边框尺⼨）dashed（虚线，solid实线）#ffffff（颜⾊值）
上⾯三部分的内容加上内容区就⼀起构成了我们所说css中的盒⼦模型。
实例
width和height就是我给这个盒⼦设置的宽和⾼。
padding：30px 30px；第⼀个30px指的是将这个盒⼦的上下内边距为50个像素⼤⼩
第⼆个30px指的是将这个盒⼦的左右内边距为30个像素的⼤⼩，因为padding会将整个盒⼦的⼤⼩拉⼤，所以要想盒⼦为原来的100*100⼤⼩就要将宽度减去padding的值。
border：3px solid #FF0000；指的是给盒⼦添加⼀个3尺⼨粗细，颜⾊为#FF0000的实线，solid换为dashed实线就会变成虚线效果margin：50px auto指的是将盒⼦的外边距设置为上下距离⽗元素50px，左右为居中状态。
这就是⼀个简单的盒⼦模型了。
CSS之盒模型1.与盒模型相关的元素Width 内容的宽度Height 内容的高度Margin 外边距；margin: 上下左右; margin: 上右下左；Padding 内边距；padding 上下左右;padding: 上右下左；例子：<div id="one"><div id="two"></div></div><style type="text/css">#one{width: 300px;height: 300px;border: 1px solid red;}#two{width: 100px;height: 100px;border:solid 1px #ccc;padding: 10px 20px;margin:10px}</style>#two div的盒模型如下图：需要注意的是：a)设置padding内边距会增大盒子(不知道你以前注意没有)：【IE6及以下版本不会，下面会详细介绍】观察：此时的盒子的大小是141*121的。
比如我们设计盒子大小200*200，然后设置了一个padding:5px;此时的盒子大小就变成205*205。
如果预留空间就是200*200可能就出问题了。
所以对于200*200的空间，盒子有可能这么设计：195*195，padding5px。
b)Margin很正常就是外边距，相信你也能理解。
2.盒模型很简单，但是也有需要注意的地方，下面介绍IE6以及更低版本的IE的盒模型以下问题可能在混杂模式（没听过，不要紧，你只要知道IE6的盒子模型有可能这样，以后遇到这种情况，知道怎么回事就行。
）下出现：Width = 内容width + 内边距+ 边框3.外边距的叠加问题，你可能会遇到盒子出现的效果与预期不一样的情况，有可能就是这个问题，仔细看看。
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程： 1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box 2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置 3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。
属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。
2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。
但是两个元素的外边距会重叠。
4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。
CSS盒子模型的计算知识点CSS盒子模型是网页设计中非常重要的概念之一，它决定了元素在页面中所占据的空间以及排列方式。
了解盒子模型的计算知识点对于正确布局和设计网页至关重要。
下面将介绍CSS盒子模型的计算知识点。
1. 盒子模型的基本概念CSS盒子模型由四个部分组成：内容(content)、填充(padding)、边框(border)和边距(margin)。
内容部分是实际显示的元素内容，填充是内容与边框之间的空白区域，边框是围绕内容和填充的线条，边距是盒子与其他元素之间的距离。
2. 盒子模型的计算方式盒子模型的计算包括内部和外部尺寸的计算。
内部尺寸是指元素的内容区域的宽度和高度，外部尺寸是指元素的总宽度和总高度（包括内容、填充、边框及边距）。
以下是计算盒子模型尺寸的几个重要知识点：2.1 内部尺寸的计算- 内部宽度 = 元素内容的宽度 + 左填充 + 右填充- 内部高度 = 元素内容的高度 + 上填充 + 下填充2.2 外部尺寸的计算- 外部宽度 = 内部宽度 + 左边框 + 右边框 + 左边距 + 右边距- 外部高度 = 内部高度 + 上边框 + 下边框 + 上边距 + 下边距3. 盒子模型的重要属性为了对盒子模型进行精确的控制和定位，CSS提供了一些重要的属性。
下面列出几个常用的盒子模型属性：3.1 width和height属性- width属性用于设置元素的宽度- height属性用于设置元素的高度3.2 padding属性- padding属性用于设置元素的填充空白区域，可以分别设置上、右、下、左四个方向的填充3.3 border属性- border属性用于设置元素的边框样式、宽度和颜色，可以分别设置上、右、下、左四个方向的边框3.4 margin属性- margin属性用于设置元素与其他元素的边距，可以分别设置上、右、下、左四个方向的边距4. 盒子模型的计算实例为了更好地理解CSS盒子模型的计算，下面给出一个实例：```html<!DOCTYPE html><html><head><style>.box {width: 200px;height: 100px;padding: 20px;border: 1px solid black;margin: 10px;background-color: lightgray;}</style></head><body><div class="box">Hello, CSS Box Model!</div> </body></html>```在上面的例子中，元素的内部宽度和高度分别为：160px和60px （200px - 2 * 20px），外部宽度和高度分别为：232px和122px（内部尺寸 + 2 * 边框 + 2 * 边距）。
CSS盒模型详解盒⼦模型前⾔盒⼦模型，英⽂即box model。
⽆论是div、span、还是a都是盒⼦。
但是，图⽚、表单元素⼀律看作是⽂本，它们并不是盒⼦。
这个很好理解，⽐如说，⼀张图⽚⾥并不能放东西，它⾃⼰就是⾃⼰的内容。
盒⼦中的区域⼀个盒⼦中主要的属性就5个：width、height、padding、border、margin。
如下：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。
padding：内边距。
border：边框。
margin：外边距。
盒⼦模型的⽰意图：代码演⽰：上⾯这个盒⼦，width:200px; height:200px; 但是真实占有的宽⾼是302*302。
这是因为还要加上padding、border。
注意：宽度和真实占有宽度，不是⼀个概念！来看下⾯这例⼦。
标准盒模型和IE盒模型我们⽬前所学习的知识中，以标准盒⼦模型为准。
标准盒⼦模型：IE盒⼦模型：上图显⽰：在 CSS 盒⼦模型 (Box Model) 规定了元素处理元素的⼏种⽅式：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。
padding：内边距。
border：边框。
margin：外边距。
CSS盒模型和IE盒模型的区别：在标准盒⼦模型中，width 和 height 指的是内容区域的宽度和⾼度。
增加内边距、边框和外边距不会影响内容区域的尺⼨，但是会增加元素框的总尺⼨。
IE盒⼦模型中，width 和 height 指的是内容区域+border+padding的宽度和⾼度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你会⼀点Android，应该⽐较好理解吧。
区别在于，Android中没有border这个东西，⽽且在Android中，margin并不是控件的⼀部分，我觉得这样做更合理⼀些，呵呵。
<body>标签也有margin<body>标签有必要强调⼀下。
