笔者花业余时间，学习了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）
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
