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 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

WPF 跳动的文字

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

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

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

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

1786
来自专栏三流程序员的挣扎

Android 优化——应用瘦身

831
来自专栏向治洪

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

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

2697
来自专栏Thinks

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

本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思...

793
来自专栏林德熙的博客

win10 uwp 毛玻璃 Compositor 创建毛玻璃win2D最简单方法

毛玻璃在UWP很简单,不会和WPF那样伤性能。 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃。

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

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

911
来自专栏非著名程序员

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

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

17410
来自专栏落影的专栏

iOS开发-视图渲染与性能优化

前言 关于iOS的视图渲染流程,以及性能优化的建议。 源于WWDC视频。 我假设你是一个这样的开发者: 了解OpenGL ES; 了解view hierar...

4147
来自专栏青玉伏案

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

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

18510

扫码关注云+社区