安静的敲着键盘，已势不可挡的姿势逼近php，我想我是一个幸福的人，未来不可期，做好现在，偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识。
本文盒模型理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border,padding,margin盒模型理解</title>
<style>
div{
/*width: 50px;
height: 50px;*/
/*background-color: red;*/
/*正常的情况下，我们给一个元素指定宽度和高度的时候，我们只是设置了内容区域的宽度和高度，像这个50*50的盒子*/
/*border: 25px solid black;
padding: 25px;
margin: 25px;*/
/*如果加上边框和内外边距，这个div的总宽度就会变成
50+50（左右边框）+50（内边距）+50（外边距）*/ /*当你在根据psd文件写效果的时候，用ps量尺寸的情况下，你就要细心量
取内容区域了，要100%逼近效果图*/ /*box-sizing: border-box;*/
/*width: 300px;
height: 300px;*/
/*当然默认情况下一个盒子的box-sizing:content-box;,就是上述情况下盒子的总宽度是由宽度加上边框和内外边距。
还有一种情况就是怪异盒模型，在css中加上box-sizing:border-box;
这一种情况就是把盒子的大小固定，给到的width和height就是
包含边框和内边距（无外边距），总宽度就要加上外面局*/ /*此时这个盒子的width是50（左右边距）+50（内边距）+200（内容区域），总宽度需要加上外边距的100.*/ /*我们可以总结默认情况下，width就是内容的宽度
怪异合模型下，width包含border和padding加上内容宽度.*/ /*给定一个div，让我们来对其边框可以有以下操作：*/
/*border-style：none;*/
/*默认情况下，边框样式是无边框
solid表示实线；
dashed虚边框；
dotted点线边框，ie6下存在兼容性问题；*/ /*border-width: 10px;*/
/*这是边框宽度*/ /*border-color: red;*/
/*这是给定边框颜色*/ /*对于单独设置一边或多边便不过多解释*/ /*border:5px solid red;*/
/*通常情况下我们简写边框样式*/ /*padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;*/
/*这是对内边距的各个方向的设定（不多解释），直接用padding
来书写会有一下几种格式*/
/*padding: 10px;
padding: 5px 10px;
padding: 5px 10px 15px;
padding: 5px 10px 15px 20px;*/ /*margin同padding（写法一致）*/
/*1,对于兄弟关系的相对margin值，会相对叠加，比如水平
排列的两个div，a的margin-right为50px
和b的margin-left为100px;a和b的间距就是100px(取大值)。*/ /*2，对于父级来说，第一个子级的margin-top,会影响父级的布局，
可以给父级加边框或者用padding-top代替；不建议用overflow:hidden;
提示：对于第一个子级来说，避免用margin-top.*/ }
</style>
</head>
<body>
<div></div>
</body>
</html>