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

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

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

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

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

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

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

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

div + css的应用

position:定位属性

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

默认值:static 静态,不能动

relative:相对的,可以移动

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

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

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

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

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

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

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

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

相对于,应用属性可以应用:属性。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180720G17QQJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券