PHP全站开发工程师-第06章 CSS盒子模型

PHP全站开发工程师-第05章 CSS表格列表排版

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(BoxModel)：

PHP全站开发工程师-第06章 CSS盒子模型

1. 不同部分的说明：

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

2. CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。

Margin

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

实例

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

Margin - 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。

所有边距属性的缩写属性是"margin":

实例

margin:100px 50px;

margin属性可以有一到四个值

margin:25px 50px 75px 100px;

上边距为25px

右边距为50px

下边距为75px

左边距为100px

margin:25px 50px 75px;

上边距为25px

左右边距为50px

下边距为75px

margin:25px 50px;

上下边距为25px

左右边距为50px

margin:25px;

所有的4个边距都是25px

3. CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

outline属性

"CSS"列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

属性	说明	值	CSS
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit	2
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit	2
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	设置轮廓的宽度	thin medium thick length inherit	2

outline-style属性值

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

实例：demo01

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			p {
				border: 1px solid red;
			}
			
			p.dotted {
				outline-style: dotted;
			}
			
			p.dashed {
				outline-style: dashed;
			}
			
			p.solid {
				outline-style: solid;
			}
			
			p.double {
				outline-style: double;
			}
			
			p.groove {
				outline-style: groove;
			}
			
			p.ridge {
				outline-style: ridge;
			}
			
			p.inset {
				outline-style: inset;
			}
			
			p.outset {
				outline-style: outset;
			}
		</style>
	</head>

	<body>
		<p class="dotted">点线轮廓</p>
		<p class="dashed">虚线轮廓</p>
		<p class="solid">实线轮廓</p>
		<p class="double">双线轮廓</p>
		<p class="groove">凹槽轮廓</p>
		<p class="ridge">垄状轮廓</p>
		<p class="inset">嵌入轮廓</p>
		<p class="outset">外凸轮廓</p>
	</body>

</html>

4. CSS 边框

CSS 边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

border-style属性值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

实例：demo02

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			p.none {
				border-style: none;
			}
			
			p.dotted {
				border-style: dotted;
			}
			
			p.dashed {
				border-style: dashed;
			}
			
			p.solid {
				border-style: solid;
			}
			
			p.double {
				border-style: double;
			}
			
			p.groove {
				border-style: groove;
			}
			
			p.ridge {
				border-style: ridge;
			}
			
			p.inset {
				border-style: inset;
			}
			
			p.outset {
				border-style: outset;
			}
			
			p.hidden {
				border-style: hidden;
			}
		</style>
	</head>

	<body>
		<p class="none">无边框。</p>
		<p class="dotted">虚线边框。</p>
		<p class="dashed">虚线边框。</p>
		<p class="solid">实线边框。</p>
		<p class="double">双边框。</p>
		<p class="groove"> 凹槽边框。</p>
		<p class="ridge">垄状边框。</p>
		<p class="inset">嵌入边框。</p>
		<p class="outset">外凸边框。</p>
		<p class="hidden">隐藏边框。</p>
	</body>

</html>

5. CSS Padding（填充）

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

Padding属性

属性	说明
padding	使用缩写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

填充 - 简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":

padding:25px 50px;

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px

右填充为50px

下填充为75px

左填充为100px

padding:25px 50px 75px;

上填充为25px

左右填充为50px

下填充为75px

padding:25px 50px;

上下填充为25px

左右填充为50px

padding:25px;

所有的填充都是25px

实例：demo03

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS 盒子模型（1）</title>
	</head>
	<style type="text/css">
		#box{
			
			text-align: center;
			background-color: gray;
			color: wheat;
			margin: 30px;
			outline: 30px solid #FF0000;
			border: 30px solid #8A2BE2;
			padding: 30px;
			width: 40px;
			height: 40px;
		}
		#content{
			border: 1px solid black;
		}
	</style>
	<body>
		<div id="box">
			<div id="content">
				盒子模型
			</div>
		</div>
	</body>
</html>

6. CSS3 box-shadow 属性

语法

box-shadow: h-shadowv-shadow blur spread color inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

实例：demo04

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>案例1</title>
		<style type="text/css">
			.img-group {
				margin: 1% auto;
				text-align: center;
			}
			
			.img-default {
				text-align: center;
				outline: 2px solid cadetblue;
				margin: auto 1%;
				border: 1px solid #DC143C;
				border-radius: 15px;
			}
		</style>
	</head>

	<body>
		<div class="img-group">
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
		</div>
		<div class="img-group">
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
			<img src="image/meitu.jpg" width="20%" class="img-default"/>
		</div>
	</body>

</html>

实例：demo05

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>案例2</title>
		<style type="text/css">
			.btn-group {
				text-align: center;
			}
			
			.btn-default {
				display: inline;
				text-align: center;
				color: darkblue;
				border: 2px solid rgba(0,0,0,0.5);
				border-radius: 5px;
				padding: 5px 15px;
				background-color: rgba(0,0,0,0.1);
			}
			.btn-blue {
				display: inline;
				text-align: center;
				color: darkred;
				border: 2px solid rgba(0,0,255,0.5);
				border-radius: 5px;
				padding: 5px 15px;
				background-color: rgba(0,0,255,0.1);
			}
			.btn-red {
				display: inline;
				text-align: center;
				color: green;
				border: 2px solid rgba(255,0,0,0.5);
				border-radius: 5px;
				padding: 5px 15px;
				background-color: rgba(255,0,0,0.1);
			}
			.btn-green {
				display: inline;
				text-align: center;
				color: darkred;
				border: 2px solid rgba(0,255,0,0.5);
				border-radius: 5px;
				padding: 5px 15px;
				background-color: rgba(0,255,0,0.1);
			}
		</style>
	</head>

	<body>
		<div class="btn-group">
			<div class="btn btn-default">默认</div>
			<div class="btn btn-blue">蓝色</div>
			<div class="btn btn-red">红色</div>
			<div class="btn btn-green">绿色</div>
		</div>
	</body>

</html>

实例：demo06

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>案例3</title>
		<style type="text/css">
			.col4 {
				text-align: center;
				display: inline-block;
				margin: 1%;
				width: 30%;
			}
			.img-rounded {
				width: 100%;
				margin: auto 1%;
				border: 1px solid rgba(0,0,0,0.5);
				border-radius: 5px;
			}
			.img-circle {
				width: 100%;
				margin: auto 1%;
				border: 1px solid rgba(0,0,0,0.5);
				border-radius: 50%;
			}
			.img-thumbnail {
				width: 100%;
				margin: auto 1%;
				border: 1px solid rgba(0,0,0,0.5);
				padding: 2%;
			}
		</style>
	</head>

	<body>
		<div class="col4">
			<img src="image/meinv.jpg" class="img-rounded">
		</div>
		<div class="col4">
			<img src="image/meinv.jpg" class="img-circle">
		</div>
		<div class="col4">
			<img src="image/meinv.jpg" class="img-thumbnail">
		</div>
		
	</body>

</html>

实例：demo07

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>案例4</title>
		<style type="text/css">
			.big{
				margin: 5% 10%;
				padding: 10% 8%;
				background-color: rgba(0,0,0,0.1);
				font-size: 150%;
				text-align: center;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<h1>欢迎访问</h1>
			<p>这是自适应的放映模块</p>
		</div>
	</body>
</html>

PHP全站开发工程师-第07章 CSS定位布局

秒客网

PHP全站开发工程师-第06章 CSS盒子模型

CSS 盒子模型(Box Model)

1. 不同部分的说明：

2. CSS Margin(外边距)

Margin - 单边外边距属性

Margin - 简写属性

margin属性可以有一到四个值

3. CSS 轮廓（outline）

outline属性

outline-style属性值

4. CSS 边框

CSS 边框属性

border-style属性值

5. CSS Padding（填充）

Padding属性

填充- 单边内边距属性

填充 - 简写属性

Padding属性，可以有一到四个值。

6. CSS3 box-shadow 属性

相关文章