21 , CSS 构造模型

1. div

2. 边距

3. 边框

4. 定位

5. 浮动

1 21.1 div

部分(division)---<div>元素,经常以 div 形式引用---是 XHTML 元素,用于定义 XHTML 文

件中的区域.

1.添加 div

<div>

<p>This is our content area.</p>

</div>

给 div 添加一个 id

<p>This is our content area.</p>

</div>

#container {

Padding: 20px;

Border:1px solid #000;

Background:#ccc;

}

2.添加子 div

<p>This is our content area.</p>

</div>

</div>

.box {

margin: 10px;

padding: 20px;

border:1px solid #000;

}

3.div 和上下文选择器

.box p {

Color: #333;

}

#container p {

Color: #333;

}

2 21.2 边距

外边距(margin)

外边距声明:

#container {

Margin:-top: 20px;

Margin-left: auto;

Margin-right: auto;

Margin-bottom; 20px;

Width: 300px;

Border: 1px solid #333;

Padding: #ccc;

}

#container {

Margin: 20px auto 1em auto; /*上,右,下 , 左*/

}

用 margin:auto 居中

Body {

Text-align: center;

}

#container {

Width: 400px;

Margin: 10px auto 10px auto;

Padding: 20px;

Background: #ccc;

Text-align: left;

}

5.内边距(padding)

#container {

Padding-top: 20px;

Padding-left: 10%;

Padding-right: 1em;

Padding-bottom: 0;

Background: #ccc;

}

6.外边距,内边距和主体

Body {

Margin: 0;

Padding: 0;

}

3 21.3 边框

Border-style (边框样式)

None(无边框),dotted(点线),dashed(虚线),

Solid(实现),double(双线),groove(凹槽),ridge(凸槽),

Inset(凹边),outset(凸边)

/*上右下左*/

Border-style: solid dotted inset outset;

Border-width(长度)

Border-top-width

Border-right-width

Border-bottom-width

Borer-left-width

Border-color

Border

Border-top

Border-right

Border-bottom

Border-left

Border(四周)Border-top(上)…

4 21.4 定位

P,h1 和 div 等成为块级元素.意思是这些元素显示为一块内容,即”块框”.与之相

反,strong 和 span 等元素称为行内元素,即”行内框”.更多内容 , 后章在述.

(1).相对定位

#myBox {

Position: relative;

Top: 20px;

Left: 20px;

}

(2).绝对定位

#myBox {

Position:absolute;

Top: 20px;

Left: 20px;

}

5 21.5 浮动

.news img {

Float: left;

}

.news p {

Float: right;

}

11构造模型上下文选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

	#contion{

		background: orange;

		border: 1px solid black;

		padding: 20px;

	}

	.box{

		border: 1px solid black;

		padding:10px;

		margin:10px;

	}

	#contion>p{

		color: red;

	}

	.box p{

		color: blue;

	}

	</style>

</head>

<body>

<div id="contion">

	<p>构造模型构造模型</p>

	<div class="box"><p>构造模型2构造模型2</p></div>

	<div class="box"><p>构造模型2构造模型2</p></div>

	</div>

</body>

</html>

　　12构造模型边距

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

	#contion{

		background: orange;

		border: 1px solid black;

		padding: 20px;

		width: 150px;

		height: 150px;

		padding: 10px;

		margin: 10px;

	}

	.box{

		border: 1px solid black;

		padding:10px;

		margin:10px;

	}

	#contion>p{

		color: red;

	}

	.box p{

		color: blue;

	}

	</style>

</head>

<body>

<div id="contion">

	<p>构造模型构造模型</p>

	<div class="box"><p>构造模型2构造模型2</p></div>

	<div class="box"><p>构造模型2构造模型2</p></div>

	</div>

</body>

</html>

　　13构造模型定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

	#contion{

		background: orange;

		height: 300px;

		width: 300px;

		position: relative;

		margin-top: 120px;

		margin-left: 120px;

	}

	#contion p{

		position: absolute;

		top: 200px;

		left: 150px;

	}

		</style>

</head>

<body>

<div id="contion">

	<p>构造模型构造模型</p>

		</div>

</body>

</html>

巴特西

21 , CSS 构造模型

最新文章

热门文章