讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
盒子模型概述
在网页设计中CSS的盒子模型是一个非常重要的概念。HTML中的每个元素占据一个矩形区域，这块区域就是该元素所占据的盒子。所谓盒子模型就是把HTML页面中的元素视为一个矩形的盒子、一个盛装内容的容器。每个盒子都由以下四部分组成：内容、内边距(padding)、边框(border)、外边距(margin)；详情请参见下图：
各部分概述如下：
-
border 表示盒子的边框
-
content 表示盒子中所容纳的内容
-
padding 表示内容与边框之间的填充
-
margin 表示盒子与外界(其它盒子)之间的间隔
所以，可按照如下方式计算盒子的大小：
盒子的实际宽度=内容(content)宽度+左右边框(border)+左右填充(padding)
盒子的实际高度=内容(content)高度+上下边框(border)+上下填充(padding)
盒子的总宽度=内容(content)宽度+左右边框(border)+左右填充(padding)+左右外边距(margin)
盒子的总高度=内容(content)高度+上下边框(border)+上下填充(padding)+上下外边距(margin)
在了解了盒子模型最基础的概念之后，我们来写一个盒子模型的入门示例，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型入门示例</title>
<style type="text/css">
.box {
/*盒子模型的宽度*/
width: 300px;
/*盒子模型的高度*/
height: 50px;
/*盒子模型的边框*/
border: 12px solid red;
/*盒子模型的背景*/
background: pink;
/*盒子模型的内边距*/
padding: 30px;
/*盒子模型的外边距*/
margin: 20px;
}
</style>
</head>
<body>
<p class="box">本文作者：谷哥的小弟 <br> 博客地址：http://blog.csdn.net/lfdfhl</p>
</body>
</html>
效果如下：
现对盒子模型各部分进行详细的介绍。
边框(border)
在此介绍CSS边框(border)的常用属性
边框(border)样式 border-style
常见的样式：solid(实线)、dotted(点线)、dashed(虚线)、double(双实线)、none(无边框)
在设置边框样式时既可以对盒子的单边进行设置也可以综合设置四条边框的样式，具体如下：
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border-style：上边框样式、右边框样式、下边框样式、左边框样式
border-style：上边框样式、左右边框样式、下边框样式
border-style：上下边框样式、左右边框样式
border-style：上下左右边框样式
在使用 border-style设置四个边框的样式时必须按照上右下左的顺序；出现省略时采用值复制的原则，即：一个值表示四个边框，两个值表示上下/左右边框，三个值时表示上/左右/下边框，四个值时表示上右下左边框
边框(border)的宽度 border-width
border-width属性用于设置边框的宽度，常用单位为px。同边框(border)一样：可分别设置各边框的宽度也可以对边框进行综合设置，具体如下：
border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border-width：上边框宽度、右边框宽度、下边框宽度、左边框宽度
border-width：上边框宽度、左右边框宽度、下边框宽度
border-width：上下边框宽度、左右边框宽度
border-width：上下左右边框宽度
在使用 border-width设置四个边框的宽度时必须按照上右下左的顺序；出现省略时采用值复制的原则，即：一个值表示四个边框，两个值表示上下/左右边框，三个值时表示上/左右/下边框，四个值时表示上右下左边框
边框(border)的颜色 border-color
border-color属性用于设置边框的颜色，常用形式为#RRGGBB。同边框(border)和宽度(width)一样：可分别设置各边框的颜色也可以对边框进行综合设置，具体如下：
border-top-color：上边框颜色
border-right-color：右边框颜色
border-bottom-color：下边框颜色
border-left-color：左边框颜色
border-color：上边框颜色、右边框颜色、下边框颜色、左边框颜色
border-color：上边框颜色、左右边框颜色、下边框颜色
border-color：上下边框颜色、左右边框颜色
border-color：上下左右边框颜色
在使用 border-color设置四个边框的颜色时必须按照上右下左的顺序；出现省略时采用值复制的原则，即：一个值表示四个边框，两个值表示上下/左右边框，三个值时表示上/左右/下边框，四个值时表示上右下左边框
综合设置边框相关属性
虽然可使用border-style、border-width、border-color设置边框样式，但是书写较为麻烦。所以，CSS提供了较为简洁的语法综合设置边框的风格、宽度、颜色；语法如下：
border:宽度 样式 颜色;
示例如下：
border:2px solid red;
border-top:3px dotted yellow;
边框示例1
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置外边框颜色</title>
<style type="text/css">
h2 {
/* 综合设置边框样式 */
border-style: solid;
/* 单独设置上边框颜色 */
border-top-color: #ff0000;
}
p {
/* 综合设置边框样式 */
border-style: solid;
/*设置边框颜色：两个值为上下、左右*/
border-color: #cac orangered;
}
</style>
</head>
<body>
<h2>设置边框颜色</h2>
<p>设置边框颜色</p>
</body>
</html>
效果如下：
边框示例2
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>综合设置边框</title>
<style type="text/css">
h2 {
/*综合设置各边框*/
border-top: 3px dashed #243d52;
border-right: 10px double #63abe8;
border-bottom: 5px double #85f2da;
border-left: 10px solid #1a5fad;
}
.photo {
/*综合设置所有边框*/
border: 15px solid forestgreen;
}
</style>
</head>
<body>
<h2>综合设置边框</h2>
<img class="photo" src="img/girl.jpg" alt="我的女朋友" />
</body>
</html>
效果如下：
边框示例3
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div盒子</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>
效果如下：
内边距(padding)
在CSS中使用padding属性设置内边距，常用单位为px。与border一样，padding也是复合属性，其相关设置方法如下：
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding：上内边距、右内边距、下内边距、左内边距
padding：上内边距、左右内边距、下内边距
padding：上下内边距、左右内边距
padding：上下左右内边距
在使用padding设置四个边框的内边距时必须按照上右下左的顺序；出现省略时采用值复制的原则，即：一个值表示四个边框，两个值表示上下/左右边框，三个值时表示上/左右/下边框，四个值时表示上右下左边框。
外边距(margin)
在CSS中使用margin属性设置外边距，常用单位为px。与border一样，padding也是复合属性，其相关设置方法如下：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距、右外边距、下外边距、左外边距
margin：上外边距、左右外边距、下外边距
margin：上下外边距、左右外边距
margin：上下左右外边距
在使用margin设置四个边框的外边距时必须按照上右下左的顺序；出现省略时采用值复制的原则，即：一个值表示四个边框，两个值表示上下/左右边框，三个值时表示上/左右/下边框，四个值时表示上右下左边框。
内容(content)
盒子中的内容各不相同，视具体的需求而定。比如：图片，文本，视频，音频等等。在盒子模型中常用width、height属性指定盒子模型中内容的宽和高。
盒子模型示例
盒子模型示例1
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒子模型示例</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(img/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>
效果如下：
盒子模型示例2
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型示例</title>
<style type="text/css">
div {
width: 450px;
padding: 10px;
background-color: red;
}
</style>
</head>
<body>
<div>
建造者模式定义：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。看到这个文绉绉的定义，多半是一头雾水。没事儿，咋们用大白话来说：建造者模式是创建复杂对象的模型，它将构建的过程和所用的部件解耦从而使得构建过程和所用部件分离开。
</div>
</body>
</html>
效果如下：
盒子模型示例3
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒子模型示例</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>
效果如下：
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>我们一起学习jQuery</p>
<p>我们一起学习J2EE</p>
</div>
</body>
</html>
效果如下：
嗯哼，看到了吧：<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;使得元素居中显示。其中，0表示元素的上下margin值为0；auto表示元素左右的margin为自适应。类似地，可以写作：margin: 10px auto;表示元素上下margin值为10px；元素左右margin值为自适应。
图文对齐
很多时候，我们还有这样的需求：图片和文本对齐。这个又是怎么做的呢？实现的方式固然很多，在此介绍利用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;
width: 35%;
height: 35%;
}
span {
background-color: #7FFF00;
font-size: 45px;
color: white;
}
</style>
</head>
<body>
<div>
<img src="img/girlfriend.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>盒子模型</title>
<style type="text/css">
.firstBox {
width: 320px;
height: 80px;
margin-bottom: 30px;
background-color: red;
}
.secondBox {
width: 320px;
height: 80px;
background-color: red;
margin-top: 50px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="firstBox">
<p>本文作者:谷哥的小弟</p>
<p>博客地址:http://blog.csdn.net/lfdfhl</p>
</div>
<div class="secondBox">
<p>坚持原创，热衷分享；积累技术，沉淀生活</p>
<p>欢迎技术交流，期待您的来信</p>
</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>盒子模型</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(img/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">
<h2 align="center">今日要闻</h2>
</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行
转载：https://blog.csdn.net/lfdfhl/article/details/100636357