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 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

随机推荐

团队项目第二阶段个人进展——Day10
一.昨天工作总结冲刺第十天,做程序的测试,并修复一些小的bug 二.遇到的问题无三.今日工作规划继续对程序进行测试优化
JVM GC-----垃圾回收算法
说到Java,一定绕不开GC,尽管不是Java首创的,但Java一定是使用GC的代表.GC就是垃圾回收,更直接点说就是内存回收.是对内存进行整理,从而使内存的使用尽可能大的被复用. 一直想好好写一篇关 ...
[Mysql]——通过例子理解事务的4种隔离级别(转)
SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 一.事务隔离级别分类第1级别:R ...
Tiny4412MMU内存管理
MMU是Memory Management Unit的缩写,中文名是内存管理单元,MMU是由ARM芯片中的cp15协处理器管理,它的作用是负责虚拟内存到物理内存的映射要将虚拟内存映射为物理内存,就要 ...
python 零基础学习之路 02-python入门
不知不觉学习python已经两个月了,从一开始不知道如何对print的格式化,到现在可以手撸orm,这期间真的是一个神奇的过程.为了巩固自己的基础知识,为后面的拓展埋下更好的伏笔,此文当以导师的博客 ...
CAP原理和BASE思想
分布式领域CAP理论,Consistency(一致性), 数据一致更新,所有数据变动都是同步的Availability(可用性), 好的响应性能Partition tolerance(分区容错性) 可 ...
python取txt文件的若干行到另一个文件
取movie.txt文件的若干行到movie2.txt #取txt文件的若干行到另一个txt f1 = open(r'F:\movie.txt','rb') f2= open(r'F:\movie2 ...
Python模拟登陆万能法-微博|知乎
Python模拟登陆让不少人伤透脑筋,今天奉上一种万能登陆方法.你无须精通HTML,甚至也无须精通Python,但却能让你成功的进行模拟登陆.本文讲的是登陆所有网站的一种方法,并不局限于微博与知乎,仅 ...
Java 保留两位小数填坑
下面直接上代码: DecimalFormat df1 = new DecimalFormat("#.00");DecimalFormat df2 = new DecimalForm ...
python3 os模块的常用功能及方法总结
1.os.getcwd() #显示当前工作路径 2.os.listdir('dirname') #返回指定目录下的所有文件和目录名 3.os.remove('filename') ...

21 , CSS 构造模型

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

随机推荐

热门专题