css盒⼦模型实验报告总结_CSS盒⼦模型知识总结
box sizing本章内容：
知识点⼀：
盒⼦模型：Box Model，由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。
从w3school上下载的图⽚，以图来看看盒⼦模型的四个组成部分
说明：图中元素框的最内部分是实际的内容(element)；直接包围内容的是内边距(padding)，内边距呈现了元素的背景(background)；内边距的边缘是边框(border)；边框以外是外边距(margin)，外边距默认是透明的，因此不会遮挡其后的任 何元素(其实元素的margin就是其所在⽗元素的padding)。
⼀个元素放在页⾯上究竟需要多⼤尺⼨时，把已经声明内边距，边框，外边距值统统与内容区域加上。当然，如果⼀个元素没有内边距，边框，外边距的话，也就是它的尺⼨仅仅是由它的内容来决定。先忽略外边距的叠加效果，计算公式如下：
Total width = left margin + left border + left padding + width + right padding + right border + right margin
Total height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
以其中⼀个例⼦为例：
引⼊代码：
⽹上很多设置的⽅式，⽬前以⼆进制的⽅式来讲解(ID CLASS ELEMENT)
⽹上很多设置的⽅式，⽬前以⼆进制的⽅式来讲解(ID CLASS ELEMENT)
⽹上很多设置的⽅式，⽬前以⼆进制的⽅式来讲解(ID CLASS ELEMENT)
以上的元素总共被计算出来的的尺⼨是：
Total width = 10 + 5 + 10 + 450+ 10 + 5 + 10 = 500px
Total height = 10 + 5 + 10 + 72+ 10 + 5 + 10 = 122px
知识点⼆：
对盒⼦模型有了初步认识后，我们考虑到这⼏个场景：
1.相对定位或者⽆定位的情况(默认为position为static)
引⼊代码：
.box {
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
}
Static or Relative Box
不设置任何position属性及宽度
则块的宽度是延伸⾃动填充满它的⽗元素的宽度区域
2.浮动float元素和绝对定位元素(具有包裹性，通过设置display: table；也能实现包裹性效果，可以⾃⼰设置看看效果)引⼊代码：
.box {
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
position: absolute;
}
Absolute or Float Box
不设置任何position属性及宽度
3.特殊性：设置p的样式为box-sizing: border-box;
引⼊代码：
⽹上很多设置的⽅式，⽬前以⼆进制的⽅式来讲解(ID CLASS ELEMENT)
⽹上很多设置的⽅式，⽬前以⼆进制的⽅式来讲解(ID CLASS ELEMENT)
⽹上很多设置的⽅式，⽬前以⼆进制的⽅式来讲解(ID CLASS ELEMENT)
发现内容宽度为：border的宽度+padding的宽度+内容的宽度
4.盒⼦模型的margin属性：
如果两个元素放在⼀起，对应的margin纵向只取其⼤的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。