跟着传智播客学习asp.net之DIV+CSS

div+css详解

学习资料：韩顺平div+css视频、css禅意花园、别具光芒、csdn网页设计专栏、开源之祖sourceforeg.net、php开源大全 www.php.open.com

Div+css (sascading style sheets:层叠样式表)是什么?

传统table布局缺点:

1. 显示样式和数据是绑定在一起的

2. 布局的时候灵活度不高

3. 一个页面可能会有大量的<table>元素,代码冗余

4. 增加带宽(200字节)

5. 搜索引擎不喜欢这样的布局

优点

1. 理解比较简单

2. 不同浏览器看到的效果一般是一样的(兼容性)table技术出现比较早

3. 用于显示数据还是很好的

Div+css 是一种目前比较流行的网页布局技术基本思想:数据和样式要分离

Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示，从而做到数据和显示相互分离的效果

原理图如下：

有时候，我们也可能把css直接嵌入到html文件中，这种方式称为内联css

基本语法:

<style>

选择器{

属性: 属性值;

…

}

</style>

我们可以简单的这样理解div+css:

div 是用于存放内容(文字,图片,元素)的容器。

css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

快速入门案例(体验案例)

div+css详解

学习资料：韩顺平div+css视频、css禅意花园、别具光芒、csdn网页设计专栏、开源之祖sourceforeg.net、php开源大全 www.php.open.com

Div+css (sascading style sheets:层叠样式表)是什么?

传统table布局缺点:

1. 显示样式和数据是绑定在一起的

2. 布局的时候灵活度不高

3. 一个页面可能会有大量的<table>元素,代码冗余

4. 增加带宽(200字节)

5. 搜索引擎不喜欢这样的布局

优点

1. 理解比较简单

2. 不同浏览器看到的效果一般是一样的(兼容性)table技术出现比较早

3. 用于显示数据还是很好的

Div+css 是一种目前比较流行的网页布局技术基本思想:数据和样式要分离

Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示，从而做到数据和显示相互分离的效果

原理图如下：

有时候，我们也可能把css直接嵌入到html文件中，这种方式称为内联css

基本语法:

<style>

选择器{

属性: 属性值;

…

}

</style>

我们可以简单的这样理解div+css:

div 是用于存放内容(文字,图片,元素)的容器。

css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

快速入门案例(体验案例)

Demo.html

<html>

<head>

<title>css入门小案例</title>

</head>

<body>

</div>

</body>

</html>

My.css

.style1{

/*宽度 */

width: 400px;

height: 300px; /*一定要写一个分号*/

background-color:silver;

border:1px solid red;

margin-left:400px;

margin-top:250px;

padding-top:20px;

padding-left:40px;

}

Demo.html

<html>

<head>

<title>css入门小案例</title>

</head>

<body>

</div>

</body>

</html>

My.css

.style1{

/*宽度 */

width: 400px;

height: 300px; /*一定要写一个分号*/

background-color:silver;

border:1px solid red;

margin-left:400px;

margin-top:250px;

padding-top:20px;

padding-left:40px;

}

网页设计的三个时期

① table 网页设计

② table+css 网页设计

③ div+css 网页设计

css使用必要性1. 可以很好的统一网站的显示风格.

css使用的基本语法

选择器{

属性1: 属性值;

属性2: 属性值;

….

}

Html文件:

<html>

<body>

</body>

</html>

Css文件：

/*.s1 用术语类选择器*/

.s1{

color: blue;

font-size: 30px;

font-style:italic;

text-decoration:underline;

}

.s2{

color:yellow;

font-size:12px;

}

.s3{

color:blue;

font-style:italic;

}

.s4{

color:green;

font-weight:bold;

}

.s5{

color:#9C3131;

}

Css必要性2 可以使用滤镜

<html>

<head>

a:link img{

filter:gray;

}

a:hover img{

filter:"";

}

</style>

</head>

<body>

</body>

</html>

一．div+css的介绍

div是用于存放html元素，文字，图片，视频的元素

css 是层叠样式表，用于指定div中的内容的样式

原理图：

<html>

<head>

<title>入门小案例</title>

</head>

<body>

</div>

</body>

</html>

.style1{

/*宽度*/

width:400px;

height:300px;/*一定要写分号*/

background-color:blue;

border:2px solid red;

margin-left:300px;

margin-top:200px;

padding-left:100px;

}

div+css的快速体验案例：

test.html：

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN">

<html>

<head>

</head>

<body>

<table>

</table>

</div>

</body>

</html>

my.css中指定：

.style1{

width:300px;

height:200px;

border:1px solid red;

margin:100px 0px 0px 200px;

}

.style1 table{

border:1px solid black;

width:298px;

height:190px;

}

.style1 table td{

border: 1px solid black;

text-align:center;

}

Css的必要性

网页设计的三个时期

① table 网页设计

② table+css 网页设计

③ div+css 网页设计

css使用必要性1. 可以很好的统一网站的显示风格.

css使用的基本语法

选择器{

属性1: 属性值;

属性2: 属性值;

….

}

Html文件:

<html>

<body>

</body>

</html>

Css文件：

/*.s1 用术语类选择器*/

.s1{

color: blue;

font-size: 30px;

font-style:italic;

text-decoration:underline;

}

.s2{

color:yellow;

font-size:12px;

}

.s3{

color:blue;

font-style:italic;

}

.s4{

color:green;

font-weight:bold;

}

.s5{

color:#9C3131;

}

Css必要性2 可以使用滤镜

<html>

<head>

a:link img{

filter:gray;

}

a:hover img{

filter:"";

}

</style>

</head>

<body>

</body>

</html>

一．div+css的介绍

div是用于存放html元素，文字，图片，视频的元素

css 是层叠样式表，用于指定div中的内容的样式

原理图：

<html>

<head>

<title>入门小案例</title>

</head>

<body>

</div>

</body>

</html>

.style1{

/*宽度*/

width:400px;

height:300px;/*一定要写分号*/

background-color:blue;

border:2px solid red;

margin-left:300px;

margin-top:200px;

padding-left:100px;

}

div+css的快速体验案例：

test.html：

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN">

<html>

<head>

</head>

<body>

<table>

</table>

</div>

</body>

</html>

my.css中指定：

.style1{

width:300px;

height:200px;

border:1px solid red;

margin:100px 0px 0px 200px;

}

.style1 table{

border:1px solid black;

width:298px;

height:190px;

}

.style1 table td{

border: 1px solid black;

text-align:center;

}

Css的必要性

Css使用的基本语法: css部分可以单写一个文件(外联),也可以嵌入到html内部(内联)

选择器(

属性1:属性值;

属性2:属性值;

……

)

<html xmlns="http://www.w3.org/1999/xhtml"> 小块用span大块用div

<head>

</head>

<body>

</body>

</html>

/*.s1类选择器*/

.s1{

color:Green;

font-size:30px;

}

.s2{

color:gray;

font-size:12px;

}

.s3{

color:blue;

font-style:italic;

font-size:12px;

}

.s4{

color:green;

font-weight:bold;

}

.s5

{

color:#B427B9;

font-size:12px;

}

text-decoration:underline; 字体样式

使用<span>元素来编写

使用myeclipse来开发，因为myeclipse有提示功能

从使用span元素我们可以看到，css的基本语法

<元素名 style=”属性名：属性值；属性名：属性值2；”/>

元素可以是html的任意元素：

属性名：属性值要参考 w3c组织给出的参考文档

◆使用css可以统一网站的风格

css分类：外部css 内部css

<html>

<head>

.style1{

font-size: 20;

color: green;

font-style: normal;

font-weight: bold;

}

</style>

</head>

<body>

</body>

</html>

汶川大地震后所有网页图片变成了灰色

使用滤镜

/*使用滤镜将图片变成黑白色*/

img {

filter:gray;

}

</style>

/*使用滤镜*/

a:link img {

filter:gray; //默认的是灰色

}

a:hover img{ //鼠标悬浮，恢复颜色

filter:"";

}

</style>

</head>

<body>

</body>

Css内联使用

<head>

img{

filter:gray;

}

</style>

</head>

<body>

</body>

</html>

<head>

a:link img{

filter:gray;

}

a:hover img{

filter:"";

}

</style>

</head>

<body>

</body>

</html>

Css使用的基本语法: css部分可以单写一个文件(外联),也可以嵌入到html内部(内联)

选择器(

属性1:属性值;

属性2:属性值;

……

)

<html xmlns="http://www.w3.org/1999/xhtml"> 小块用span大块用div

<head>

</head>

<body>

</body>

</html>

/*.s1类选择器*/

.s1{

color:Green;

font-size:30px;

}

.s2{

color:gray;

font-size:12px;

}

.s3{

color:blue;

font-style:italic;

font-size:12px;

}

.s4{

color:green;

font-weight:bold;

}

.s5

{

color:#B427B9;

font-size:12px;

}

text-decoration:underline; 字体样式

使用<span>元素来编写

使用myeclipse来开发，因为myeclipse有提示功能

从使用span元素我们可以看到，css的基本语法

<元素名 style=”属性名：属性值；属性名：属性值2；”/>

元素可以是html的任意元素：

属性名：属性值要参考 w3c组织给出的参考文档

◆使用css可以统一网站的风格

css分类：外部css 内部css

<html>

<head>

.style1{

font-size: 20;

color: green;

font-style: normal;

font-weight: bold;

}

</style>

</head>

<body>

</body>

</html>

汶川大地震后所有网页图片变成了灰色

使用滤镜

/*使用滤镜将图片变成黑白色*/

img {

filter:gray;

}

</style>

/*使用滤镜*/

a:link img {

filter:gray; //默认的是灰色

}

a:hover img{ //鼠标悬浮，恢复颜色

filter:"";

}

</style>

</head>

<body>

</body>

Css内联使用

<head>

img{

filter:gray;

}

</style>

</head>

<body>

</body>

</html>

<head>

a:link img{

filter:gray;

}

a:hover img{

filter:"";

}

</style>

</head>

<body>

</body>

</html>

二.css的4种选择器 (css文件可以应用到各种文件中php/asp.net/jsp…..)

类选择器 id选择器 html元素选择器通配符选择器

1．类选择器(class选择器)的基本语法:

.类选择器名{ 点不能少

属性名:属性值;

…

}

my.css文件

.style1{

font-size: 20px;

font-weight: bold;

background-color: purple;

}

select1.html文件

</head>

<body>

2．id选择器

基本语法：

#id选择器名{

属性名：属性值；

}

案例：

#style2{

font-size: 30px;

background-color: skyblue;

}

<span id="id1">这是一则非常重要的新闻</span><br/>

在html文件中如果要引用id选择器，则

<元素 id=”id选择器的名称”></元素>

<span id="style2">这是一则重要的新闻</span>

3．Html选择器(html元素选择器)

/*html选择器body(button,input,form...)*/

body{

color:silver;

}

/*html选择器*/

body

{

color:Orange;

}

若同一种元素需要有不同的样式：则需要指定类然后再使用：方法如下：（该知识点非常有用）

/*html元素选择器对同一种html元素分类*/

p.cls1

{

color:red;

font-size:30px;

}

p.cls2

{

color:green;

font-size:30px;

}

<p>窗前明月光</p>

<p class="cls1">疑是地上霜</p>

<p class="cls2">举头望明月</p>

<p>低头思故乡</p>

结论：当一个元素同时被id选择器类选择器 html选择器修饰时，优先级为：

id选择器>类选择器>html选择器>通配符选择器

案例：假设，我们希望所有的超链接

默认样式是黑色，24px，没有下划线

当鼠标移动到超链接时，自动出现下划线

点击后，超链接变成红色。

my.css文件

a:link{

color:black;

font-size:24px;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

a:visited{

color:red;

}

html文件：

4．通配符选择器

/*通配符选择器*/

{

margin-top:0px;

margin-left:0px;

padding:0px;

}

查文档：外补丁

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。如果希望所有的元素都符合某一种样式，可以使用通配符选择器。

基本语法：

/*使用通配符选择器对外边距和内边距清零*/

margin: 0;

padding: 0;

}

/*margin: 0; 将外边距清零*/

/*margin-top:10px;分别设置四个方向的外边距

margin-left:10px;

margin-right:0px;

margin-bottom:opx;*/

/*margin:10px 0px 0px 10px;顺时针方向：上，右，下，左 */

margin:10px 0px 0px;/*10表示上，左右，下*/

padding: 0;/*将内边距清零，padding的规范跟margin一样/

}

四个选择器优先级：Id选择器>Class选择器>Html选择器>通配符选择器

5．父子选择器

针对：

my.css添加一个父子选择器

/*父子选择器*/

#style2 span{

font-style:italic;

color:red;

}

注意（1）子选择器标签必须是html可以识别的标记

（2）父子选择器可以有多级（实际开发中建议不要超过三层）其次父子选择器有严格的层级关系

#style2 span span{

font-size: 50px;

}

（3）父子选择器可以适用于id选择器和class选择器

父子选择器不局限与什么类型的选择器例如:#id span span .s1 #id span div #id .s2………………可以为任意的父子组合

（4）如果一个元素被id选择器和class选择器同时修饰时，id选择器的优先级>class选择器

（5）一个元素最多有一个id选择器，但是可以有多个类选择器

例

需求：希望新闻三下划线，同时斜体

方法1：可以给新闻三配置一个id选择器

方法2：再指定一个类选择器

my.css中添加

.style1{

font-size: 20px;

font-weight: bold;

background-color: green;

}

.style4{

font-style: italic;

text-decoration: underline;

}

Html文件中如何使用多个class选择器：

注意：

在引用多个class选择器的时候，用空格隔开

当class选择器发生冲突时，在css文件中，以最后出现在css文件中的class选择器样式为准

（6）在css文件中，如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，看案例：

案例：my.css

.ad_stu{

width :136px;

height:196px;

background-color:#FC7E8C;

margin:5px 0 0 5px;

float:left

}

/*广告2*/

.ad_2{

width :457px;

height:196px;

background-color:#7CF574;

margin:5px 0 0 6px;

float:left

}

/*房地产广告*/

.ad_house{

width :152px;

height:196px;

background-color:#7CF574;

margin:5px 0 0 5px;

float:left

}

在有些css中，我们可以把多个class选择器，id选择器，html选择器，共同的部分提取出来，写在一起，这样的好处是可以简化css文件

我们可以把上面的css文件改写成：

/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/

/*招生广告*/

.ad_stu{

width :136px;

background-color:#FC7E8C;

margin:5px 0 0 5px;

}

/*广告2*/

.ad_2{

width :457px;

background-color:#7CF574;

margin:5px 0 0 6px;

}

/*房地产广告*/

.ad_house{

height:196px;

background-color:#7CF574;

margin:5px 0 0 5px;

}

/*公共选择器*/

.ad_stu,.ad_2,.ad_house{

width :152px;

float:left

}

我们可以吧某个css文件中的选择器共有的部分，独立出来写一份，比如：以上案例

二.css的4种选择器 (css文件可以应用到各种文件中php/asp.net/jsp…..)

类选择器 id选择器 html元素选择器通配符选择器

1．类选择器(class选择器)的基本语法:

.类选择器名{ 点不能少

属性名:属性值;

…

}

my.css文件

.style1{

font-size: 20px;

font-weight: bold;

background-color: purple;

}

select1.html文件

</head>

<body>

2．id选择器

基本语法：

#id选择器名{

属性名：属性值；

}

案例：

#style2{

font-size: 30px;

background-color: skyblue;

}

<span id="id1">这是一则非常重要的新闻</span><br/>

在html文件中如果要引用id选择器，则

<元素 id=”id选择器的名称”></元素>

<span id="style2">这是一则重要的新闻</span>

3．Html选择器(html元素选择器)

/*html选择器body(button,input,form...)*/

body{

color:silver;

}

/*html选择器*/

body

{

color:Orange;

}

若同一种元素需要有不同的样式：则需要指定类然后再使用：方法如下：（该知识点非常有用）

/*html元素选择器对同一种html元素分类*/

p.cls1

{

color:red;

font-size:30px;

}

p.cls2

{

color:green;

font-size:30px;

}

<p>窗前明月光</p>

<p class="cls1">疑是地上霜</p>

<p class="cls2">举头望明月</p>

<p>低头思故乡</p>

结论：当一个元素同时被id选择器类选择器 html选择器修饰时，优先级为：

id选择器>类选择器>html选择器>通配符选择器

案例：假设，我们希望所有的超链接

默认样式是黑色，24px，没有下划线

当鼠标移动到超链接时，自动出现下划线

点击后，超链接变成红色。

my.css文件

a:link{

color:black;

font-size:24px;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

a:visited{

color:red;

}

html文件：

4．通配符选择器

/*通配符选择器*/

{

margin-top:0px;

margin-left:0px;

padding:0px;

}

查文档：外补丁

基本语法：

/*使用通配符选择器对外边距和内边距清零*/

margin: 0;

padding: 0;

}

/*margin: 0; 将外边距清零*/

/*margin-top:10px;分别设置四个方向的外边距

margin-left:10px;

margin-right:0px;

margin-bottom:opx;*/

/*margin:10px 0px 0px 10px;顺时针方向：上，右，下，左 */

margin:10px 0px 0px;/*10表示上，左右，下*/

padding: 0;/*将内边距清零，padding的规范跟margin一样/

}

四个选择器优先级：Id选择器>Class选择器>Html选择器>通配符选择器

5．父子选择器

针对：

my.css添加一个父子选择器

/*父子选择器*/

#style2 span{

font-style:italic;

color:red;

}

注意（1）子选择器标签必须是html可以识别的标记

（2）父子选择器可以有多级（实际开发中建议不要超过三层）其次父子选择器有严格的层级关系

#style2 span span{

font-size: 50px;

}

（3）父子选择器可以适用于id选择器和class选择器

父子选择器不局限与什么类型的选择器例如:#id span span .s1 #id span div #id .s2………………可以为任意的父子组合

（4）如果一个元素被id选择器和class选择器同时修饰时，id选择器的优先级>class选择器

（5）一个元素最多有一个id选择器，但是可以有多个类选择器

例

需求：希望新闻三下划线，同时斜体

方法1：可以给新闻三配置一个id选择器

方法2：再指定一个类选择器

my.css中添加

.style1{

font-size: 20px;

font-weight: bold;

background-color: green;

}

.style4{

font-style: italic;

text-decoration: underline;

}

Html文件中如何使用多个class选择器：

注意：

在引用多个class选择器的时候，用空格隔开

当class选择器发生冲突时，在css文件中，以最后出现在css文件中的class选择器样式为准

（6）在css文件中，如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，看案例：

案例：my.css

.ad_stu{

width :136px;

height:196px;

background-color:#FC7E8C;

margin:5px 0 0 5px;

float:left

}

/*广告2*/

.ad_2{

width :457px;

height:196px;

background-color:#7CF574;

margin:5px 0 0 6px;

float:left

}

/*房地产广告*/

.ad_house{

width :152px;

height:196px;

background-color:#7CF574;

margin:5px 0 0 5px;

float:left

}

在有些css中，我们可以把多个class选择器，id选择器，html选择器，共同的部分提取出来，写在一起，这样的好处是可以简化css文件

我们可以把上面的css文件改写成：

/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/

/*招生广告*/

.ad_stu{

width :136px;

background-color:#FC7E8C;

margin:5px 0 0 5px;

}

/*广告2*/

.ad_2{

width :457px;

background-color:#7CF574;

margin:5px 0 0 6px;

}

/*房地产广告*/

.ad_house{

height:196px;

background-color:#7CF574;

margin:5px 0 0 5px;

}

/*公共选择器*/

.ad_stu,.ad_2,.ad_house{

width :152px;

float:left

}

我们可以吧某个css文件中的选择器共有的部分，独立出来写一份，比如：以上案例

见test2.html

一个元素可以同时拥有id选择器和类选择器：但是id选择器最多只能有一个（但是因为Id选择器的优先级高于类选择器

所有两个选择器共有的属性，冲突时：显示的时候显示的是优先级高的选择器限制的属性）

/*对新闻一做一个特别的修饰

(一个元素可以拥有多个id选择器和类选择器

id选择器最多只能有一个，类选择器可以有多个)*/

#news_special

{

color:Red;

font-size:100px;

}

.s1

{

color:Gray;

font-size:30px;

font-style:italic;

}

一个元素可以有多个类选择器：使用方法如下

.s3

{

color:green;

font-weight:bold;

}

/*多个类选择器*/

.cls1

{

font-style:italic;

text-decoration:underline;

color:yellow;

}

两个类选择器冲突时：类选择器在.css文件中出现的先后顺序：声明在后面的属性是冲突属的老大

选择器的深入探讨：

多个css文件可以单独拿出来，减少css的冗余

Css文件本身也会被浏览器从服务器下载到本地，才能显示效果

6．块元素和行内元素—区别

（1）行内元素，又叫内联元素

内联元素只能容纳文本或者其他内联元素（不同浏览器可能允许），常见内联元素<span> <a> <input>

特点是：只占内容的宽度，默认不换行，行内元素一般放文本或者其它的行内元素。

（2）块元素

块元素一般都从新行开始，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把正行占满，常见块元素 <div> <p>

特点：不管内容有多少，都要换行，同时占满整行，块元素可以放文本，行内元素，块元素。

（3）一些css属性对行内元素不生效，比如margin，left，right，width，height，建议尽可能使用块元素定位（div定位）。（与浏览器类版本和类型有关）

.s1{

background-color: silver;

font-size:20px;

}

.s2{

background-color: skyblue;

font-size:30px;

font-style: italic;

}

Div块元素会占据整行

小结：从案例我们看出，行内元素（span）它只显示自己内容的宽度，而且它不会占据整行；

块元素（div）它不管自己的内容有多少，会占据整行，而且会换行显示

常见的行内元素：<a> <span> <input type=”xxx”/>

常见的块元素：<div> <p>

<head>

</head>

<body>

4）块元素和行内元素的转换

如果我们希望一个元素按照块元素的方式显示，则： display：block；

也可以写到css中

如果我们希望一个元素按照行内元素的方式显示，则： display：inline；

<div style=”display：inline;” class=”s2”>hello</div>

.s1

{

background-color:Pink;

display:block;

}

.s2

{

background-color:Gray;

display:inline;

}

<body>

<p style="background-color:red">这是一个段落</p>

</body>

注意：css文件也不区分大小写（与html类似）

Css文件可以共用：css文件之间相互引用的指令：@import url(“被引用的css文件”)

css核心内容-----流

标准流/非标准流

标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素，显示在后面，这是默认的布局方式，也称标准流。

非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素脱离它本身的位置）。

css盒子模型

盒子模型的原理图

标准流/非标准流

标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素，显示在后面，这是默认的布局方式，也称标准流。

非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素脱离它本身的位置）。

css盒子模型

盒子模型的原理图

盒子模型的经典案例：

语法：

盒子模型的经典案例：

语法：

border : border-width || border-style || border-color

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

body

{

border:1px solid red;/*1px表示边框的宽度solid实线 red表示颜色

顺序无所谓*/

width:300px;

height:500px;

/*如何让body自动居中*/

margin:0 auto;/*第一个参数用于上下，第二个参数用于左右。auto表示自动居中*/

font-size:13px;

}

/*盒子模型的概念：margin padding border content*/

.div1

{

width:52px;

height:72px;

border:1px solid blue;

/* margin-top:5px;

margin-left:5px; border-bottom:1px solid blue;*/

margin:5px 0px 0px 5px;

/*padding-top:5px;/*padding 填充会自适应，导致盒子div变大为了不破坏div不适用padding

于是可以认为img也是一个盒子*/

padding:2px;

}

.div1 img

{

width:48px;

height:50px;

margin-top:5px;

margin-left:2px;

}

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

<head>

<title>盒子模型案例</title>

</head>

<body>

</div>

</body>

</html>

细节说明：

1）html元素都可以看成一个盒子

盒子模型的参照物不一样，则使用的css属性不一样，比如从div1的角度看，是margin-right，从div2的角度看，则是margin-left

3）如果不希望破坏整个外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化

案例:

Box1.html:

Html版本要改成下面的：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Box1.css：

body{

border:1px solid red;/*这里我们给body指定了宽度，样式，颜色（顺序可以随意）*/

width: 800px;

height:1000px;

margin:0 auto;/*0表示上下边距为0，auto左右自动居中*/

}

.s1{

border:1px solid blue;

width:80px;

height:70px;

margin-top: 10px;

margin-left: 10px;

}

.s1 img{

width:60px;

height:60px;

margin-left: 10px;

margin-top: 5px;

}

盒子模型的综合案例（可以当做一个模板来使用）

border : border-width || border-style || border-color

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

body

{

border:1px solid red;/*1px表示边框的宽度solid实线 red表示颜色

顺序无所谓*/

width:300px;

height:500px;

/*如何让body自动居中*/

margin:0 auto;/*第一个参数用于上下，第二个参数用于左右。auto表示自动居中*/

font-size:13px;

}

/*盒子模型的概念：margin padding border content*/

.div1

{

width:52px;

height:72px;

border:1px solid blue;

/* margin-top:5px;

margin-left:5px; border-bottom:1px solid blue;*/

margin:5px 0px 0px 5px;

/*padding-top:5px;/*padding 填充会自适应，导致盒子div变大为了不破坏div不适用padding

于是可以认为img也是一个盒子*/

padding:2px;

}

.div1 img

{

width:48px;

height:50px;

margin-top:5px;

margin-left:2px;

}

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

<head>

<title>盒子模型案例</title>

</head>

<body>

</div>

</body>

</html>

细节说明：

1）html元素都可以看成一个盒子

盒子模型的参照物不一样，则使用的css属性不一样，比如从div1的角度看，是margin-right，从div2的角度看，则是margin-left

案例:

Box1.html:

Html版本要改成下面的：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Box1.css：

body{

border:1px solid red;/*这里我们给body指定了宽度，样式，颜色（顺序可以随意）*/

width: 800px;

height:1000px;

margin:0 auto;/*0表示上下边距为0，auto左右自动居中*/

}

.s1{

border:1px solid blue;

width:80px;

height:70px;

margin-top: 10px;

margin-left: 10px;

}

.s1 img{

width:60px;

height:60px;

margin-left: 10px;

margin-top: 5px;

}

盒子模型的综合案例（可以当做一个模板来使用）

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

<head>

</head>

<body>

</ul>

</div>

</body>

</html>

.div1

{

width:500px;

height:300px;

border:1px solid gray;

font-size:12px;

}

.faceul

{

width:405px;

height:250px;

border:1px solid red;

padding-left:5px; ul会有个左边的填充

margin-left:5px;

}

.faceul li

{

list-style:none; 没有li那个点

float:left;/*左浮动,后面会说这个问题*/

width:50px;

height:56px;

border:1px solid red;

margin-left:10px;

margin-top:5px;

}

.faceul li img

{

width:40px;

height:40px;

}

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

<head>

</head>

<body>

</ul>

</div>

</body>

</html>

.div1

{

width:500px;

height:300px;

border:1px solid gray;

font-size:12px;

}

.faceul

{

width:405px;

height:250px;

border:1px solid red;

padding-left:5px; ul会有个左边的填充

margin-left:5px;

}

.faceul li

{

list-style:none; 没有li那个点

float:left;/*左浮动,后面会说这个问题*/

width:50px;

height:56px;

border:1px solid red;

margin-left:10px;

margin-top:5px;

}

.faceul li img

{

width:40px;

height:40px;

}

补充：background

background

语法：

background : background-color || background-image || background-repeat || background-attachment || background-position

取值：

该属性是复合属性。请参阅各参数对应的属性。
默认值为：transparent none repeat scroll 0% 0%。

说明：

设置对象的背景样式。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如：设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了background-image属性，则其设置将被background-image的默认值 none 覆盖。
背景样式属性的作用区域为对象的内容区域与内补丁(padding)区域。不包括边框(border)与外补丁(margin)区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为 background 。

background:url("../images/cat3.jpg"); 这样的使用效果是要平铺的x，y均会平铺若要限制不平铺需要后面跟参数 norepeat

background:url("../images/cat3.jpg") no-repeat;

background-repeat版本：CSS1 兼容性：IE4+ NS4+ 继承性：无

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

取值：

repeat	:	默认值。背景图像在纵向和横向上平铺
no-repeat	:	背景图像不平铺
repeat-x	:	背景图像仅在横向上平铺
repeat-y	:	背景图像仅在纵向上平铺

分析思路：基本结构

<div>

<ul>

</ul>

</div>

Boxzong.html文件 float2.html也实现了这个页面 用不同的方法

<body>

</ul>

</div>

</body>

Boxzong.css文件

body{

margin: 0;

padding: 0;

}

/*最外面的*/

.s1{

border: red solid 1px;

width:600px;

height:400px;

margin-top: 20px;

margin-left: 100px;

}

/*控制整个图片的区域*/

.s2{

border: red solid 1px;

width:500px;

height:300px;

margin-top: 10px;

margin-left: 20px;

list-style-type: none; /*将点清除*/

padding: 0;

}

/*控制单个图片区域*/

.s2 li{

width:80px;

height:100px;

margin-top: 10px;

margin-left: 10px;

border: red solid 1px;

float: left;/*左浮动*/

}

.s2 a{

margin-left: 15px;

}

/*控制图片的*/

.s2 li img{

width:60px;

height:60px;

margin-top: 10px;

margin-left: 10px;

}

案例：

补充：background

background

语法：

background : background-color || background-image || background-repeat || background-attachment || background-position

取值：

该属性是复合属性。请参阅各参数对应的属性。
默认值为：transparent none repeat scroll 0% 0%。

说明：

设置对象的背景样式。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如：设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性，则其设置将被 background-image 的默认值 none 覆盖。
背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为 background 。

background:url("../images/cat3.jpg"); 这样的使用效果是要平铺的x，y均会平铺若要限制不平铺需要后面跟参数 norepeat

background:url("../images/cat3.jpg") no-repeat;

background-repeat版本：CSS1 兼容性：IE4+ NS4+ 继承性：无

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

取值：

repeat	:	默认值。背景图像在纵向和横向上平铺
no-repeat	:	背景图像不平铺
repeat-x	:	背景图像仅在横向上平铺
repeat-y	:	背景图像仅在纵向上平铺

分析思路：基本结构

<div>

<ul>

</ul>

</div>

Boxzong.html文件 float2.html也实现了这个页面 用不同的方法

<body>

</ul>

</div>

</body>

Boxzong.css文件

body{

margin: 0;

padding: 0;

}

/*最外面的*/

.s1{

border: red solid 1px;

width:600px;

height:400px;

margin-top: 20px;

margin-left: 100px;

}

/*控制整个图片的区域*/

.s2{

border: red solid 1px;

width:500px;

height:300px;

margin-top: 10px;

margin-left: 20px;

list-style-type: none; /*将点清除*/

padding: 0;

}

/*控制单个图片区域*/

.s2 li{

width:80px;

height:100px;

margin-top: 10px;

margin-left: 10px;

border: red solid 1px;

float: left;/*左浮动*/

}

.s2 a{

margin-left: 15px;

}

/*控制图片的*/

.s2 li img{

width:60px;

height:60px;

margin-top: 10px;

margin-left: 10px;

}

案例：

分析思路：

具体写页面的顺序：

1先写html文件，先搞定页面内容，

2再写css文件控制样式

我们在网页设计中常用的<!DOCTYPE>有两种

HTML Trasitional DTD

XHTML Trational DTD

如何做到不同浏览器的兼容。

在ie5.5 6 7上ul有一个默认的margin-left值

浮动

浮动是一个重要的概念：分为左浮动，右浮动，清除浮动。

浮动必要性，因为默认情况下，div纵向排列：

Float1.html文件

Float1.css文件

body{

border:1px solid silver;

width: 800px;

height:1000px;

margin:0 auto;

}

.div1{

border:1px solid blue;

background-color: pink;

width:150px;

height:100px;

margin-top: 10px;

margin-left: 10px;

}

如果希望div1向右面显示，这时我们使用右浮动：当div1向右浮动时,它脱离标准流并且向右移动(让出自己的位置),直到它的右边缘碰到包含框的右边缘

所谓右浮动(所谓浮动只有块元素才会生效):指一个元素向右移动,让出自己的空间,向右移动直到碰到包含自己的父元素的最右边的边框.

Float1.html文件

Float1.css文件中只许添加一个id选择器

#div2{

float:right; /*使该元素尽量向右移动，直到碰到父元素的右边界*/

}

如果我们希望，所有的元素，横向排列，则使用到左浮动：

这时，对div1的css添加：

float：left；让出自己右边的空间使下一个元素使用

特别注意：如果一行宽度不够排下所有的div，则会自动换行：

当然，如果有某个div的过大，则会卡住别的div(理解：6div认为前面有个div 如果高度异常发生在2div

则6div会往后面排)如果浮动元素高度不同，那么当他们向下移动时可能别其他浮动元素“卡住”

直到有足够的空间

具体写页面的顺序：

1先写html文件，先搞定页面内容，

2再写css文件控制样式

我们在网页设计中常用的<!DOCTYPE>有两种

HTML Trasitional DTD

XHTML Trational DTD

如何做到不同浏览器的兼容。

在ie5.5 6 7上ul有一个默认的margin-left值

浮动

浮动是一个重要的概念：分为左浮动，右浮动，清除浮动。

浮动必要性，因为默认情况下，div纵向排列：

Float1.html文件

Float1.css文件

body{

border:1px solid silver;

width: 800px;

height:1000px;

margin:0 auto;

}

.div1{

border:1px solid blue;

background-color: pink;

width:150px;

height:100px;

margin-top: 10px;

margin-left: 10px;

}

如果希望div1向右面显示，这时我们使用右浮动：当div1向右浮动时,它脱离标准流并且向右移动(让出自己的位置),直到它的右边缘碰到包含框的右边缘

所谓右浮动(所谓浮动只有块元素才会生效):指一个元素向右移动,让出自己的空间,向右移动直到碰到包含自己的父元素的最右边的边框.

Float1.html文件

Float1.css文件中只许添加一个id选择器

#div2{

float:right; /*使该元素尽量向右移动，直到碰到父元素的右边界*/

}

如果我们希望，所有的元素，横向排列，则使用到左浮动：

这时，对div1的css添加：

float：left；让出自己右边的空间使下一个元素使用

特别注意：如果一行宽度不够排下所有的div，则会自动换行：

当然，如果有某个div的过大，则会卡住别的div(理解：6div认为前面有个div 如果高度异常发生在2div

则6div会往后面排)如果浮动元素高度不同，那么当他们向下移动时可能别其他浮动元素“卡住”

直到有足够的空间

特别强调：浮动对块元素和行内元素都是生效的。

一排块,要浮动就全部都浮动,否则会出现诡异的现象

例如:

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

<head>

</head>

<body>

</div>

</body>

</html>

特别强调：浮动对块元素和行内元素都是生效的。

一排块,要浮动就全部都浮动,否则会出现诡异的现象

例如:

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

<head>

</head>

<body>

</div>

</body>

</html>

? 如果使用浮动属性：则该元素不管是不是块元素，都会按照 display: block来显示.

小总结:

你可以这么理解浮动:如果一个元素右/左浮动则:

①它本身会尽可能向右/左移动，直到碰到边框或者

别的浮动元素,特别强调浮动对块元素和行内元素都

生效!

②元素向右/左浮动，就相当于让出自己的左/右边,别

的元素就会在它的左/右边排列。

再一个案例:

字包图小案例：

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<body>

<img style="float:left;margin-right:5px;" src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发

</body>

</html>

如何清除浮动，我们在项目中说明

知识点：

如果一个元素一旦被浮动修饰了，则相当于该元素会以display：block来显示

如果使用了浮动，则该元素不管是不是块元素，都会按照display：block来显示

清除浮动：如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法

Clear：right；clear：left；clear：both

css定位

css的定位有以下几种：4

1.static定位

这个是默认的方式，对static而言，left和right是不生效的。

2.relative定位（相对定位）

元素框偏离某个位置（left 和 top），元素仍然保持为定位前的形状，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流中一样。

特别说明：1.relative的参照点是它原来的位置，进行移动

案例：

改为：

? 如果使用浮动属性：则该元素不管是不是块元素，都会按照 display: block来显示.

小总结:

你可以这么理解浮动:如果一个元素右/左浮动则:

①它本身会尽可能向右/左移动，直到碰到边框或者

别的浮动元素,特别强调浮动对块元素和行内元素都

生效!

②元素向右/左浮动，就相当于让出自己的左/右边,别

的元素就会在它的左/右边排列。

再一个案例:

字包图小案例：

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<body>

<img style="float:left;margin-right:5px;" src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发

</body>

</html>

如何清除浮动，我们在项目中说明

知识点：

如果一个元素一旦被浮动修饰了，则相当于该元素会以display：block来显示

如果使用了浮动，则该元素不管是不是块元素，都会按照display：block来显示

清除浮动：如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法

Clear：right；clear：left；clear：both

css定位

css的定位有以下几种：4

1.static定位

这个是默认的方式，对static而言，left和right是不生效的。

2.relative定位（相对定位）

特别说明：1.relative的参照点是它原来的位置，进行移动

案例：

改为：

代码：

<body>

</body>

在css中：

.style1{

width:100px;

height:70px;

background-color:silver;

float:left;

margin-left:10px;

}

#special{

position:relative; /*使用相对定位*/

left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/

top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/

}

从以上案例我们可以看出：所谓相对定位，是指相对该元素应当显示的左上角重新定位，虽然它脱离了标准流但是它的空间

不能被占用

代码：

<body>

</body>

在css中：

.style1{

width:100px;

height:70px;

background-color:silver;

float:left;

margin-left:10px;

}

#special{

position:relative; /*使用相对定位*/

left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/

top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/

}

从以上案例我们可以看出：所谓相对定位，是指相对该元素应当显示的左上角重新定位，虽然它脱离了标准流但是它的空间

不能被占用

3.absolute定位（绝对定位）

相当于元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。

改为：

代码：

<body>

<divclass="style1">内容一</div>

<divclass="style1">内容三</div>

<divclass="style1">内容四</div>

</body>

在css中：

.style1{

width:100px;

height:70px;

background-color:silver;

float:left;

margin-left:10px;

}

#special{

position:absolute;/*使用绝对定位*/

left:40px; /*（正数）向右移动的大小（如果希望向左移动，则值就是负数）*/

top:100px; /*（正数）向下移动的大小（如果希望向上移动，则值就是负数）*/

}

从上图看，所谓绝对定位是指：对该元素最近的那个脱离了标准流的元素定位

如果没有父元素，则相对于body左上角定位

特别说明：

这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。

案例说明：

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

<head>

</head>

<body>

将内容2包在测试里面

内容3

</div>

内容4

</div>

测试

内容2

</div>

</body>

</html>

运行结果不会有任何变化

内容1

</div>

内容2

内容3

</div>

内容4

</div>

测试

</div>

</body>

</html>

.div1

{

width:70px;

height:30px;

background:pink;

float:left;

margin-left:5px;

}

#special

{

position:absolute;/*相对原来应该在的位置重新定位*/

left:40px;

top:100px;

}

.div2

{

width:200px;

height:150px;

background:green;

float:left;

}

运行结果为：

但是如果更改div2 position：relative(脱离标准流的位置) left:100px; top:100px;

.div2

{

width:200px;

height:150px;

background:green;

float:left;

position:relative;

left:100px;

top:100px;

}

解释：（怎么理解：这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。）

如果没有父元素，（或者有父元素，但是父元素没有脱离标准流）则相对于body左上角定位

4.fixed定位

元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

.div1

{

width:70px;

height:30px;

background:pink;

float:left;

3.absolute定位（绝对定位）

相当于元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。

改为：

代码：

<body>

<divclass="style1">内容一</div>

<divclass="style1">内容三</div>

<divclass="style1">内容四</div>

</body>

在css中：

.style1{

width:100px;

height:70px;

background-color:silver;

float:left;

margin-left:10px;

}

#special{

position:absolute;/*使用绝对定位*/

left:40px; /*（正数）向右移动的大小（如果希望向左移动，则值就是负数）*/

top:100px; /*（正数）向下移动的大小（如果希望向上移动，则值就是负数）*/

}

从上图看，所谓绝对定位是指：对该元素最近的那个脱离了标准流的元素定位

如果没有父元素，则相对于body左上角定位

特别说明：

这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。

案例说明：

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

<head>

</head>

<body>

将内容2包在测试里面

内容3

</div>

内容4

</div>

测试

内容2

</div>

</body>

</html>

运行结果不会有任何变化

内容1

</div>

内容2

内容3

</div>

内容4

</div>

测试

</div>

</body>

</html>

.div1

{

width:70px;

height:30px;

background:pink;

float:left;

margin-left:5px;

}

#special

{

position:absolute;/*相对原来应该在的位置重新定位*/

left:40px;

top:100px;

}

.div2

{

width:200px;

height:150px;

background:green;

float:left;

}

运行结果为：

但是如果更改div2 position：relative(脱离标准流的位置) left:100px; top:100px;

.div2

{

width:200px;

height:150px;

background:green;

float:left;

position:relative;

left:100px;

top:100px;

}

解释：（怎么理解：这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。）

如果没有父元素，（或者有父元素，但是父元素没有脱离标准流）则相对于body左上角定位

4.fixed定位

元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

.div1

{

width:70px;

height:30px;

background:pink;

float:left;

margin-left:5px;

}

#special

{

/*position:absolute;/*相对原来应该在的位置重新定位*/

position:fixed;

left:40px;

top:100px;

}

.div2

{

width:200px;

height:150px;

background:green;

float:left;

position:relative;

left:100px;

top:100px;

}

不管包不包我，我永远相对于body左上角定位

所谓fixed定位就是不管怎样，总是以视窗的左上角定位

Left 或者top属性对static没有效果：

例如给div1设置一个id选择器special2

内容1

</div>

#special2

{

left:30px;

top:20px;

}

此时的div1是static的，此时div1不会有任何变化，

Static定位是靠margin-left和margin-top来移动位置的

Z-index:设置对象层叠顺序：用于设置对象（div）显示的时候层叠的顺序，z-index值越小则越在下层显示

margin-left:5px;

}

#special

{

/*position:absolute;/*相对原来应该在的位置重新定位*/

position:fixed;

left:40px;

top:100px;

}

.div2

{

width:200px;

height:150px;

background:green;

float:left;

position:relative;

left:100px;

top:100px;

}

不管包不包我，我永远相对于body左上角定位

所谓fixed定位就是不管怎样，总是以视窗的左上角定位

Left 或者top属性对static没有效果：

例如给div1设置一个id选择器special2

内容1

</div>

#special2

{

left:30px;

top:20px;

}

此时的div1是static的，此时div1不会有任何变化，

Static定位是靠margin-left和margin-top来移动位置的

Z-index:设置对象层叠顺序：用于设置对象（div）显示的时候层叠的顺序，z-index值越小则越在下层显示

跟着传智播客学习asp.net之DIV+CSS,布布扣,bubuko.com

时间： 2024-09-30 09:51:17

跟着传智播客学习asp.net之DIV+CSS

跟着传智播客学习asp.net之DIV+CSS的相关文章

传智播客学习之ASP.net基础第四天

传智播客学习之ASP.net基础第九天--注册页面

传智播客学习之ASP.net基础第六天

传智播客学习之ASP.net基础第七天

传智播客学习之ASP.net基础第五天

【高清未加密】2015传智播客最新21期c#asp.net 基础到就业班视频和源码

为什么我要来传智播客！

来传智播客的目的

为什么要来传智播客