第03部分-CSS盒子模型与定位(2)
什么是盒模型？
什么是盒模型？
什么是盒⼦模型？
⼤家好，今天我来给⼤家分享⼀下关于盒模型的知识。
盒⼦模型由通俗的来说就是：
宽=左右外间距+左右边框+左右内间距
⾼=上下外间距+上下边框+上下内间距
盒⼦模型有哪些属性？
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教程之盒模型
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.外边距的叠加问题，你可能会遇到盒子出现的效果与预期不一样的情况，有可能就是这个问题，仔细看看。
CSS盒模型讲解
五、边界（margin）
1. 边界
margin 区域在边框之内。
margin 区域不应用背景。
margin-top
margin-right
margin-left
margin-bottom
2. 设置边界的大小
可以单独设置上、右、下、左边界的大小。
margin-top: 2px; margin-right: 4px; margin-bottom: 6px; margin-left: 8px;
4. 父子垂直边界重叠
父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的 边界上。
#son { margin-top: 30px; }
content
4. 父子垂直边界重叠
父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的 边界上。
#son { margin-top: 30px; }
5. 几种溢出方式的比较
overflow: visible;
overflow: auto;
CSS 盒模型
盒模型概述
盒的尺寸
主 要 内 容
边框（border）
填充（padding）
边界（margin）
盒的高度与文本溢出
盒模型概述
1. 盒模型的概念
CSS 将所有的网页元素都看做是一个矩形框，这个框由元
素的内容、填充（padding）、边框（border）和边界 （margin）组成。
属性介绍
内容(content)就是盒子里装的东西.
填充(padding)就是怕盒子里装的东西（贵重的）损坏而添加 的泡沫或者其它抗震的辅料. 边界(margin)则说明盒子摆放的时候的不能全部堆在一起， 要留一定空隙保持通风，同时也为了方便取出.
（二）css盒子模型
属性作⽤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盒子模型
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽 度＋右填充＋右边框＋右边界
IE quirk模式下盒子的宽度
当将文档声明DOCTYPE删除后，IE 6对网页的解释 会进入quirk（怪异）模式，此时盒子的宽度等于左 边界＋宽度＋右边界 因此当使用了盒子属性后切忌删除DOCTYPE
body{border:1px dotted #FF0000} </style> </head>
<body> <div id="box1"><div id="box2">这是里面的盒 子</div> </body>
边框border属性
盒子模型的margin和padding属性比较简单，只能设 置宽度值，最多分别对上、右、下、左设置宽度值。 而边框border则可以设置宽度、颜色和样式。 分别是border-width（宽度）、border-color（颜色） 和border-style（样式）其中border-style属性可以将 边框设置为实线（solid）、虚线（dashed）、点划线 （dotted）、双线（double）等效果
盒子的margin叠加问题
盒子的margin在标准流中的计算
实验1——行内元素之间的水平margin
span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; }
CSS盒子模型计算题
如果盒子里面嵌套有盒子，且两个盒子都有边框，那 么两个盒子边框之间的距离等于外面盒子的填充值＋ 里面盒子的边界值
CSS盒子模型的计算知识点
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盒模型详解
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>标签有必要强调⼀下。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
信息工程学院
College of Information Engineering
Web技术及应用
1. 元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋ 右填充＋右边框＋右边界
4.5.1 盒子模型基础
• 每个HTML元素都可以看作是一个装了东西的 盒子
• 盒子里面的内容到盒子的边框之间的距离即填 充(padding),盒子本身有边框(border),而盒子边 框外和其它盒子之间，还有边界(magin),如图所 示
• 默认情况下盒子的边框是无，背景色是透明， 所以我们在默认情况下看不到盒子
外面盒子的填充值(padding)＋里面盒子 的边距值(margin)
信息工程学院
College of Information Engineering
Web技术及应用
2 盒子模型的属性
• Border的属性 --border-width, border-color, border-style
• Padding的属性
信息工程学院
College of Information Engineering
Web技术及应用
例如下面的样式
#MyBox { margin:10px; padding:5px; border:dotted; border-width:3px; border-color:#0F0; width:70px; //内容的宽度 }
Web技术及应用
4.5 CSS的盒子模型
• 盒子模型是CSS的基石之一，它指定元素 如何显示以及（在某种程度上）如Байду номын сангаас相互 交互
• 页面上的每个元素都被浏览器看成是一个 矩形的盒子，这个盒子由元素的内容、填 充、边框和边界组成。
• 网页就是由许多个盒子通过不同的排列方 式（上下排列，并列排列，嵌套排列）堆 积而成。
--只能设置距离值
• Margin的属性
--只能设置距离值
信息工程学院
College of Information Engineering
Web技术及应用
盒子模型总结
• 边框是实的，我们可以看到实实在在的边框， 而填充和边界都是虚的，我们只能看到他们对 元素的影响
• 盒子模型中只能设置两类颜色，即边框颜色和 背景颜色（boder范围以内，不含margin）
信息工程学院
College of Information Engineering
Web技术及应用
信息工程学院
College of Information Engineering
CSS的盒子模型
Web技术及应用
信息工程学院
College of Information Engineering
Web技术及应用
Web技术及应用
CSS盒子模型与定位
信息工程学院
信息工程学院 2010.10 College of Information Engineering
Web技术及应用
知识回顾
1 什么是CSS
CSS（Cascading Style Sheets）：层叠样式表，一种定
义样式的语言，用于描述如何格式化和显示网页中的信息。 2 CSS基本语法
高。因此一般将行内元素装于块级元素中 （一般为DIV），再使用CSS。 • IE6处理HTML时盒子模型失效，切记在 IE6中要使用XHTML（加DTD）。
这个区域的宽度=左边距+左边框+左填充+内容宽度+ 右填充+右边框+右边距
= 10px+3px+5px+70px+5px+3px+10px = 106px
信息工程学院
College of Information Engineering
Web技术及应用
CSS盒子模型计算题
• 如果盒子里面嵌套有盒子，那么： 两个盒子边框之间的距离=
信息工程学院
College of Information Engineering
Web技术及应用
content：主体内容
margin：边距，四个方向为margin-top，margin-right， margin-bottom，margin-left
border：边框，四个方向为border-top，border-right， border-bottom，border-left
想一想？
• 页面的构成元素都有什么？ h1、h2、p、 a、 img、 span、 div、input 等等等等。
• 这些元素在页面上都是怎么放置的呢？ 像a、span、img和input 这样的元素是行内元素，放置的时候可 以在一行，而div、p、h1和h2会独占一行放置。
信息工程学院
College of Information Engineering
CSS规则：选择器{属性1：属性值1; ...;属性n：属性值n; } CSS选择器：基本选择器（标签、类和ID）
复合选择器（交集、并集、后代、伪类等等） 3 CSS引入方法
行内样式、 内部（内嵌）样式、 外部样式
信息工程学院
College of Information Engineering
Web技术及应用
• 盒子模型可设置三类距离，即边界距离margin ，填充距离padding和边框值border
信息工程学院
College of Information Engineering
Web技术及应用
4 盒子属性值的简写形式
border-width、border-style、 border-color、padding和margin - 给出1个属性值，则上下左右属性值相同 - 给出2个属性值，前者表示上下属性值，后者表示左右属性值 - 给出3个属性值，前者表示上属性值，中间数值表示左右属性 值，后者表示下属性值； - 给出4个属性值，依次表示上、右、下、左属性值，即顺时针 排序。
Border 例：border: 1px soild blue;
信息工程学院
College of Information Engineering
Web技术及应用
5. 使用盒子模型需注意的问题
• 边界值margin可为负，填充padding不可 为负
• 边框border默认值为0，即不显示 • 行内元素，如a，定义上下边界不影响行