您的位置：首页 > 职场人生

讲给Android程序员看的前端教程(18)——盒子模型

2017-12-01 09:35 896 查看

版权声明

本文原创作者：谷哥的小弟

作者博客地址：http://blog.csdn.net/lfdfhl

本文视频教程：http://www.stay4it.com/my/course/37

在网页设计中CSS的盒子模型是一个非常重要的概念。HTML中的每个元素占据一个矩形区域，这块区域就是该元素所占据的盒子。详情请参见下图：

该盒子包括如下几个部分：border、content、padding、margin。

border，即盒子的外边框

content，即盒子中所容纳的内容

padding，即内容与边框之间的填充

margin，即盒子与外界(其它盒子)之间的间隔

所以，可按照如下方式计算盒子的大小：

盒子的宽度=内容(content)宽度+左右边框(border)+左右填充(padding)

盒子的高度=内容(content)高度+上下边框(border)+上下填充(padding)

现对各部分进行详细的介绍。

边框(border)

边框(border)的常见属性

边框(border)的宽度

border-width:5px;

边框(border)的样式

border-style:solid;

常见的样式：solid(实线)、dotted(点线)、dashed(虚线)

边框(border)的颜色

order-color:red;

在了解这些基本的属性之后，我们可以画一个简单的盒子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
div{
width: 370px;
height: 100px;
background-color: yellow;
border-width: 2px;
border-style: dashed;
border-color: red;
}
</style>
</head>
<body>
<div>
<p>本文作者：谷哥的小弟</p>
<p>博客地址：http://blog.csdn.net/lfdfhl</p>
</div>
</body>
</html>

运行后效果如下图所示：

当然，也可以单独设置某条边框的样式，例如：

border-top-width:1px;
border-top-style:solid;
border-top-color: green;

嗯哼，我们也可以进行属性的连写，例如：

border-left:1px dotted  pink;
border-right: 1px dashed black;
border-bottom: 1px solid red;

所以，如果四条边框的样式一致，那么可以如下的形式：

border: solid 2px yellow;

请看一个CSS盒子模型的小示例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS的盒子模型</title>
<style type="text/css">
input {
border: none;
outline-style: none;
}

.username {
border: 1px dashed red;
background: yellowgreen;
}

.username:focus {
background-color: yellow;
}

.email {
border-bottom: 1px dotted red;
}

.search {
border: 1px solid black;
background-image: url("search.png");
background-repeat: no-repeat;
background-position: right;
}
</style>
</head>

<body>
<label for="uid">用 户: </label>
<input type="text" class="username" id="uid">
<br>
<br>
<label for="eid">邮 箱：</label>
<input type="text" class="email" id="eid">
<br>
<br>
<label for="sid">搜 索: </label>
<input type="text" class="search" id="sid">
</body>

</html>

运行后效果如下图所示：

代码详解如下:

去除表单原本的样式，border:0 none;取消表单边框；outline-style:none;取消表单轮廓线；请参见代码第7-10行

为表单中的”用户”设置默认样式，请参见代码第12-15行

为表单中的”用户”设置获取焦点时的样式，请参见代码第17-19行

为表单中的”邮箱”设置样式，请参见代码第21-23行

为表单中的”搜索”设置样式和图片，请参见代码第25-30行

本示例中为使得点击表单前的文字的效果等同于点击input本身，故将文字置于<label></label>中；且将label的for属性的设置为input标签的id

内容(content)

盒子中的内容各不相同，视具体的需求而定。比如：图片，文本，视频，音频等等。

填充(padding)

关于填充(padding)的常见属性

padding-left：表示左边距

padding-right: 表示右边距

padding-top: 表示上边距

padding-bottom: 表示下边距

关于填充(padding)的属性联写

padding: 10px; 表示上，右，下，左的填充值为10px

padding: 10px 20px;表示上和下的填充值为10px；左和右的padding值为20px

padding: 10px 20px 30px;表示上的填充值为10px ；左和右的padding为20px；下的填充值为30px

padding: 10px 20px 30px 40px;表示上，右，下，左的填充值

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的盒子模型</title>
<style type="text/css">
div{
width: 450px;
padding: 10px;
background-color: red;
}
</style>
</head>
<body>
<div>
建造者模式定义：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。看到这个文绉绉的定义，多半是一头雾水。没事儿，咋们用大白话来说：建造者模式是创建复杂对象的模型，它将构建的过程和所用的部件解耦从而使得构建过程和所用部件分离开。
</div>
</body>
</html>

运行后效果如下图所示：

间隔(margin)

关于间隔(margin)的常见属性

margin-left：设置左边的外边距

margin-right: 设置右边的外边距

margin-top: 设置上边的外边距

margin-bottom: 设置下边的外边距

关于间隔(margin)的属性联写

margin: 10px; 表示上边，右边，下边，左边的外边距值为10px

margin: 10px 20px;表示上边和下边的外边距值为10px；左边和右边的外边距值为20px

margin: 10px 20px 30px;表示上边的外边距值为10px ；左边和右边的外边距为20px；下边的外边距值为30px

margin: 10px 20px 30px 40px;表示上边，右边，下边，左边的外边距值

嗯哼，来看一个很小的例子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS的盒子模型</title>
<style type="text/css">
.firstBox {
width: 320px;
height: 80px;
background-color: red;
}

.secondBox {
width: 250px;
height: 70px;
background-color: red;
margin-top: 50px;
background-color: yellowgreen;
}
</style>
</head>

<body>
<div class="firstBox">
本文作者:谷哥的小弟
<br>
<br>
博客地址:http://blog.csdn.net/lfdfhl
</div>
<div class="secondBox">
有心课堂
<br>
<br> http://www.stay4it.com/ </div>
</body>

</html>

运行后效果如下所示：

在这里我们通过设置margin-top:50px;使得两个盒子之间产生了间距。

overflow

overflow属性用于指定当内容溢出元素时的应对措施。

我们先来看一个例子：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>overflow</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

div {
margin: 50px;
width: 350px;
height: 100px;
border: 1px solid red;
}
</style>
</head>

<body>
<div>
<p>本文作者:谷哥的小弟</p>
<p>博客地址:http://blog.csdn.net/lfdfhl</p>
<p>我们一起学习HTML</p>
<p>我们一起学习CSS</p>
<p>我们一起学习JS</p>
<p>我们一起学习Android</p>
<p>我们一起学习J2EE</p>
</div>
</body>

</html>

在该示例中：

清除浏览器默认样式，请参见代码第8-11行

设置标签选择器div，请参见代码第13-18行

在<div></div>中输入较多内容，请参见代码第23-31行

运行后效果如下如所示：

嗯哼，看到了吧：<div></div>中内容过多，已经超过了该标签的高度，溢出了。此时，我们可利用overflow属性来解决此类问题，关于该属性的取值及其作用如下小结：

overflow: visible

visible为overflow属性的默认值。使用该值后，假若元素中内容过多，这些内容不会被修剪，会在元素之外显示

overflow: hidden

使用该值后，假若元素中内容过多，超出部分将被隐藏

overflow: auto

使用该值后，假若元素中内容过多，那么系统会为元素设置滚动条；假若内容不够多并没有超出元素，那么系统不会为元素设置滚动条。所以，在实际开发中多采用该属性。

overflow: scorll

使用该值后，不论元素中内容是否超出元素的大小，系统都会为元素设置滚动条

嗯哼，分别把这四个属性置于该示例的标签选择器div中；运行后，再观察效果即可明白它们各自的作用；在此不再详细列举

元素居中

有时候，我们需要元素在盒子模型中居中显示，这个是怎么实现的呢？请看如下示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>元素居中显示</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.firstBox {
width: 510px;
height: 200px;
border: 1px solid red;
background-color: #7FFF00;
margin: 0 auto;
}

.secondBox {
width: 410px;
height: 150px;
border: 1px solid red;
background-color: #00FFFF;
margin: 0 auto;
}
</style>
</head>

<body>
<div class="firstBox">
<div class="secondBox">
<p>本文作者:谷哥的小弟</p>
<p>博客地址:http://blog.csdn.net/lfdfhl</p>
</div>
</div>
</body>

</html>

运行后效果如下图所示：

在该示例中两个<div></div>发生了嵌套，它们分别使用了类选择器firstBox和secondBox且在这两个类选择器重均设置了margin: 0 auto;使得元素居中显示。

图文对齐

很多时候，我们还有这样的需求：图片和文本对齐。这个又是怎么做的呢？实现的方式固然很多，在此介绍利用vertical-align属性实现该功能，其取值及对应作用如下：

baseline 元素放置在父元素的基线上，默认值。

sub 垂直对齐文本的下标

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部

bottom 把元素的顶端与行中最低的元素的顶端对齐

text-bottom 把元素的底端与父元素字体的底端对齐

请看如下示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>图片与文字的垂直对齐</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

img {
vertical-align: middle;
}

span {
background-color: #7FFF00;
font-size: 45px;
color: white;
}
</style>
</head>

<body>
<div>
<img src="jglf.jpg">
<span>我的漂亮女友</span>
</div>
</body>

</html>

运行后效果如下图所示：

这段代码非常简单，在标签选择器img中设置vertical-align属性值为middle即可实现图片和文本在垂直方向的对齐。

需要注意的问题

关于CSS的盒子模型，我们已经基本介绍完了；但是有两个特殊的地方需要大家注意。

第一个问题：

两个盒子垂直显示的时候，如果上方的盒子设置了margin-bottom: Mpx并且下方的盒子设置了 margin-top:Npx；那么两者的实际间距并不是M+N而是M、N两者的最大值。

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS的盒子模型</title>
<style type="text/css">
.firstBox {
width: 320px;
height: 80px;
margin-bottom: 30;
background-color: red;
}

.secondBox {
width: 250px;
height: 70px;
background-color: red;
margin-top: 50px;
background-color: yellowgreen;
}
</style>
</head>

<body>
<div class="firstBox">
本文作者:谷哥的小弟
<br>
<br>
博客地址:http://blog.csdn.net/lfdfhl
</div>
<div class="secondBox">
有心课堂
<br>
<br> http://www.stay4it.com/ </div>
</body>

</html>

在该示例中，两个盒子在垂直方向上依次显示。在第一个盒子中设置了margin-bottom: 30px；在第二个盒子中设置了margin-top:50px;

运行后效果如下图所示：

在这个图中我们发现两者的实际间距并不是50px+30px=80px，而是50px。在刚开始看到这个现象的时候很多人觉得不可理解。其实，我们可以换个通俗的例子来类比——假设你和女朋友吵架了，两个人都很生气。你女朋友愤怒地说：我不想看到你，你离我100米远！说完妹子就往后退了100米。此时，你也郁闷地说：我也不想看到你了，你离我50米远！嗯哼，这个时候你还用往后退50米么？不用了，妹子已经距离你100米了，你要是真的再往后退50米，你们两个就真的要分手了！所以，这个时候只有较大的值是起作用的！

第二个问题：

两个盒子嵌套显示的时候，若想通过给内部的盒子设置margin-top:Mpx;使其距离外部盒子顶部产生一定距离；此时发现无效，需要给外部盒子设置overflow: hidden;方可解决该问题

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS的盒子模型</title>
<style type="text/css">
.firstBox {
width: 300px;
height: 300px;
background-color: red;
overflow: hidden;
}

.secondBox {
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 20px;
}
</style>
</head>

<body>
<div class="firstBox">
<div class="secondBox">
</div>
</div>
</body>

</html>

在该示例中，两个盒子嵌套显示。在内部的盒子中设置了margin-top: 20px;在外部的盒子中设置了overflow: hidden;

运行后效果如下图所示：

效果是实现了，但是为什么设置了overflow: hidden就可以解决此问题呢？因为给父元素(即外部盒子)设置overflow：hidden触发了BFC

综合小示例

现在来看一个例子，效果图如下所示：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS的盒子模型</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

ul li {
list-style: none;
}

.newsBox {
width: 200px;
height: 150px;
border: 1px solid #d9e0ee;
border-top: 2px solid #ff8400;
margin: 10px auto;
}

.titleBox {
border-bottom: 1px solid #d9e0ee;
height: 35px;
line-height: 35px;
padding-left: 20px;
font-weight: 700;
}

.contentBox ul {
margin-top: 10px;
margin-left: 10px;
}

.contentBox li {
background-image: url("dot.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 10px;
line-height: 20px;
}

.contentBox a {
color: #666666;
font-size: 14px;
text-decoration: none;
}

.contentBox a:hover {
color: #DB6B12;
text-decoration: underline;
}
</style>
</head>

<body>
<div class="newsBox">
<div class="titleBox">
今日新闻
</div>
<div class="contentBox">
<ul>
<li><a href="">诺基亚发布新款手机</a></li>
<li><a href="">英开始实施脱欧计划</a></li>
<li><a href="">有心课堂新课程上线</a></li>
<li><a href="">石家庄空气持续污染</a></li>
</ul>
</div>
</div>
</body>

</html>

代码解析如下：

利用通配符选择器去除浏览器默认的margin和padding，请参见代码第8-11行。

利用后代选择器剔除列表ul的默认样式，请参见代码第13-15行

此操作亦为常见的做法。

为最外层盒子(newsBox)设置属性，请参见代码第17-23行

margin:10px auto;表示盒子上下的margin值为10px且在水平方向居中显示

为标题盒子(titleBox)设置样式，请参见代码第25-31行

为内容列表设置样式，请参见代码第33-36行

为列表中的项设置样式，请参见代码第38-44行

其中background-repeat:no-repeat;表示背景图片不平铺

其中background-position:left center;表示背景图片在左侧居中显示

为列表中每项里的超链接设置样式，请参见代码第46-55行

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航