HTML第五课——css盒子模型【2】

首先要感谢这段时间我没有更新还给我发赞赏的朋友!谢谢@NLJY的饮料,selenium框架我一会就发给你哈~~~谢谢@zuz5的赞赏!大家能在这里学到一点东西,我就没有白写。谢谢大家的关注!


继续讲我们的盒子模型

由于现在浏览器有可能会自动给你的代码加上margin或者padding,我们经常在css文件中先设置一下这两个属性值为0:

html, body{
    margin: 0px;
    padding: 0px;
}

此时,我们再看一下,样式(把上次的代码再给大家粘贴一下):

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 id="mydiv">我的css盒子测试模型</div>
</body>
</html>

index.css

*{
}

html, body{
    margin: 0px;    
    padding: 0px;
}

#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;
}

此时,样式就会紧贴着浏览器边缘了:

有时候我们也会这样写:

index.css

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

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

#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;
}

这样一来,我们盒子模型的大小就会随着浏览器窗口的大小而自适应了。 再来说一下外边距——margin,我们修改我们的代码为:

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>
    <div class="mydiv">我的css盒子测试模型2</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,但是发现改后样式变为:

这是因为行内元素是不能修改宽和高的,这时候我们用display: inline-block就可以了:

现在又出现了另一个问题,就是大家发现上面两个盒子中间多了一个空白的地方,而且空白地方无法选中,说实话如果你用inline-block那么中间这个间距就是默认自带的了(如果非要去掉就要加float: left或者margin: -10;)。

现在我们盒子和浏览器边缘是没有间距的,现在我们希望它离浏览器有一段距离,我们加一个margin: 10px;属性,然后再看:

我们看到它和浏览器之间有了边距,我们再来看一下现在盒子的大小:

盒子现在的大小是160*140

可以看到盒子的大小是没有计算最外层的margin属性的也就是

160=100+20*2+10*2;140=100+10*2+10*2

所以说margin是盒子的外边距,在盒子外面,不算做盒子大小的。

现在大家就掌握了盒子模型的所有基础概念了。

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

原文发表时间:2018-06-16

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

FLAnimatedImage -ios gif图片加载框架介绍

简介 FLAnimatedImage 是 Flipboard 团队开发的在它们 App 中渲染 GIF 图片使用的库。 后来 Flipboard 将 FLAni...

36170
来自专栏Material Design组件

Human Interface Guidelines —— Image Views & Maps & Pages

33070
来自专栏偏前端工程师的驿站

CSS魔法堂:小结一下Box Model与Positioning Scheme

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考。 《CSS魔法堂:重新...

19260
来自专栏非著名程序员

Android自定义下拉刷新动画--仿百度外卖下拉刷新

? 好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错。好了废话不多说了,开始我们今天的主题吧。现如今的APP各式各样,同样也...

203100
来自专栏青玉伏案

视错觉升级版:多个视错觉效果实现

之前发表过一篇关于视错觉的文章:《视错觉:从一个看似简单的自定义控件说起》,虽然不是用iOS开发中的Mask来实现的,但是原理和Mask原理是一样的,相当于手动...

223100
来自专栏Material Design组件

Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

76290
来自专栏非著名程序员

代码实验室--带你一步步理解使用 ConstraintLayout

? 说明 这次 IO 给开发者带来了很多惊喜, ConstraintLayout 是其中较为实用的之一. Google 第一时间发布了官方的代码实验室指导教程...

25860
来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

11510
来自专栏hbbliyong

WPF 跳动的文字

先上代码 public MainWindow() { InitializeComponent(); ...

30980
来自专栏王大锤

UI渲染回顾简单笔记

30380

扫码关注云+社区

领取腾讯云代金券