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

孟船长

发布于 2018-08-03 09:51:39

1.2K0

发布于 2018-08-03 09:51:39

文章被收录于专栏：自动化测试实战

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

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

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

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

margin-bottom: 20px：

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

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

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

div + css的应用

position：定位属性

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

默认值：static 静态，不能动

relative：相对的，可以移动

lesson4.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css盒子模型</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="mydiv">我的css盒子测试模型1</div>
</body>
</html>

index.css

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

div.mydiv{
    width: 100px;
    height: 100px;
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-top: 10px solid #f00;
    border-left: 10px solid #0f0;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #bbb;
    display: inline-block;
    margin: 10px;
    position: relative;
    top: 100px;
    left: 100px;
}

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

盒子的上面和左面都增加了100像素的距离，而如果我们不添加positon: relative属性直接增加top和left这时候这两个属性是不起作用的。这里的相对是指相对于盒子的左上角顶点。

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

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

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

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

index.css

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

div.mydiv{
    width: 100px;
    height: 100px;
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-top: 10px solid #f00;
    border-left: 10px solid #0f0;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #bbb;
    display: inline-block;
    margin: 10px;
    position: fixed;
    right: -10px;
        top: -10px;
}

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

相对于relative，应用fixed属性可以应用：top/left/right/bottom属性。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-07-20，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自自动化测试实战微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度