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

<div id=”container”>

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

</div>

#container {

Padding: 20px;

Border:1px solid #000;

Background:#ccc;

}

2.添加子 div

<div id=”container”>

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

<div class=”box”>

<p>I’m in a box!</p>

</div>

<div class=”box”>

<p>I’m also in a box!</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 构造模型的更多相关文章

  1. CSS构造模型

    div 边距 边框 定位 浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...

  2. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  3. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  4. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  5. CSS 框模型

    CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并 一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框 和 外边距 的方 ...

  6. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  7. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  8. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  9. CSS盒模型

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

随机推荐

  1. DX11 Without DirectX SDK--03 渲染一个立方体

    回到 DirectX11--使用Windows SDK来进行开发 一个立方体有8个顶点,然而绘制一个立方体需要画12个三角形,如果按照前面的方法绘制的话,则需要提供36个顶点,而且这里面的顶点数据会重 ...

  2. maven的pom文件中配置测试用例

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  3. 使用SimHash进行海量文本去重[转载]

    阅读目录 1. SimHash与传统hash函数的区别 2. SimHash算法思想 3. SimHash流程实现 4. SimHash签名距离计算 5. SimHash存储和索引 6. SimHas ...

  4. .net关于坐标之间一些简单操作

    火星坐标系 (GCJ-02)转换为百度坐标系 (BD-09) function GCJ02toBD09(lng, lat) { var x_pi = 3.14159265358979324 * 300 ...

  5. 利用post请求发送内容进行爬虫

    利用post请求发送内容进行爬虫 import requests url = 'http://www.iqianyue.com/mypost' header = {} header['Accept-L ...

  6. 11. 将博客部署到tomcat上

    springboot项目既可以以jar运行,也可以做成war包放到服务器上,因为我的博客项目涉及到文件上传,所以按照jar的方式就不可行,需要部署到tomcat上,具体做法如下:1. 修改pom.xm ...

  7. Effective java-对象的创建和销毁

    说到java对象的创建,首先应该提下java的内存机制,最主要的两块应该就是堆内存和栈内存. 简单点来说栈内存主要是保存基本数据类型的值和保存引用变量,堆内存主要用来存放new产生的对象,数组. 堆是 ...

  8. js定时器让动画隔秒运动

    现有一个需求,宝箱隔几秒动一次,抓住用户眼球,自己写了个 doem.

  9. Java同步简介

    Java同步 Java中同步一直都是很重要的问题,对于初学者来说也是不太容易能理解的问题.特在此记录一下有关Java中同步和锁的知识.主要涉及到同步的概念以及Java中解决的办法和简单的例子.有关锁L ...

  10. BZOJ_1705_[Usaco2007 Nov]Telephone Wire 架设电话线_DP

    BZOJ_1705_[Usaco2007 Nov]Telephone Wire 架设电话线_DP Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是 ...