HTML第六课——盒子模型的应用1

盒子模型的基础知识我们已经讲完了，接下来就是具体的应用了。

在写HTML代码时要经常用到Chrome浏览器的F12功能，比如我们看淘宝：

通过元素定位器定位到一个li标签，然后看开发者选项卡的右侧：

这里就是这个li标签里的所有属性了，我们在做开发时可以直接修改这里的属性值，然后直接在页面中查看效果，比如我现在在这里加一个

：

回车后即可在页面查看效果：

也可以在盒子上直接调整大小来进行盒子样式的调试：

至此，我们应该记住：width和height只能设置盒子中内容的宽度和高度，盒子的实际高度和宽度应该加上border和padding。

div + css的应用

position：定位属性

作用：让标签显示在我们想要显示的位置

默认值：static 静态，不能动

relative：相对的，可以移动

注意，上面css代码中，我们增加了属性，接着我们增加了和属性，这时候页面显示为：

盒子的上面和左面都增加了100像素的距离，而如果我们不添加属性直接增加和这时候这两个属性是不起作用的。

这里的是指相对于盒子的左上角顶点。

应用时只能应用和属性，也就是相对于左侧和上方的距离。

fixed：固定在浏览器的某个位置

让盒子固定在某个地方。比如微信公众号右侧有一个`在线问答`不管页面怎么动，它都是在浏览器右侧中部边缘：

比如现在我们让我们的盒子顶在右侧边缘且没有间隙，那我们就可以这样修改代码：

这样盒子模型就会固定在右上角：

相对于，应用属性可以应用：属性。