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. MySQL SHOW TABLE 输出的每列详细介绍

    Name: 表名 Engine: 表的存储引擎(旧版本中,该值为Type) Row_format: 行的格式.对于MyISAM表,可选的值为Dynamic.Fixed或者Copressed. Dyna ...

  2. Struts2中的值栈

    一 什么是值栈 值栈: struts2中提供的一种类似于域对象的工具, 用于struts2中的存值和取值. 每次访问Action的时候, 都会创建一个action对象, 而每个action对象中都存在 ...

  3. java中判断文件及所在文件夹是否存在

    File file=new File(filePath);if (file.exists()) {}else { File fileParent =new File(file.getParent()) ...

  4. elasticsearch x-pack

    elasticsearch-plugin.bat install x-pack D:\elasticsearch-5.5.3\bin>elasticsearch-plugin.bat insta ...

  5. python中用locust做简单的压力测试

    验证导入包成功 首先导入locust模块,百度一下导入方法很多,就不多说了 验证导入成功或失败,在终端中(windows中是cmd)输入:locust --help 导入成功后会出现如下界面: 编辑运 ...

  6. Javascript 进阶 继承

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/29194261 1.基于类的继承 下面看下面的代码: <script typ ...

  7. HSLA色相饱和透明度

    H:Hue(色调),取值为:0 - 360.将色相值想成一个圆环中的度数,随着在圆环上移动,得到不同的颜色. S:Saturation(饱和度),取值为:0.0% - 100.0%.数值越低(降低饱和 ...

  8. CentOS 7.2 关闭防火墙

    CentOS7 的防火墙配置跟以前版本有很大区别,CentOS7这个版本的防火墙默认使用的是firewall,与之前的版本使用iptables不一样 1.关闭防火墙: systemctl stop f ...

  9. linux下安装python3.6.4

    想在阿里云端装一个 python36,因为自带的python2有点老 ,(centos系统) 当然你如果选择的乌班图系统的话就自带了python3,就不用看了 于是查找资料,但是一步一步的来总是不行, ...

  10. python下如何安装.whl包？

    下载 .whl 包 先 pip install wheel 之后 pip install 包名字.whl 即可安装某模块包