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 构造模型的更多相关文章

CSS构造模型
div 边距边框定位浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...
WEB入门.七 CSS布局模型
学习内容标准文档流流动模型(flow model) 浮动模型(float model) CSS基本布局能力目标理解标准文档流使用流动模型实现页面布局使用浮动模型实现页面布局掌握常用CSS ...
html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
CSS 框模型
CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框和外边距的方 ...
熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的内容.内边距.边框和外边距的方式元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

随机推荐

RN 开发常见小问题
1 定时器每隔多少秒调用一次直接贴代码可复制使用 componentWillUnmount() { this.timer && clearInterval(this.timer) ...
PAT1049:Counting Ones
1049. Counting Ones (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The tas ...
3GPP 测试 /etc/udev/ruse.d/50文件 /lib/udev/ruse.d/55* 网络配置
3GPP是个标准化协议组织,其工作目标是制定协议实现由2G网络到3G网络的平滑过渡,保证未来技术的后向兼容性,支持轻松建网及系统间的漫游和兼容性. 3GPP协议的制订主要是以GSM核心网为基础. 测试 ...
MySql中innodb存储引擎事务日志详解
分析下MySql中innodb存储引擎是如何通过日志来实现事务的? Mysql会最大程度的使用缓存机制来提高数据库的访问效率,但是万一数据库发生断电,因为缓存的数据没有写入磁盘,导致缓存在内存中的数据 ...
Jacob工具类使用文件互转服务 word转html html转excel word转pdf excel转pdf ppt转pdf
前提条件必须安装MS office 1.jdk使用jdk1.8 2.jacob.dll放在..\jdk1.8\jre\bin目录下 3.eclipse的jre版本要和jdk一致,window-&g ...
Spring Boot整合Quartz实现定时任务表配置
最近有个小项目要做,spring mvc下的task设置一直不太灵活,因此在Spring Boot上想做到灵活的管理定时任务.需求就是,当项目启动的时候,如果有定时任务则加载进来,生成schedule ...
Whitelabel Error Page 专题
Spring boot为错误视图提供了如下错误属性:timestamp:错误发生的时间status:HTTP状态码error:错误原因exception:异常的类名message:异常消息(如果这个错 ...
C#关于winform时间格式2017.05.27
winform中的控件为DateTimePicker DateTime startdate = startTime.Value;//获取到Winform控件的时间 String start = sta ...
titanium环境配置
###### **工具:** > * [titanium studio](http://www.appcelerator.com/product/) > * [node.js](https ...
Java集合排序及java集合类详解--(Collection, List, Set, Map)
1 集合框架 1.1 集合框架概述 1.1.1 容器简介到目前为止,我们已经学习了如何创建多个不同的对象,定义了这些对象以后,我们就可以利用它们来做一 ...

21 , CSS 构造模型

21 , CSS 构造模型的更多相关文章

随机推荐

热门专题