首页 / CSS / CSS总结-盒子模型
CSS总结-盒子模型
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS总结-盒子模型，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2969字，纯文字阅读大概需要5分钟。
内容图文
本章内容：知识点一：
盒子模型：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
以其中一个例子为例：
引入代码：
<p style="width: 500px;">
<p style="margin: 10px; border: 5px solid blue; padding: 10px; ">
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
</p>
</p>
以上的元素总共被计算出来的的尺寸是：
Total width = 10 + 5 + 10 + 450+ 10 + 5 + 10 = 500px
Total height = 10 + 5 + 10 + 72+ 10 + 5 + 10 = 122px
知识点二：
对盒子模型有了初步认识后，我们考虑到这几个场景：
1.相对定位或者无定位的情况(默认为position为static)
引入代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
}
</style>
</head>
<body>
<h2>Static or Relative Box</h2>
<p class="box">不设置任何position属性及宽度</p>
</body>
</html>
则块的宽度是延伸自动填充满它的父元素的宽度区域
2.浮动float元素和绝对定位元素（具有包裹性，通过设置display: table;也能实现包裹性效果，可以自己设置看看效果）
引入代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
position: absolute;
}
</style>
</head>
<body>
<h2>Absolute or Float Box</h2>
<p class="box">不设置任何position属性及宽度</p>
</body>
</html>
3.特殊性：设置p的样式为box-sizing: border-box;
引入代码：
<p style="width: 500px;">
<p style="margin: 10px; border: 5px solid blue; padding: 10px; width: 300px; box-sizing: border-box; ">
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
</p>
</p>
发现内容宽度为：border的宽度+padding的宽度+内容的宽度
4.盒子模型的margin属性：
如果两个元素放在一起，对应的margin纵向只取其大的
更多CSS总结-盒子模型相关文章请关注PHP中文网！
内容总结
以上是互联网集市为您收集整理的CSS总结-盒子模型全部内容，希望文章能够帮你解决CSS总结-盒子模型所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。