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

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

在写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属性,接着我们增加了topleft属性,这时候页面显示为:

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

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

  • 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属性。

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-07-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

20570
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

20980
来自专栏河湾欢儿的专栏

2.布局解决方案- 垂直居中<2>

垂直布局 写出两个盒子并满足以下条件条件: 1.里面的高度盒子不固定 2.外面盒子的高度不固定

8410
来自专栏企鹅号快讯

Web前端,认识css,css规格,伪类和伪元素的用法,代码详解!

认识 CSS — Cascading Style Sheets CSS的世界是神奇的。随着浏览器WEB标准的日趋统一,CSS在WEB世界中的扮演的角色也越来越重...

21360
来自专栏天天

H5

20420
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

98950
来自专栏V站

自适应丨Html5响应式(自适应)网页设计

viewport是网页默认的宽度和高度, 上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width), 原始缩放比例(initia...

72750
来自专栏黑白安全

javascript实现background 定时循环随机背景图

这里用的固定地址,用的新浪图床,喜欢的话可以自己扩充图片,我这里简短的展示了10个图片!

18230
来自专栏九彩拼盘的叨叨叨

学习前端 大纲(Beta)

10140
来自专栏河湾欢儿的专栏

display:inline-block

1.块在一行显示 2.行内属性标签支持宽高 3.没有宽度的时候内容撑开宽度 4.标签之间的换行被解析(问题) 5.Ie6 7不支持inline-bloc...

9530

扫码关注云+社区

领取腾讯云代金券