HTML和CSS基础

一、HTML和CSS简介

HTML（Hypertext Markup Language）：超文本标记语言。

• 它负责网页的三个要素之中的结构。

• HTML使用标签的的形式来标识网页中的不同组成部分。

• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

一个最基本的HTML页面：

<!DOCTYPE html>
<html> 
<head> 
        <meta charset="UTF-8"> 
        <title>网页标题</title> 
</head>
<body>
         <h1>网页正文</h1>
</body> 
</html>

元素

• 我们还将一个完整的标签称为元素。

• 这里我们可以将元素和标签认为是一个同义词。

上边的h1我们就称为元素

p也是一个元素，em是p的子元素，p是 em的父元素。

<body>

</body>
• body也是一个元素。

• body是p和em的祖先元素。

• p和em是body的后代元素。

属性

• 可以为HTML标签设置属性。

• 通过属性为HTML元素提供附加信息。

• 属性需要设置在开始标签或自结束标签中。

• 属性总是以名称/值对的形式出现。

• 比如：name=“value” • 有些属性可以是任意值，有些则必须是指定值。

常见属性

• id – id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。

• class – class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。

• title – title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

注释

• HTML注释中的内容不会在网页中显示。

• 格式:

• 合理的使用注释可以帮助开发人员理解网页的代码。

• 注释不能嵌套！

doctype

• 为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype 声明，来告诉浏览器网页的版本。

• 我们使用的是html5的文档声明 <!DOCTYPE html>

怪异模式

• 为了兼容一些旧的页面，浏览器中设置了两种解析模式： – 标准模式（Standards Mode） – 怪异模式（Quirks Mode）

• 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。

• 避免的最好方式就是在页面中编写正确的 doctype。

编码问题

• 在计算机的内部，文件都是以二进制编码保存的。

• 所谓的二进制编码就是指1和0，也就是我们的所有内容都需要转换为1和0。

• 中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码，这一过程称为编码。

• 计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码。

字符集

• 这就带来一个问题，中国到底是10100101 还是01011010到底由谁说了算。

• 所以我们还需要一个东西称为字符集，字符集规定了如何将文本转换为二进制编码。

• 常见的字符集：ASKII、ISO8859-1、GBK、 GB2312、UTF-8。

乱码

• 如果我们保存文件时使用的是utf-8进行编码，而浏览器读取页面时使用gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。

• 所以我们只需要统一两者使用的字符集就可以解决乱码问题。

• 这里为了页面有更好的使用性，我们一般使用utf-8。

解决

• 保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。

• 在html5中只需要使用meta标签即可完成这个任务：
<meta charset="utf-8" />

<meta>

• 作用： – <meta> 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

　　　 – <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta的用法

• 设置页面的字符集 – <meta charset="utf-8">

• 设置网页的描述 – <meta name="description" content="">

• 设置网页的关键字 – <meta name="keywords" content="">

• 请求的重定向 – <meta http-equiv="refresh" content="5;url=地址"/>

常用标签

<html>

• 作用： – <html>标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。

• 用法： – 所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个。

　　　　– html标签中有两个子标签head和body。

<head>

• 作用： – <head>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。

• 用法： – head标签作为html标签的子元素的出现，一个网页中只能有一个head。

<title>

• 作用： – <title>标签表示网页的标题，一般会在网页的标题栏上显示。

　　　　– title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。

• 用法： – 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。

　　　　 – 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。

<body>

• 作用： – <body>标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。

• 用法： – body标签作为html的子标签使用。

<h1>~<h6>

• 作用： – h1~h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。

　　　　– 标题标签相当于正文的标题，通常认为重要性仅次于页面的title。

　　　　– 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。

　　　　– 一个页面中只会使用一个h1标签。

<p>

• 作用： – <p>标签表示网页中的一个段落。

　　　　– 一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。

<br />

• 作用 – <br />标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行。

<hr />

• 作用： – <hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。

<img />

• 作用： – < img />标签是图片标签，可以用来向页面中引入一张外部的图片。

• 属性： – src • 指向一个外部的图片的路径。

　　　　– alt • 图片的描述

<a>

• 作用： – <a>标签是超链接标签，通过a标签，可以快速跳转到其他页面。

• 属性： – href • 指向一个链接地址

　　　　– target • 设置打开目标页面的位置，可选值：_blank新窗口、 _self当前窗口。

实体（转义字符）

• 在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。比如<和>,我们不能直接在页面中使用<和 >号，因为浏览器会将它解析为html标签。为了可以使用这些预留字符，我们必须在 html中使用字符实体。

• 语法: &实体名;

字符实体

• 小于号< – <

• 大于号> – >

• 空格 –  

• 和符号& – &
• 版权© – ©

• 引号” – "

• 注册商标® – ®

• 商标™ – ™

CSS

• 层叠样式表 (Cascading Style Sheets)

• css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。

• 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。

• 而css就可以分别为网页的各个层次设置样式。

基本语法

• CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

• 语法： – 选择器 {样式名:样式值；样式名:样式值; }

　　　　– p {color:red; font-size:12px;}

编写的位置

行内样式（内联样式）

• 可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。<p style="color: red;font-size: 30px"></p>
• 这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用。

内部样式表

• 可以直接将样式写到<style>标签中。
• 这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。

• 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。
<style> p{color:red; font-size: 30px;} </style>

外部样式表

• 可以将所有的样式保存到一个外部的css文件中，然后通过<link>标签将样式表引入到文件中。
• 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。
<link rel="stylesheet" type="text/css" href="style.css">

二、CSS选择器

元素选择器标签名{ }

id选择器 #id {}

类选择器 .class{}

通配选择器 *{}

并集选择器选择器1,选择器2,选择器N{}

交集选择器选择器1选择器2选择器N{}

后代元素选择器祖先元素后代元素{}

子元素选择器父元素 > 子元素 {}

标签之间的关系

• 祖先元素 – 直接或间接包含后代元素的元素。

• 后代元素 – 直接或间接被祖先元素包含的元素。

• 父元素 – 直接包含子元素的元素。 • 子元素 – 直接被父元素包含的元素。

• 兄弟元素 – 拥有相同父元素的元素。

伪类和伪元素

• 正常链接 a:link

• 访问过的链接 a:visited（只能定义字体颜色）

• 鼠标滑过的链接 a:hover

• 正在点击的链接 a:active

• 获取焦点 :focus

• 指定元素前 :before

• 指定元素后 :after

• 选中的元素 ::selection

其他选择器

给段落定义样式

• 首字母 :first-letter

• 首行 – :first-line

属性选择器

[属性名] 选取含有指定属性的元素

[属性名="属性值"] 选取属性值等于指定值的元素

[属性名~="属性值"]

[属性名|="属性值"]

[属性名^="属性值"] 选取属性值以指定内容开头的元素

[属性名$="属性值"] 选取属性值以指定内容结尾的元素

[属性名*="属性值"] 选取属性值中包含指定内容的元素

子元素选择器

• :first-child – 选择第一个子标签

• :last-child – 选择最后一个子标签

• :nth-child – 选择指定位置的子元素

• :first-of-type – 寻找指定类型中的第一个子元素

• :last-of-type – 寻找指定类型中的最后一个子元素

• :nth-of-type – 选择指定类型的子元素

兄弟元素选择器

– 查找后边一个兄弟元素 • 兄弟元素 + 兄弟元素{}

– 查找后边所有的兄弟元素 • 兄弟元素 ~ 兄弟元素{}

否定伪类

从一组元素中将符合要求的元素剔除出去

语法 :not(选择器){}

样式的继承

为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。

通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。

但是并不是所有的样式都会继承，比如：背景相关的，边框相关的，定位相关的。具体参考文档

选择器的优先级

不同的选择器有不同的权重值：

– 内联样式：权重是1000

– id选择器：权重是100

– 类、属性、伪类选择器：权重是10

– 元素选择器：权重是1

– 通配符：权重是0

当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式

优先级计算时，总大小不能超过他的最大的数量级

可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。

选择器的性能

浏览器在解析一组选择器时，是从后边往前一个一个的解析的

如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。

*通配选择器，性能也比较差，要避免使用通配选择器

三、文本标签及样式

文本标签

<em>和<strong>

• em标签用于表示一段内容中的着重点。

• strong标签用于表示一个内容的重要性。

• 这两个标签可以单独使用，也可以一起使用。
• 通常em显示为斜体，而strong显示为粗体。

<i>和<b>

• i标签会使文字变成斜体。

• b标签会使文字变成粗体。

• 这两个标签和em和strong类似，但是这两个标签没有语义。

• 所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。

<small>

• small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。

• 浏览器在显示small标签时会显示一个比父元素小的字号。

<cite>

• 使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。

<blockquote>和<q>

• blockquote和q表示标记引用的文本。

• blockquote用于长引用，q用于短引用。

• 在两个标签中还可以使用cite属性来表示引用的地址。

<sup>和<sub>

• sup和sub用于定义上标和下标。

• 上标主要用于表示类似于10³中的3。

• 下标则用于表示类似余H₂O中的2。

<ins>和<del>

• ins表示插入的内容，显示时通常会加上下划线。

• del表示删除的内容，显示时通常会加上删除线。

<code>和<pre>

• 如果你的内容包含代码示例或文件名，就可以使用code元素。

• pre元素表示的是预格式化文本，可以使用 pre包住code来表示一段代码。

列表

列表相关的元素都是块元素，他们之间可以互相嵌套

去除项目符号 list-style:none

有序列表

使用ol和li来创建一个有序列表。

<ol> 
　　<li>列表项1</li>
　　<li>列表项2</li> 
　　<li>列表项3</li> 
</ol>

无序列表

使用ul和li来创建一个无序列表。

<ul> 
    <li>列表项1</li> 
    <li>列表项2</li> 
    <li>列表项3</li> 
</ul>

定义列表

使用dl、dd、dt来创建一个定义列表。

<dl> 
    <dt>定义项1</dt> 
    <dd>定义描述1</dd>
    <dt>定义项2</dt> 
    <dd>定义描述2</dd> 
    <dt>定义项3</dt> 
    <dd>定义描述3</dd> 
</dl>

单位

长度单位

• px – 如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。

• 百分比 – 也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。

• em – em和百分比类似，也是相对于父元素说的，1em = 1font-size，1em就相当于100%，2em相当于200%，1.5em相当于150%。

颜色单位

英文单词

•直接使用英文单词来表示颜色 red green blue orange

RGB值

• 也可以使用计算机中常用的RGB值来表示颜色。可以使用0~255的数值，也可以使用0%~100%的百分比数。RGB(100%,0%,0%) RGB(0,255,0)

• 第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。

RGBA

• RGBA表示一个颜色和RGB类似，只不过比 RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明， 1表示完全不透明。 RGBA(255,100,5,0.5)

十六进制颜色

• 用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。

• 上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。

• 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将 #6600FF缩短为#60F。

文本样式

font-size用来指定文字的大小。

font-family可以指定标签中文字使用的字体。一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。通过font-family可以同时指定多个字体。浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

字体分类 • serif（衬线字体） • sans-serif（非衬线字体） • monospace （等宽字体） • cursive （草书字体） • fantasy （虚幻字体） • 以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

font-style用来指定文本的斜体。 – 指定斜体：font-style:italic – 指定非斜体：font-style:normal

font-weight用来指定文本的粗体。 – 指定粗体：font-weight:bold – 指定非粗体：font-weight:normal

font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。

font可以一次性同时设置多个字体的样式。

• 语法： – font:加粗斜体小型大写大小/行高字体

• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

line-height用于设置行高，行高越大则行间距越大。行间距 = line-height – font-size

text-transform样式用于将元素中的字母全都变成大小。

　　– 大写：text-transform:uppercase

　　– 小写：text-tansform:lowercase

　　– 首字母大写：text-transform:capitalize

　　– 正常：text-transform:none

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。 • 可选值： – underline – overline – line-through – none

letter-spacing用来设置字符之间的间距。 word-spacing用来设置单词之间的间距。这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

text-align用于设置文本的对齐方式。可选值： – left：左对齐 – right：右对齐 – justify：两边对齐 – center：居中对齐

text-indent用来设置首行缩进。该样式需要指定一个长度，并且只对第一行生效。

四、盒子模型

CSS中将每一个元素都设置为了一个矩形的盒子

将所有的元素都设置为盒子，是为了方便页面的布局

当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子

一个盒子我们会分成几个部分：

　　– 内容区(content)

　　　　• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

　　　　• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。

　　　　• 通过width和height两个属性可以设置内容区的大小。

　　　　• width和height属性只适用于块元素。

　　– 内边距(padding)

　　　　• 内边距指的就是元素内容区与边框以内的空间。

　　　　• 默认情况下width和height不包含padding的大小。

　　　　• 使用padding属性来设置元素的内边距。

　　　　• 例如： – padding:10px 20px 30px 40px – 这样会设置元素的上、右、下、左四个方向的内边距。

　　　　• padding:10px 20px 30px; – 分别指定上、左右、下四个方向的内边距

　　　　• padding:10px 20px; – 分别指定上下、左右四个方向的内边距

　　　　• padding:10px; – 同时指定上左右下四个方向的内边距

　　　　• 同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom分别用来指定四个方向的内边距。

　　– 边框(border)

　　　　• 可以在元素周围创建边框，边框是元素可见框的最外部。

　　　　• 可以使用border属性来设置盒子的边框： – border:1px red solid; – 上边的样式分别指定了边框的宽度、颜色和样式。

　　　　• 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

　　　　• 和padding一样，默认width和height并包括边框的宽度。

　　　　• 边框可以设置多种样式： none（没有边框） dotted（点线） dashed（虚线） solid（实线） double（双线） groove（槽线） ridge（脊线） inset（凹边） outset（凸边）

　　– 外边距(margin)

　　　　• 外边距是元素边框与周围元素相距的空间。

　　　　• 使用margin属性可以设置外边距。

　　　　• 用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。

　　　　• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

盒模型相关样式

display

可选值： block：设置元素为块元素 inline：设置元素为行内元素 inline-block：设置元素为行内块元素 none：隐藏元素（元素将在页面中完全消失）

visibility

可选值： – visible：可见的 – hidden：隐藏的

overflow

可选值： visible：默认值 scroll：添加滚动条 auto：根据需要添加滚动条 hidden：隐藏超出盒子的内容

文档流

• 文档流指的是文档中可现实的对象在排列时所占用的位置。

• 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

• 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。

• 这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

块元素：1.块元素在文档流中自上向下排列；2.块元素在文档流中宽度默认是父元素的100%；3.块元素在文档流中高度默认被内容撑开

内联元素：1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列；2.内联元素在文档流中宽度和高度默认都被内容撑开

布局

浮动

• 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

• 浮动使用float属性。可选值： – none：不浮动 – left：向左浮动 – right：向右浮动

• 特点：1.元素浮动以后会完全脱离文档流；2.浮动以后元素会一直向父元素的最上方移动；3.直到遇到父元素的边框或者其他的浮动元素，会停止移动；4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素；5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐；6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果

• 浮动以后元素的特点：元素浮动以后，会使其完全脱离文档流。

　　块元素脱离文档流以后：1.不会独占一行；2.宽度和高度都被内容撑开

　　内联元素脱离文档流以后会变成块元素

清除浮动

• clear属性可以用于清除元素周围的浮动对元素的影响。

• 也就是元素不会因为上方出现了浮动元素而改变位置。

• 可选值： – left：忽略左侧浮动 – right：忽略右侧浮动 – both：忽略全部浮动 – none：不忽略浮动，默认值

高度塌陷：

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱

解决方法：1.开启父元素的BFC（1.设置元素浮动；2.设置元素绝对定位；3.设置元素的类型为inline-block；4.设置overflow为一个非默认值，一般都是使用overflow:hidden来开启BFC）【在IE6中可以通过开启hasLayout来解决高度塌陷的问题 zoom:1】；

2.在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动（使用这种方式会在页面中添加多余的结构）

3.使用after伪类，向父元素后添加一个块元素，并对其清除浮动

定位

position属性可以控制Web浏览器如何以及在何处显示特定的元素。

• 可以使用position属性把一个元素放置到网页中的任何位置。

• 可选值： – static 默认值，元素没有开启定位

　　　　 – relative 开启元素的相对定位

　　　　 – absolute 开启元素的绝对定位

　　　　 – fixed 开启元素的固定定位

相对定位

• 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。

• 当将position属性设置为relative时，则开启了元素的相对定位。

• 当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

相对定位的特点

• 如果不设置元素的偏移量，元素位置不会发生改变。

• 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。

• 相对定位不会改变元素原来的特性。 • 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。

绝对定位

• 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。

• 当将position属性设置为absolute时，则开启了元素的绝对定位。

• 当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

绝对定位的特点

• 绝对定位会使元素完全脱离文本流。

• 绝对定位的块元素的宽度会被其内容撑开。

• 绝对定位会使行内元素变成块元素。

• 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

固定定位

• 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。

• 当将position属性设置为fixed时，则开启了元素的固定定位。

• 当开启了固定定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

• 固定定位的其他特性和绝对定位类似。

z-index

• 当元素开启定位以后就可以设置z-index这个属性。

• 这个属性可以提升定位元素所在的层级。

• z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index 值较大的元素会显示在网页的最上层。

posted @ 2020-02-28 16:50 栗子壳阅读(517) 评论(6) 编辑收藏举报

刷新页面返回顶部

栗子壳

HTML和CSS基础

一、HTML和CSS简介

HTML（Hypertext Markup Language）： 超文本标记语言。

标签

元素

属性

常见属性

注释

doctype

怪异模式

编码问题

字符集

乱码

解决

<meta>

meta的用法

常用标签

<html>

<head>

<title>

<body>

<h1>~<h6>

<p>

<br />

<hr />

<img />

<a>

实体（转义字符）

CSS

基本语法

编写的位置

行内样式（内联样式）

内部样式表

外部样式表

二、CSS选择器

标签之间的关系

伪类和伪元素

其他选择器

给段落定义样式

属性选择器

子元素选择器

兄弟元素选择器

否定伪类

样式的继承

选择器的优先级

选择器的性能

三、文本标签及样式

文本标签

<em>和<strong>

<i>和<b>

<small>

<cite>

<blockquote>和<q>

<sup>和<sub>

<ins>和<del>

<code>和<pre>

列表

有序列表

无序列表

定义列表

单位

长度单位

颜色单位

英文单词

RGB值

RGBA

十六进制颜色

文本样式

四、盒子模型

– 内容区(content)

– 内边距(padding)

– 边框(border)

– 外边距(margin)

盒模型相关样式

display

visibility

overflow

文档流

布局

HTML（Hypertext Markup Language）：超文本标记语言。

　　– 内容区(content)

　　– 内边距(padding)

　　– 边框(border)

　　– 外边距(margin)