标准盒子模型
一个标准的的盒子模型是有：
- content：内容
- padding：内边距（内容到元素边框的距离）
- border：边框，可以分开设置四边
- margin：外边框（此控件和相邻控件之间的距离）
border边框设定
border有四个方向的值可以设定top，right，bottom，left
border-方位-width：边框宽度像素
border-方位-style：solid（实线） dashed（虚线） dotted（点线） double（双边线）
border-方位-color：颜色
复合属性
border-方位：width style color
如：
border-bottom：1px solid red
四边设置
border：width style color
注意：
- 边框的设置至少要有两个值：宽度和类型、颜色不写默认是黑色
- 盒子设置边框会被撑大
- 背景颜色铺设在边框区域
说明：背景颜色会包含边框，及边框的底色依然是元素的背景色
所有的li的坐标不会超过border
注意：可以在网页的最上面设定一个通用css文件，里面放上通配符和超链接等通用样式
在建立一个网页的时候先导入，这样可以执行一些预备命令，比如：
- 取消系统给所有默认标签边框
- 取消列表符号
- 取消超链接下划线
- 设定字体大小和字体颜色
- 还可以设置输入框大小或格式等......
padding内边距
内容到边框的距离
padding-（top/left/right/bottom）：width
复合属性
padding：width
复合属性的属性值有四种设置格式
- padding：上 右 下 左（四个值）
- padding：上 左右 下 （三个值）
- padding：上下 左右（两个值）
- padding：四边（一个值）
margin外间距
盒子与盒子之间的距离 / 合资与浏览器边之间的距离
- 盒子和盒子的兄弟关系
- 盒子和盒子的父级关系
计算标准盒子模型的大小
盒子标准的大小计算
- 盒子的宽度 = width + padding * 2（左右）+ border * 2（左右）
- 盒子的高度 = height + padding * 2（上下））+ border * 2（上下）
盒子占据控件大小
- 所占宽度 = width + padding * 2（左右）+ border * 2（左右）+ margin * 2（左右）
- 所站高度 = height + padding * 2（上下））+ border * 2（上下）+ margin * 2（上下）
示例：
说明：需要调试的网页在浏览器例行程css的检查调试器，可以进行当前页面的css临时修改
怪异盒子（IE盒子）
怪异盒子是之边框包含在控件的width取值范围内
width = content + padding + border
怪异盒子的大小计算
标准大小
- 宽度 width = （css中设置的width值）
- 高度 ：height = css设置
所占空间
- 宽度 = width + margin * 2（左右）
- 高度：height + margin * 2（上下）
box-sizing：border-box
示例：
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终大小就是 width 200的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<br>
<p>小猪佩奇</p>效果：
说明：由于边框内包所以导致整个内部的div不会撑开外部的结构（宽度）
怪异盒子变为普通盒子
content-box
注意
在这是设置padding和margin如果设置百分数时，无论哪个方向都会参考父元素的宽高
案例：
说明：设置margin为50%后，小div的左上角点就坐落在大div的中心点，因为margin-left和margin-top会有50%的间距。
- width的默认值auto和100%的区别
- 100%：盒子参考父元素的高度，父元素大小决定了内部容器的大小，添加padding和border会影响盒子的大小，即获取父原素的高度+border，父500 边框10 最终500+20=520高度
- 默认（auto）：自动（自适应），动态取值，排除了padding+border+margin之后的所占空间，是剩下的区域 ，即获取父元素的高度-border 父500 边框10 最终500-20=480高度
练习
制作一个用边框完成的三角形图案
body {
background-color: violet;
}
.box {
/* width: 200px;
height: 200px; */
/* background-color: orangered; */
border-left: 100px solid red;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}
</style>
<div class="box"></div>效果：
说明：当前在对一个边框进行设置颜色的时候，做透明设置，通知宽和高都为0，此时就能变为如图三角形形式
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
