时间：2021-07-01 10:21:17 帮助过：34人阅读
盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
border: 10px solid blue;
}
style>
head>
<body>
<div id="box">
Box Model
div>
body>
html>
运行结果：
计算最大宽度，示例如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style type="text/css">
#box{
width: 800px;
padding: 10px;
border: 5px solid blue;
margin: 10px;
}
.sbox{
display: inline-block;
padding: 10px;
margin: 10px;
border: solid 10px coral;
background: lightblue;
width: ?;
}
style>
head>
<body>
<div id="box">
<div class="sbox">Leftdiv><div class="sbox">Rightdiv>
div>
body>
html>
要达到如下效果，请求?处最大可以设置为多少像素？
答案：
340px
代码如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style type="text/css">
#box{
width: 800px;
padding: 10px;
border: 5px solid blue;
margin: 10px;
height: 100px;
}
#box #innerBox{
background: lightblue;
height:50px ;
width: 100%;
padding: 10px;
margin: 10px;
border: 10px solid lightcoral;
}
style>
head>
<body>
<div id="box">
<div id="innerBox">
innerBox
div>
div>
body>
html>
请问运行时innerBox是否会超出box，如果会，超出多少？
可见部分=850-815=35，还有10个margin不可见，45px
如果不想让innerBox超出，则应该删除其100%的宽度设置，去掉width:100%，一般不要设置，多此一举。
设置或检索对象的盒模型组成模式
content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid blue;
margin: 10px;
}
style>
head>
<body>
<div id="box">
Box Model
div>
body>
html>
运行结果：
因为默认就是为content-box所以这里没有直接设置，占用宽度为160px;
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid blue;
margin: 10px;
box-sizing: border-box; /*在上一个例子中添加的*/
}
style>
head>
<body>
<div id="box">
Box Model
div>
body>
html>
运行结果：
当box-sizing: border-box时的宽度设置会包含border与padding，但不包含margin，但margin也会占用位置。
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型 - 三角形title>
<style type="text/css">
#box{
width: 0;
height: 0;
border: 100px solid blue;
border-color: blue transparent transparent transparent;
/*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/
}
style>
head>
<body>
<div id="box">
div>
body>
html>
运行结果：
心形：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:after,#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0px 0px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
style>
head>
<body>
<div id="heart">
div>
body>
html>
运行结果：
外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，如：
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
#div1{
border: 3px solid blue;
height: 200px;
background: lightcoral;
}
#div2{
height: 100px;
background: lightgreen;
margin-top: 20px;
}
#div3{
height: 50px;
width: 50%;
background: lightblue;
margin-top: 20px;
}
style>
head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
div>
div>
div>
body>
html>
运行结果：
因为div2与div3的外边距是相邻的（是父子关系的相邻），当div2 margin-top为20,div3的margin-top也为20,此时div2与div3的外边距会合并，就是折叠。
如果想让div3的margin-top生效，可以破坏相邻的限制，示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
#div1{
border: 3px solid blue;
height: 200px;
background: lightcoral;
}
#div2{
height: 100px;
background: lightgreen;
margin-top: 20px;
border: 1px solid green;
}
#div3{
height: 50px;
width: 50%;
background: lightblue;
margin-top: 20px;
}
style>
head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
div>
div>
div>
body>
html>
运行结果：
a)、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边距折叠title>
head>
<body>
<div style="height:90px; margin-bottom:99px; width:90px; background-color: red;">Xdiv>
<div style="height:90px; margin-top:100px; width:90px; background-color: blue;">Ydiv>
body>
html>
运行结果：
b)、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边距折叠title>
head>
<body>
<div style="height:90px; margin-bottom:-10px; width:90px; background-color: red;">Xdiv>
<div style="height:90px; margin-top:-30px;width:70px; background-color: blue;">Ydiv>
body>
html>
结果：
c)、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>参与折叠的 margin 中有正值，有负值title>
head>
<body>
<div style="height:90px; margin-bottom:-30px; width:90px; background-color: red;">Xdiv>
<div style="height:90px; margin-top:30px;width:70px; background-color: blue;">Ydiv>
body>
html>
运行结果：
html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：
常用块级与内联元素：
内联元素（行内元素）内联元素(inline element) a - 超链接 abbr - 缩写 acronym - 首字 bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 -