1：盒子模型
所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。占据的空间要比实际使用的空间要大得多。
我们可以调整盒子的边框和距离，来调整盒子（页面和页面中的元素）的位置。
盒子模型是由内容、边框、内边距（padding）、外边距（margin）组成，他们的关系如下图所示：
盒子实际宽度（高度）=内容（element）+上下边框（border）+上下间隙（上下内边距padding）+间隔（上下外边距margin）。
对于任何一个元素设置width和height控制内容大小，也可以分别设置各自的边框（border）、内边距间隙（padding）、外边距间隔（margin）。
灵活设置这些盒子的这些属性，可以实现各自排班效果。
1：边框
border是元素的外围，计算元素的宽和高要把border加上特别是特殊网站页面（比如说活动专题页面等）上，这一点是很多新手忽略的地方。
border有三个主要属性，color（颜色）、width（粗细）和style（样式）。
顺序：上右下左，
color（颜色）
width（粗细）
style（样式）
2：外边距
margin用于控制块与块之间的距离。
为了便于理解可以把盒子模型想象成一幅画，padding是画与画框的留白，border是画框，margin是画与画之间距离
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位。
语法：
margin:上 右 下 左
margin:上下 左右
margin:四边
3：内边距
padding用于控制content与border之间的距离；
同时设置上下左右的padding时，可以这样写padding:10px 20px 10px 10px;
分别对应上、右、下、左四个方向的padding，逆时针排序，
4：盒子模型尺寸
box如大家所熟知的，是css布局中最小的单位，所有的布局都是由一个一个矩形的box搭建出来的，就很像是搭积木那样。
每一个box都会由四部分组成，包括：content，padding，border，margin。
盒子实际高度=上下外边距+上下边框+上下内边距+内容高度
盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度
box-sizing属性
Css3中有一个属性叫box-sizing，该属性取不同的值会决定box高宽不同的计算方式。
content-box ： 默认值，设置的高和宽是内容的高或者宽度，盒子实际的大小
还要加上内外边距。
这也就是最常规的计算方式，某个box的高等于它的height＋padding＋border＋margin，宽也是同理，就是上面给出的计算方式。
border-box：设置的高度就是整合盒子的大小，盒子的宽度或高度等于等于内容的宽度或高度。
当取值为border-box时，这个box的高就等于它的height＋margin了，也就是说该box的height是由content部分的height和padding以及border共同组成的了，换言之，padding和border不再向外延伸，而是往里边挤。
2：圆角边框
圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，有的采用小的圆角图片分别放在元素的四角，非常麻烦，灵活性差，也达到降低了网站的整体性能，而圆角边的出现则降低了开发和维护的难度。
border-radius：10px 20px 30px 40px ; 表示的是左上，右上，右下，左下的四个角的弧度。其实4个值的关系和border边框相一致。
写一个值的时候表示的是4个角的弧度一致，两个值的时候表示的是对角一样，即是左上右下一致，右上左下一致；同时也可以使用百分比作为值。
比如：圆形，半圆，扇形等都是使用圆角边框制作而成的。
3：盒子阴影
css3中为了提升用户的感受，提出了盒子阴影的属性 。
box-shadow: inset x-offset y-offset blur-radius color; 如果有多层阴影的话，中间可以使用逗号隔开；box-shadow: inset x y blur-radius color,x y blur-radius color;
inset 阴影的位置，默认是外部阴影，不设置的话就是默认值。Inset为内阴影
x-offset y-offset，分别是x轴和y轴的偏移量
blur-radius，阴影的模糊程度
Color 阴影的颜色
如：box-shadow: inset 20px 30px 6px red;
4：块级元素与行内元素
块级元素：竖直排列，默认占了一行，两侧撑满；如：h，div, p , li列表标签
行内元素(内联元素)：横向排列，到最右侧自动折行；如：<span>、<a>、<img/>，<font>
块级元素内部可以使用内联元素，反过来不行，如div和a
display属性
display: inline ； 内联元素的默认值，将块级元素转换为内联元素；
display: block ; 块元素的默认值，将内联元素转换为块级元素；
display: inline-block ; 既有内联元素的特性，也具有块级元素的特征；可以让块级元素排在一行
display: none ; 此元素不会在页面中显示；即隐藏了元素；
5：浮动
1：浮动
在 CSS 中，我们通过 float 属性实现元素的浮动。
一个标签一旦使用了浮动，就会脱离了（跳出了）原来的页面模板，并且他的宽和高也是实际的盒子模型的宽和高，不再是之前的默认值。
浮动可以理解为让某个div元素（块级标签）脱离标准流（原来的页面布局），
漂浮在标准流之上，和标准流不是一个层次。
<style>
.box {
width:900px;
margin-top:10px;
border:2px #03C solid;
padding:10px;
}
.box div{padding:10px;}
.layer01 {
border:2px #F00 dashed;
}
.layer02 {
border:2px #00F dashed;
}
.layer03 {
border:2px #060 dashed;
}
</style>
</head>
<body>
<div class="box">
<div class="layer01"><img src="img/course.jpg" /></div>
<div class="layer02"><img src="img/photo.jpg" /></div>
<div class="layer03"><img src="img/tx.jpg" /></div>
<p>这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~<br/>
这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~<br/>
这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~<br/>
这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~</p>
</div>
2：清除浮动
清除浮动的时候，仅仅是清除了该元素的左边或者右边的浮动效果，并不会影响自身的浮动效果。
6：定位
元素可以使用的顶部，底部，左侧和右侧属性定位
position 属性指定了元素的定位类型。
position 属性的五个值：
Static： 默认值，即没有定位；
Relative： 相对定位，相对于原来的位置而言
Absolute： 绝对定位
Fixed：固定位置
1：相对定位
即相对于元素原来的位置进行移动，可以使用三个div来设置背景来进行观察,可以使用Top,left,right,bottom,来具体的进行设置
设置前一定要记得先设置position的属性值
<div id="father">
<div id="first">第一个DIV</div>
<div id="second">第二个DIV</div>
<div id="third">第三个DIV</div>
</div>
#third {
background-color:#9292C9;
border:1px #395E4F dashed;
position:relative;
right:20px;
bottom:30px;
}
特点：
1：设置相对定位的盒子是相对于原来的位置而言，通过偏移量，到达新的位置
2：设置相对定位的盒子，原来的位置仍然在文档流中，对父级和相邻的元素没有影响
3：设置相对定位的盒子原来的位置会被保留下来
4：设置了相对定位的盒子层级会被提高，如果新的位置有内容会被覆盖
2：绝对定位
特点：
1：绝对定位的元素会从标准的文档流中脱离，
2：元素发生绝对定位的偏移之后，元素原来的位置不会被保留
3：绝对位置是根据离它最近的一个“已经定位”的祖先元素作为基准，如果所有的祖先元素都没有进行定位的话，则以浏览器窗口作为基准。
4：绝对定位的元素层级也会被提高
3：固定位置
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
position:fixed;
top:30px;
right:5px;
固定位置和绝对定位比较类似，最大的区别在于固定位置的基准不是祖先元素，而是只根据浏览器的窗口！
定位比较：
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
