在写HTML代码时要经常用到Chrome浏览器的F12功能，比如我们看淘宝：
通过元素定位器定位到一个li标签，然后看开发者选项卡的右侧：
这里就是这个li标签里的所有属性了，我们在做开发时可以直接修改这里的属性值，然后直接在页面中查看效果，比如我现在在这里加一个margin-bottom:20px：
回车后即可在页面查看效果：
也可以在盒子上直接调整大小来进行盒子样式的调试：
至此，我们应该记住：width和height只能设置盒子中内容的宽度和高度，盒子的实际高度和宽度应该加上border和padding。
div+css的应用
position：定位属性
作用：让标签显示在我们想要显示的位置
默认值：static静态，不能动
relative：相对的，可以移动lesson4.html
!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCss盒子模型/titlemetaname=keywordscontent=key1,key2metaname=descriptioncontent=linkrel=stylesheettype=text/csshref=css/index.css/headbodydiv我的css盒子测试模型1/div/body/html
index.css
*{margin:0px;padding:0px;}html,body{width:%;height:%;}div.mydiv{width:px;height:px;background-color:#;color:#fff;padding:10px20px;border-top:10pxsolid#f00;border-left:10pxsolid#0f0;border-right:10pxsolid#00f;border-bottom:10pxsolid#bbb;display:inline-block;margin:10px;position:relative;top:px;left:px;}
注意，上面css代码中，我们增加了position：relative属性，接着我们增加了top和left属性，这时候页面显为：
盒子的上面和左面都增加了像素的距离，而如果我们不添加positon:relative属性直接增加top
和left这时候这两个属性是不起作用的。
这里的相对是指相对于盒子的左上角顶点。
应用relative时只能应用left和top属性，也就是相对于左侧和上方的距离。
fixed：固定在浏览器的某个位置让盒子固定在某个地方。比如