html第一个网页

<!DOCTYPE html> <html> <head><meta charset="UTF-8"> <title>我的主页</title></head><body> <p>你好!欢迎访问我的个人主页!</p></body></html>

设置网页在IE上观看时，以IE的最高版本渲染网页

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>

标签的的使用方法：

<h1>h1标题</h1><div>这是一个div标签</div><p>这个一个段落标签</p><br><img src="images/pic.jpg" alt="图片"><img src="images/pic.jpg" alt="图片"><a href="http://www.baidu.com">百度网</a><div><img src="images/pic.jpg" alt="图片"><a href="http://www.baidu.com">百度网</a></div>

块元素标签(行元素)和内联元素标签(行内元素)

标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：
块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开，元素之间默认有小间距，而且是基线对齐(文字底部对齐)。

常用块元素标签

1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

默认加粗，还有默认间距

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body></html>

2、段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距–默认不会换行只能用

<br>标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，<br>本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和团<br>队协作精神，良好的沟通能力和社交能力，善于处理各种人际关系。<br>能迅速适应环境，并融入其中。</p><p>这是第二个段落</p>> <p><span class="token entity named-entity" title="<p">>是一个段落标签<p></body></html>

3、通用块容器标签—没有语义，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

<div>块容器标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=<device-width, initial-scale=1.0"><title>Document</title></head><body><div>这是第一个div</div><div>这是第二个div</div><div><h3>这是一个h3标签</h3><p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p></div></body></html>

常用内联元素标签—-底部对齐

1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线

<a href="02.html">第二个网页</a><a href="http://www.baidu.com">百度网</a><a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a><a href="#">默认链接</a>

2、通用内联容器标签，具有内联元素基本特性，没有其他默认样式—span标签没有语义，一行文字里面的一小段文字。–主要用到样式里面

<p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>

3、图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。

<img src="images/pic.jpg" alt="图片" />
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><a href="常用块元素标签.html">去常用块元素</a><a href="http://www.baidu.com">百度网</a><a href="#">默认不确定的地址</a><a href="http://www.baidu.com"><img src="images/logo.png" alt="ziyelogo" width="100"></a><img src="images/logo.png" alt="ziyelogo" width="100"><span>这是一个span标签</span><p>本人叫张山，毕业于某大学<span>计算机科学与技术专业</span>，今年23岁,本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和</p></body></html>

网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。

布局示例

根据网页布局的原理以及上面的实例，写出网页的html结构代码。

标签语义化

在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
带语义的标签
1、h1~h6：表示标题
2、p：表示段落
3、img：表示图片
4、a：表示链接

不带语义的标签
1、div：表示一块内容
2、span：表示行内的一块内容

所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。

布局原理–一

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title></head><body><div><div><div>今日头条</div><div>更多">>">></div></div><div><img src="images/banner.jpg" alt="banner"></div><div><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p></div></div></body></html>

布局原理优化–二

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><div><h3>今日头条</h3><a href="#">更多">>">></a></div><img src="images/banner.jpg" alt="banner"><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p></div></body></html>

css概述

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css基本语法

css的定义方法是：

选择器 { 属性：值； 属性：值； 属性：值；}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：

/* 样式中注释的写法，单行或者多行注释 */div{ width:100px; height:100px; background:gold; }

css引入方式

css引入页面的方式有三种：

1、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; background:red ">......</div>

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

div{ width:100px; height:100px; background:red }......

3、外链式：通过link标签，链接外部样式文件到页面中。

"stylesheet" type="text/css" href="css/main.css">
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/main.css"><style>div{width: 200px;height: 200px;background: red;}</style></head><body> <h3 style="width: 200px; height: 200px; background: gold;">这是一个h3标题</h3><div>这是一个div</div><p>这是一个段落</p></body></html>

css文件中的main.css

p{width:200px;height:200px;background:orange}

css选择器一

1、标签选择器
标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
举例：

div{color:red} ......这是第一个div 这是第二个div

2、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold} ......"blue">....<h3 class="blue big box">....
"blue box">....

3、层级选择器
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
举例：

.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}......"con">...."#" class="pink">...."#" class="gold">......."#" class="pink">....
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义标签选择器，标签选择器会影响所有的同类型的标签，一般比较少用*/div{color:red}/* 定义类选择器 一个类可以用在多个标签上，一个标签可以用多个类，是使用最多的一种选择器*/.blue{color:blue}/* font-size 文字大小 */.big{font-size: 30px;}/* 定义层级选择器 */.blue span {color:purple;font-size: 20px;}</style></head><body><div>这是一个div</div><div>这是第二个div</div><p class="blue">这是一个p标签</p><p class="big blue">这是第二个p标签</p><p class="blue">本人叫张山，毕业于某大学<span>计算机科学与技术专业</span>，今年23岁,本人性格开朗、稳重、待人真诚、热情。有较强的组织能力和</p><span>外面的span</span></body></html>

盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置宽高

width:200px;/* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框
设置一边的边框，比如顶部边框，可以按如下设置：

border-top:10px solid red;

其中10px表示线框的粗细；solid表示线性。

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /* 设置左边内间距30px */ padding-right:40px;/* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */

设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

  1. 盒子宽度 = width + padding左右 + border左右
  2. 盒子高度 = height + padding上下 + border上下

设置元素浮动属性float
浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

设置元素背景属性background
设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=<device-width, initial-scale=1.0"><title>Document</title><style>.box{/* 设置盒子内容的宽度 */width: 300px;/* 设置高度 */height: 300px;/* 设置背景色 */background: gold;/* 设置顶部边框边框的线型:solid 实线dashed 虚线dotted 点线*//* border-top: 10px solid black; *//* 设置左边的边框 *//* border-left: 10px dashed black; *//* 设置右边的边框 *//* border-right: 10px dotted black; *//* 设置底部的边框 *//* border-bottom: 10px solid black; *//* 同时设置四个边框 */border:10px solid black;/* 设置内边距 *//* 设置顶部内边距 *//* padding-top: 20px; *//* 设置左边的内边距 *//* padding-left: 40px; *//* 设置右边的内边距 *//* padding-right: 80px; */ /* 设置底边的内边距 */ /* padding-bottom: 160px; */ /* 分别设置四个边的内边距可以合在一起写： *//* 分别设置（顺时针方向）上边右边 下边左边 的padding值 */ /* padding: 20px 80px 160px 40px; */ /* 分别设置上边，左右边，下边的padding的值 */ /* padding: 20px 80px 160px; */ /* 分别设置上下边，左右边的padding */ /* padding: 20px 80px; */ /* 同时设置四个边的padding值 */ padding: 20px; /* 设置外边距 */ /* 设置顶部外边距 */ /* margin-top: 20px; */ /* 设置左边的外边距 */ /* margin-left: 40px; */ /*设置右边的外边距*/ /* margin-right: 80px; */ /* 设置底部的外边距 */ /* margin-bottom: 160px; */ /* 分别设置四个边的外边距可以合在一起写： *//* 分别设置（顺时针方向）上边右边 下边左边 的margin值 *//* margin:20px 80px 100px 40px; *//* 分别设置上边左右边 下边 的margin值 */margin:20px 80px 160px;/* 分别设置上下边左右边的margin值 *//* margin:20px 80px; *//* 同时设置四个边的margin值 */margin:20px;}</style></head><body><div class="box">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。</div><div>下边的div</div></body></html>

css文本属性

  1. color 设置文字的颜色，如： color:red;
  2. font-size 设置文字的大小，如：font-size:12px;
  3. font-family设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
  4. font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal设置不加粗
  5. line-height 设置文字的行高，如：line-height:24px;表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
  6. text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  7. text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  8. text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

css布局演示

通过样式，并且参照下图，可以把之前写的布局做进一步的调整，完成最终的布局效果：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>/* 设置边框 */ .news_con{width:285px;height: 310px;/* 设置顶部边框 */border-top: 1px solid #c8dcf2;/* 设置底部边框 */border-bottom: 1px solid #c8dcf2;}.news_con div{/* 宽度width不用设置，默认等于父级的宽度 */height: 40px;}/* 层级选择器可以越级选择 */.news_con h3{/* 设置浮动，让h3和a标签可以排列在一行 */float: left;/*清除h3标题默认的外边距*/margin: 0px;/* 设置文字颜色 */color:#172c45;/* 设置文字大小 */font-size: 16px;/* 设置文字字体 */font-family: 'Microsoft YaHei';/* 设置文字不加粗 */font-weight: normal;/* 通过设置行高来将单行文字垂直居中 上下高度+文字间距等于40px*/line-height: 40px; }.news_con a{float:right;/* 设置文字颜色 */color:#172c45;/* 设置文字大小 */font-size:12px;/* 设置文字字体 */font-family: 'Microsoft YaHei';/* 通过设置行高来将单行文字垂直居中 */line-height:40px;/* 去掉文字默认的下划线 */text-decoration:none;}.news_con p{/* 设置文字颜色 */color: #737373;/* 设置文字大小 */font-size: 12px;line-height: 20px;/* 设置首行缩进 */text-indent: 24px;/* 清除p标签默认的外边距 */margin: 0px;margin-top: 10px;} </style></head><body><div class="news_con"><div><h3>今日头条</h3><a href="#">更多">>">></a></div><img src="images/banner.jpg" alt="banner"><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p></div></body></html>

块元素居中技巧
块元素如果想设置相对页面水平居中，可以使用margin值中的auto关键字，“auto”只能用于左右的margin设置，不能用于上下的：

.box{width:300px;height:300px;background:gold;margin-left:0px;margin-top:0px;margin-left:auto;margin-right:auto;}

简写如下：

.box{ width:300px; height:300px; background:gold; margin:0px auto;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清除body标签默认的外边距 */body{margin: 0px;}.con{width: 300px;height: 300px;border: 1px solid black;/* 相对于整个页面(body)居中 */margin: 0px auto;}.box{width: 200px;height: 80px;background: gold;/* margin-left: auto;margin-right: auto;margin-top: 0px;margin-bottom: 0px; *//* margin: 0px auto 0px auto; */margin: 0px auto;}</style></head><body><div class="con"><div class="box"></div></div></body></html>

相对地址与绝对地址

网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：

<img src="images/001.jpg" alt="图片" /><a href="002.html">链接到网页2</a><link rel="stylesheet" type="text/css" href="css/main.css" /><script type="text/javascript" src="js/jquery.js"></script>

这些地址分为相对地址和绝对地址:

相对地址
相对于引用文件本身去定位被引用的文件地址，以上的例子都是相对地址，相对地址的定义技巧：

  1. “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
  2. “ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg”表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

绝对地址
相对于磁盘的位置去定位文件的地址，比如：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.search_form{width: 602px;height: 42px;background: gold;margin: 100px auto; }.input_txt{width: 500px;height: 40px;border: 1px solid #0fad10; /* 通过浮动解决内联元素默认间距以及基线对齐的问题 */ float: left; /* 清除输入框默认的padding值 */ padding: 0px; /* 让文字缩进 */ text-indent: 10px; /* 去掉输入框点击时显示的高亮框 */ outline: none;}.input_sub{width: 100px;height: 42px;background: #0fad10;/* 去掉按钮默认的边框 */border: 0px;/* 通过浮动解决内联元素默认间距以及基线对齐的问题 */float: left;/* 设置文字和颜色 */font-size: 18px;color: white;}</style></head><body><form class="search_form" action="https://cn.bing.com/search"><input type="text" class="input_txt" placeholder="请输入搜索文字"><input type="submit" value="搜 索" class="input_sub"></form></body></html>

定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

  • relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
  • absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

伪代码如下:

.box01{......position:absolute;/* 设置了绝对定位 */left:200px;/* 相对于参照元素左边向右偏移200px */top:100px;/* 相对于参照元素顶部向下偏移100px */z-index:10/* 将元素层级设置为10 */}

相对定位属性

relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;}.box01{background: lightgreen;/* 设置相对定位属性，相对于自己在文档流的位置来偏移 */position: relative;/* 设置偏移值 */left: 50px;top: 50px;}.box02{background: lightcoral;}.box03{background: lightskyblue;}</style></head><body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div></body></html>

绝对定位

absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;/* 将父级设置为相对定位，不设置偏移值，父级就有定位属性了，而且不移动，子级就可以相对于它来做绝对定位 */position: relative;/*css元素溢出 */overflow: hidden;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;}.box01{background: lightgreen;/* 设置绝对定位属性，相对于自己在文档流的位置来偏移 */position: absolute;/* 设置偏移值*/left: 50px;top: 50px;}.box02{background: lightcoral;}.box03{background: lightskyblue;}</style></head><body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div></body></html>

固定定位

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;}.box01{background: lightgreen;/* 设置绝对固定定位属性，相当于浏览器窗口来偏移*/position: fixed;/* 设置偏移值*/left: 50px;top: 50px;}.box02{background: lightcoral;}.box03{background: lightskyblue;}</style></head><body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div></body></html>

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.con{width: 300px;height: 300px;border: 1px solid black;margin: 50px auto;/* 相对定位 */position: relative;}.box01,.box02, .box03{width: 200px;height: 80px;margin: 10px;/* 绝对定位 */position: absolute;}.box01{background: lightgreen;left: 0px;top: 0px; /* 设置定位元素层级 */ z-index: 4;}.box02{background: lightcoral;left: 30px;top: 30px;z-index: 5;}.box03{background: lightskyblue;left: 60px;top: 60px;z-index: 3;}</style></head><body><div class="con"><div class="box01">1</div><div class="box02">2</div><div class="box03">3</div></div></body></html>

理解练习
水平垂直居中的弹框

新增相关样式属性

/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */opacity:0.3;/* 兼容IE */filter:alpha(opacity=30);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.pop{width: 500px;height: 300px;border: 1px solid black;background: gold;/*固定定位，让弹框相对于浏览器窗口来定位，同时可以盖住其他元素*/position: fixed;/* 定位元素水平垂直居中的技巧 */left: 50%;margin-left: -251px;top: 50%;margin-top: -151px; /* 将弹框设置成一个很大的值，保证它可以盖住其他任何元素 */z-index: 9999;}.mask{position: fixed;/* 设置为固定定位宽度和高度就可以参照浏览器窗口的大小来设置 */width: 100%;height: 100%;left: 0px;top: 0px;background: black;z-index: 9998;/* 设置元素的透明度 */opacity: 0.3;/* 透密度兼容IE的写法 */filter: alpha(opacity=30);}/* 弹框显示隐藏 */.pop_con{display: none; /*不显示*/}</style></head><body><h1>页面的内容</h1><div class="pop_con" style="display: block;"><div class="pop"><h3>弹框标题</h3><p>弹框的内容</p></div><div class="mask"></div></div></body></html>

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级—权重大的起作用

可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1

权重的计算实例

1、实例一：<style type="text/css">div{color:red;}</style>......<div style="color:blue">这是一个div元素</div>2、实例二：<style type="text/css">body #content .main_content h2{color:red;}#content .main_content h2{color:blue;}</style>......<div id="content"><div class="main_content"><h2>这是一个h2标题</h2></div></div>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 权重值: 1 */div{color:blue;}/* 权重值：1+10+10+1 = 22 */body .con .box h3{color: #9f4743;}/* 权重值：10+10+1 = 21 */.con .box h3{color:red;}/* 权重值：10+1 = 11 */.con h3{color: blue;}/* 如果权重值一样，那么就覆盖 */.box h3{color: pink;}</style></head><body><div style="color:red">这是一个div</div><div class="con"><div class="box"><h3>这是一个h3标题</h3></div></div></body></html>