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

相关文章

来自专栏Material Design组件

Human Interface Guidelines —— Image Views & Maps & Pages

3167
来自专栏大数据

前端女程序员教你,图片加载时,使用 SVG 作为图片 placehold

前言:使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。 不同类型的图片 placehold ? 请点击此处输入图片描述 对于图片占位符,通...

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

Android 优化——应用瘦身

951
来自专栏Thinks

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

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

823
来自专栏非著名程序员

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

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

2226
来自专栏极客生活

数据分析Excel技能之求和

鼠标选中 B8单元格 -> 开始 -> 编辑 -> 自动求和,excel会自动感应要求和的行和列。

662
来自专栏iOS开发笔记

深入探究frame和bounds的区别以及setbounds使用

在iOS开发中经常遇到两个词Frame和bounds,本文主要阐述Frame和bound的区别,尤其是bound很绕,很难理解。 1 首先,看一下公认的资料 ...

3014
来自专栏落影的专栏

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

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

4487
来自专栏青玉伏案

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

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

19310
来自专栏hbbliyong

WPF 跳动的文字

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

2918

扫码关注云+社区