CSS学习总结-盒子模型
2018-06-24 00:59:31来源：未知 阅读 ()
笔者花业余时间，学习了CSS内容，主要是参考了王福朋博客（http://www.cnblogs.com/wangfupeng1988/tag/css/）及张鑫旭的博客中CSS部分的内容，由于笔者非前端专业人士，不能像张鑫旭大神一样剖析CSS的属性机制，目前只能以查看及学习后，将自己理解的总结进行系列的记录及分享，便于后期CSS的应用。
分享系列目录：
1.CSS学习总结-盒子模型
2.CSS学习总结-选择器
3.CSS学习总结-层叠规则
4.CSS学习总结-定位（position）
5.CSS学习总结-浮动（float）
本章内容：
知识点一：
盒子模型：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
以其中一个例子为例：
引入代码：
<div style="width: 500px;">
<div style="margin: 10px; border: 5px solid blue; padding: 10px; ">
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
</div>
</div>
以上的元素总共被计算出来的的尺寸是：
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>
<div class="box">不设置任何position属性及宽度</div>
</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>
<div class="box">不设置任何position属性及宽度</div>
</body>
</html>
3.特殊性：设置div的样式为box-sizing: border-box;
引入代码：
<div style="width: 500px;">
<div style="margin: 10px; border: 5px solid blue; padding: 10px; width: 300px; box-sizing: border-box; ">
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
网上很多设置的方式，目前以二进制的方式来讲解(ID CLASS ELEMENT)
</div>
</div>
发现内容宽度为：border的宽度+padding的宽度+内容的宽度
4.盒子模型的margin属性：
如果两个元素放在一起，对应的margin纵向只取其大的
关注微信公众号（qzgcsczj）
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
