HTML 文件中主要由 HTML 标签组成

1. 标签

  • 也叫元素
  • 不同的标签具有不同的语义，决定了标签的功能以及用在那个位置
  • 分为标签和双标签
<!-- 有开头有结尾的是双标签 -->
<p>内容</p>

<!-- 这种自己的就是单标签 -->
<hr>
  • 标签名不区分大小写（推荐用小写）
  • 标签具有属性，通过属性可以设置标签的相关功能

2. 注释

<!-- 注释内容 -->
<!--
	注释内容1
	注释内容1
	注释内容1
-->

注释的作用：

  1. 对某一部分的代码进行解释和说明
  2. 调试代码的时候，把一部分代码暂时注释掉

3. 文档声明

作用：告诉浏览器使用标准模式解析代码

开头必须要写这个

<!DOCTYPE HTML>

HTML 标签

1. 主体结构标签

标签名

语义和功能

属性

单标签还是双标签

html

页面的根标签

双

head

页面头部

双

body

页面主体

双

2. head 标签

标签名

语义和功能

属性

单标签还是双标签

title

页面标题

双标签

meta

设置网页元信息

charset属性： 指定字符编码name属性： 指定要设置的元信息，值如keyworks,descriptioncontent属性： 与name属性配合http-equiv数： 与name属性类似

单标签

link

引入文档与外部资源的关系

rel属性： 值shortcut icon、stylesheet

href属性： 指定外部资源的地址

单标签

3. 设置网页元信息

这个可是很重要的，这个要是写不对就会出现乱码，看不懂了就：

<!-- 设置字符集编码 -->
<meta charset="utf-8">
<!-- 设置关键字和描述信息 用于SEO（搜索引擎） -->
<meta name="keywords" content="多个关键字之间用逗号隔开（英文的逗号，打代码过程中必须使用英文）">
      
<meta name="description" content="页面描述信息">
<!-- 页面重新跳转 指定时间 -->
<meta http-equiv="refresh"
content="3;url=http://www.atguigu.com">

4. 设置网页的标题图标

<link rel="shortcut icon" href="图标地址">

5. 格式排版标签

标签名

语义和功能

属性

但标签还是双标签

h1~h6

内容标题

双

p

段落

双

hr

分割线

单

br

换行

单

pre

按原文显示

双

div

没有语义，用于页面布局

双

注意： 格式排版标签重要的不是他们在浏览器上的表现样式，重要的是他们的语义，样式是可以通过css样式改变的。

6. 文本标签

标签名

语义和功能

属性

单标签还是双标签

em

强调，默认表现为斜体

双

strong

强调（语气更强），默认表现为粗体字

双

del

表示已删的文本

双

ins

表示新增添的文本

双

sub

下标字

双

aup

上标字

双

绝对路径和相对路径

1. 绝对路径

一个完整的网址

http://baidu.com
http://weibo.com

2. 相对路径 1. 目标文件与当前文件同级

2. 目标文件在当前文 件的下级目录

3. 目标文件在当前文件的上级目标

（总的来说就是在你的文件夹里）

超链接和锚点

1. 相关的标签

标签名

语义和功能

属性

单标签还是双标签

a

超链接

href属性： 制定目标地址

target属性： 指定目标文件在哪里打开 值：_self(默认的)、_blank（在一个新的页面打开）

name属性： 用于设置锚点名

双

base

指定超链接的基础特性

写在head标签里

href属性： 设置超链接的基础地址（影响相对路径，所以一般别用昂）

target属性： 指定目标在哪里打开 值_self（默认）、_blank（在一个新的页面打开）

单

2. 超链接的功能

1. 目标地址

通过 href 属性指向目标地址，目标地址是一个文件的地址点击超链接，浏览器就会打开目标地址指向的文件如果目标地址指向的文件的格式浏览器打不开，就会下载

2. 超链接特殊用法

<a href="tel:10086">打电话</a><a href="sms:10086">发短息</a>

3. 指定目标文件打开的位置

把 target 属性的值设置为_blank,目标文件会在新窗口打开target 属性的默认值是_self

3. 锚点

跳转到锚点，还是需要超链接，不跳转到新页面，跳转到当前页面的锚点位置

<a href="#锚点名">指定锚点</a><a href="#">回到顶部</a>

注意：

不但可以跳转到本页面某个锚点`


还可以跳转到其他页面的某个锚点<a href="页面地址"#锚点名>图片1. 相关标签


标签名

语义和功能

属性

单标签还是双标签

img

图片

src属性： 指定图片的地址

alt属性： 指定图片的说明文字，如果图片无法正常加载，就会出现这个文字显示

usemap属性： 指定与该图像对应的map标签的name值（就是让他们两个建立了联系）

双

map

用于图像映射

name属性： 指定一个名字，用于与img标签关联

双

area

用于图像映射划分区域

必须写在map标签的里面

shape属性： 指定区域的形状，可选值：rect（矩形）、circle（圆形）、poly（多边形）

coords属性： 根据区域的形状不同，执行不同的坐标

href属性： 指定目标地址

target属性： 指定在什么位置打开新的页面

单

2. 在页面中引入图像

<img src="图片地址" alt="图片的描述信息" height="高度">

3. 图片与超链接配合使用

<a href="http://www.baidu.com">	<img src="图片地址" alt="图片描述信息" height="你想要的高  	度"></a>

4. 图像映像

<img src="图片地址" alt="描述信息" usemap="#map标签的名字"><map name="自己起个名字">	<area shape="circle" coords="坐标数字" href="想链接的网址" target="_blank" title="标签点上会显示的map>

列表标签

1. 无序列表

<ul>    <li>列表项</li>    <li>列表项</li>    <li>列表项</li></ul><!-- li里面还可以在套一个<ul>--><ul>    <li>        江苏    	<ul>            <li>列表项</li>            <li>列表项</li>            <li>列表项</li>        </ul>    </li></ul>

注意：

无序列表在页面中非常常用，如导航、新闻列表、商品列表等

一组具有相关的内容放在一起，一般使用无需列表

2.有序列表

<ol>    <li>列表项</li>    <li>列表项</li></ol>

注意：

使用有序列表的场景：最热新闻排名，音乐排行榜 等

3. 定义列表

<h2>商品分类</h2><dl>    <dt>家用电器</dt>    <dd>电视</dd>    <dd>空调</dd>    <dd>洗衣机</dd>    <dd>电冰箱</dd>        <dt>电脑/办公</dt>    <dd>电脑整机</dd>    <dd>电脑配件</dd>    <dd>外部设备</dd></dl>

4. 列表标签总结

标签名

语义和功能

属性

单标签还是双标签

ul

无序列表

双

ol

有序列表

双

li

列表项

需要嵌套在ul或者ol的里面

双

dl

定义列表

双

dt

定义列表的标题

双

dd

定义列表的描述

双

表格

1. table 标签

（ table 是 表格

他包裹着

thead（表格头）

tbody（表格主体）

tfoot（表格注脚）

）

表格的整体包裹元素，有如下属性：

  • width 指定表格的宽度
  • height 指定表格的高度
  • border 指定表格边框的宽度
  • cellspacing （桑柏森） 指定单元格和单元格之间的距离
  • cellpadding 指定单元格边框和内容之间的距离
  • 都建议用css指定

2. 表格标题

使用 caption 表格标签， caption 标签内还可以在嵌套h标签

<caption>	<h2> 标题 </h2></caption>

3. 表格的结构组成

<!-- table 是表格标签 所有的表头表主体啥的都写在里面--><table>    <caption>标题</caption>    <!-- 表头 -->    <thead>        <!-- 一行 -->    	<tr>        	<th>表头单元格</th>            <th>表头单元格</th>            <th>表头单元格</th>        </tr>    </thead>    <!-- 表格主体 -->    <tbody>        <!-- 行 -->    	<tr>            <!-- 普通的单元格-->        	<td></td>        </tr>    </tbody>    <!-- 表格注脚 -->    <tfoot></tfoot></table>

4. 单元格内容的对齐方式

使用 align 属性设置水平对齐方式，值可以选为 left（左）、right（右）、center（中）	可以给 thead、tbody、tfoot 进行设置、会对里面的单元格都起作用	可以给 tr 进行设置，对该行的单元格起作用	可以给 td、th 进行设置，只对当前设置的单元格起作用使用 valign 属性设置垂直对齐方式，值可以选择为 top（上）、bottom（下）、middle（中）	可以给 thead、tbody、tfoot 进行设置，会对里面包含的单元格都起作用	可以给tr进行设置，对该行内的单元格起作用	可以给td、th 进行设置，只对当前设置的单元格起作用

5. 设置单元格宽高

给 td 或 th 设置宽度，同列的单元格都会按照设置的宽度，其实是设置列宽给 td 或 th 设置高度，同行的单元格都会按照设置的高度，其实设置行高也可以给 tr 设置高度，设置的是行高

6. 跨行和跨列

用于定义特殊的表格

给td或者 th设置 colspan用于跨列

给td或者 th 设置rowspan用于跨行

7. 表格标签总结

标签名

语义和功能

属性

单标签还是双标签

table

表格

width属性： 设置表格宽度

height属性： 设置表格高度

border属性： 设置表格边框的宽度，默认值是0

cellspacing属性： 设置单元格之间的间距

cellpadding属性： 设置单元格边框与内容的间距

双

thead

表头

aligh属性： 设置单元格边框与内容的水平对齐方式，值left（左）、right（右）、center（中）

valigh属性： 设置单元格内内容的垂直对齐方式，值top（上），bottom（下），middle（中）。

双

tbody

表格主体

aligh属性： 设置单元格内内容的水平对齐方式，值left（左），right（右），center（中）

valigh属性： 设置单元格内内容的垂直对齐方式，值top（上），bottom（下），middle（中）

双

tfoot

表格注脚

aligh属性： 设置单元格内内容的水平对齐方式，值left（左），right（右），center（中）

valigh属性： 设置单元格内内容的垂直对齐方式，值top（上），bottom（下），center（中）

双

hr

行

aligh属性： 设置单元格内内容的水平对齐方式，值left（左），right（右），center（中）

valigh属性： 设置单元格内内容的垂直对齐方式，值top（上），bottom（下），center（中）

height属性: 设置行的高度

双

th

表头单元格

写在tr的里面

aligh属性： 设置单元格内内容的水平对齐方式，值left（左），right（右），center（中）

valigh属性： 设置单元格内内容的垂直对齐方式，值top（上），bottom（下），center（中）

width属性： 设置列的宽度（单元格所在的列）

hright属性： 设置行的高度（单元格所在的行）

colspan属性： 指定跨越的列数，默认是1

rowspan属性： 指定跨越的行数，默认是1

双

td

普通单元格

写在tr的里面

aligh属性： 设置单元格内内容的水平对齐方式，值left（左），right（右），center（中）

valigh属性： 设置单元格内内容的垂直对齐方式，值top（上），bottom（下），center（中）

width属性： 设置列的宽高（单元格所在的列）

hright属性： 设置行的高度（单元格所在的行）

colspan属性： 指定跨越的列数，默认是1

rowspan属性： 指定跨越的行数，默认是1

双

caption

表格的标题

双

表单

1. form 标签

是表单的包裹元素，表单中所有的东西都要写在form标签里面

具有如下属性：

action 指定要提交的地址

method 指定提交方式

target 指定新打开的页面在那个窗口打开

（它们没有样式，如果只想要个样子也可以不写）

disabled属性 任何一个表单都可以用，会显示不能用

2. 表单控件

①文本输入框

<input type="text">	type 指定表单控件的类型			属性：		type  设置为 text		name  属性指定名字（向后端提交数据的时候使用）		value 属性指定默认的值		maxlength  指定输入框最大可输入的长度

②密码输入框

<!--password（怕死我的） 单词本身就是密码--><input type="password">	属性：		type 设置为 password		name 属性指定名字（向后端提交数据的时候使用）		value 属性指定默认值		maxlength  指定输入框最大可输入的长度

④单选按钮

<input type="radio">（ruai得奥）	属性：		type 设置为 radio		name 指定属性名字，多个单选按钮要实现单选的效果，它们的name属性值要一致（向后端提交数据的时候使用）		value 属性指定真正向后端提交的数据		checked 属性，设置默认选中，使用的时候，不需要给值

⑤隐藏域

<input type="hidden">用于向后端提交隐藏信息				（黑den）	属性：		type 设置为 hidden		name 属性指定名字（向后端提交数据的时候使用）		value 属性指定向后端提交的数据

⑥提交按钮

<input type="submit" value="提交">				（撒泼麦特）	属性：		type 设置为 submit		value 设置按钮上的文字或者<button>按钮上的文字</button>或者<button type="submit">按钮上的文字</button>

⑦重置按钮

<input type="reset" value="重置">	属性：		type 设置为 reset		value 设置按钮上的文字或者<button type="reset">按钮上的文字</button>

⑧普通按钮

<input type="button" value="按钮">普通按钮没有任何功能，只有按钮的样子	属性：		type 设置为 button		value 设置按钮上的文字或者<button type="button">按钮上的文字</button>

⑨文本域

<textarea></textarea>属性;	name 属性指定名字（）向后端提交数据的时候使用	disabled属性	设置表单控件不可用	rows 指定默认显示的行数，影响到本文的高度	cols 指定默认显示的列数，影响文本域的宽度

⑩下拉选项

<select name="">    <option value="">选项文字</option>    <option value="">选项文字</option>    <option value="">选项文字</option>    <option value="">选项文字</option>    <option value="">选项文字</option></select>select 的属性：	name	属性指定名字（向后端提交数据的时候使用）		option （表示下拉选项框）的属性：		value 指定真正向后端提交的数据		selected  设置默认选项（不用给值）

3. label 标签

label 标签用于表单控件做关联，label 中通常包含表单控件的说明文字

好处：

①有利于SEO,让文字与表单控件关联了

②点击与表单控件关联的文字可以让表单控件获取焦点

用法：

<!--用于 文本输入框、密码输入框、文本域、下拉选项--><label for="username">用户名：</label><input type="text" id="username"><!-- 用于单选按钮 或者 复选项 --><label>	<input type="radio">文字</label><label>	<input type="radio">文字</label>

4. fieldset 和 legend 标签

fieldset 可以在表单控件的周围加一个边框

legend 指定表单的标题，出现在边框的上面

<form>    <fieldset>        <legend>表单标题 </legend>         表单控件。。。。    </fieldset></form>

5. disabled 属性

所有的表单控件，都可以设置属性 disabled，设置该属性，表单控件就变为不可用的状态

6. 表单总结标签

标签名

语义和功能

属性

单标签还是双标签

form

表单

action属性： 指定要提交的地址

method属性： 只当提交的方式，默认值是GET

target属性： 指定提交的地址在那个窗口打开

双

input

定义各章形式的表单控件

type属性： 指定表单控件的类型

可选的值：

text (文本输入框)

password (密码输入框)

checkbox (复选框)

radio (单选按钮)

hidden (隐藏域)

submit (提交按钮)

reset (重置按钮)

button (普通按钮)

name属性： 指定表单控件的名字，用于向后端提交数据

value属性： 指定值，用于文本框和密码框，可以指定默认值，如果用于单选按钮和复选框用来指定真正向后端提交数据，如果用于按钮指定按钮的文字

name 属性： 指定表单控件的名字，用于向后端提交数据

value 属性： 指定值，用于文本框和密码框可以指定默认值，如果用于单选按钮和复选框用来指定真正向后端提交的数据，如果用于按钮指定按钮的文字

maxlength 属性： 指定最大可输入的文字个数，用于文本框和密码框

checked 属性： 设置为默认选项，用于单选按钮和复选框

disabled 属性： 设置表单控件不可用

单

textarea

文本域，多行文本输入

nema属性： 指定名字，用于后端提交

disablad属性： 设置表单控件不可用

rows属性： 指定默认显示的行数，会影响文本域的高度

cols属性： 指定默认显示的列数，会影响文本域的宽度

双

select

下拉选项框

name属性： 指定名字，用于后端提交

双

option

下拉选项写在select标签的里面

value属性： 指定真正向后端提交的地址

seslected属性： 指定为默认的选项

disabled属性： 设置表单控件不可用

双

button

按钮

type属性： 指定按钮类型，可选值submit（默认）、reset、button

双

fieldset

表格边框

双

legend

表格标题

双

框架标签

标签名

功能和语义

属性

单标签还是双标签

iframe

框架标签

name属性： 指定框架的名字，可以与超链接的target属性配合

width属性： 设置框架的宽度

height属性： 设置框架的高度

src属性： 目标文件的地址

双标签

实体标签

空格 	 ；<	 <>	 &rt;&	 &¥    ¥©    ©×    ×÷    ÷

html的全局属性

class	给元素设置类名id		给元素设置id名，元素的id名不能重复style	用于设置 css 样式dir		设置文字的方向tutle	设置一个文字提示，超链接和图片用的比较多lang	设置内容的语言

css的基本语法

1. css 与 html 的关系

css	为某个 html 元素设置样式css	的样式作用在某个html元素上

2. 元素和元素之间的关系

父元素祖先元素子元素后代元素兄弟元素  具有相同父元素的称之为兄弟元素

3. 在html中使用css的三种方式

① 行内元素

<p style="css代码..."></p>

② 内嵌式

<style>	css 代码...</style>

style 标签一般放在 head 标签内

③ 外链式

css 代码写在单独的 css 文件中，在 html 中使用 link 引入 css 文件

<link rel="stylesheet" href="css文件的地址">

注意：

内嵌式与外链式优先级是相同的， 后面的覆盖前面的

行内式的优先级大于其他两个

4 基本语法结构

① 在内嵌式和外链式中

选择器： 选择到一个或多个元素。

声明块：{}括起来就是声明块，用来设置 css 样式。

声明： 声明块由一条一条的声明组成，没条声明的后面加分号。

一条声明的组成： css属性名: 属性值;

选择器 {    css属性名:值;    css属性名:值;    css属性名:值;}

② 行内式语法

行内式的语法规则不需要选择器，只要把一条一条的声明写在 style 属性的值里面

<p style="css属性名：值；css属性名:值"></p>

SCSS 的基本长度单位

px 像素em 默认字体大小的倍数百分比	 注意如果width设置为百分比，参照的是父元素宽度          如果font-size设置比分比，参照默认字体大小，等同于 em

如果长度的值设置为0，可以不加单位。

长度的值如果非0，必须加单位。

css三种基本的颜色表示方式

①颜色名方式(colorname)

background-color:red

②rgb方式

计算机三原色：red、green、blue

/*用0~255之之间的数字表示每个颜色*/background-color:rgb(123,255,12);/*使用百分比表示每个颜色，0%~100%*/background-color:rgb(100%,50%，0%）;

③ 十六进制方式

/*使用6个十六进制的数字，每组两个数字是一组，原理通rgb方式一样*/background-color:#rrggbb;

注意：

三原色的数值都是一样的，表示为灰色；

数值越大，灰色越浅，如果数值最大，表示白色

数值越小，灰色越深，如果数值都是0，表示黑色

css基本选择器

1. 基本选择器

①标签名选择器（元素选择器）

标签名{    }

② id选择器

#id名{    }

注意： 元素的id的值是唯一的！

③类名选择器

.类名{    }

注意：

  1. 元素的类名可以相同。
  2. 一个元素可以有多个类名

④ 全局选择器

能选择到包括 thml 和body 在内所有的元素

head以及head内部的元素选择器选不到

*{    }

css的层叠性

所有能够选择到一个元素的选择器所设置的样式都会作用在这个元素上，这就是css的层叠性

基本选择器的优先级

选择器优先级：ID名选择器 > 类名选择器 > 标签名选择器 > 全局选择器如果优先级相同，后面的覆盖前面的行内式优先级高于所有的选择器（降维打击）

盒子模型

任何一个元素都会被当作一个盒子

1. 盒子模型的显示模式

① 块级元素

  • 某个元素的显示模式如果是块级的，该元素称之为块级元素
  • 块级元素能够独占一行
  • 块级元素默认宽度取父元素宽度，默认高度被内容撑开（没内容就没高度）
  • 可以对块级元素设置高度

② 行内元素

  • 某个元素的显示模式如果是行内的，该元素称之为行内元素
  • 行内元素不会独占一行
  • 行内元素的默认宽度和高度都是被内容撑开的（没内容就没宽度）
  • 无法对内元素设置宽高

③ 行内块元素

  • 某个元素的显示模式如果是 inline-block 的，该元素称之为行内块元素
  • 行内块元素同行内元素一样不会独占一行
  • 行内块元素默认宽度和高度同行内元素一样被内容撑开（没内容就没宽高）
  • 行内块元素可以设置宽高

注意：

原来的css标准中，区分行内元素和块级元素的唯一标准是：能否独占一行

如果按照这个标准，行内块元素也算作行内元素

元素默认显示的模式

①块级元素

格式排版标签（全部）：div  h1~h6   p   hr  br  pre表格：table	thead	tbody	tfoot	caption	tr表单：form

② 行内元素

文本标签（全部）：em	strong	ins	del	sup	sub无意义标签：span超链接：a

③行内块元素

图片：img表格：th	td表单：input 	textarea 	select 	button

修改元素的显示模式

display:inlne(行内)		block（块级）		inline-block（行内块）

常用属性

1. 字体属性

font-family 字体族科

常见的字体： 宋体，黑体，斜体，楷体衬线字体（serif）：横竖笔画不等宽，常见衬线字体：宋体，楷体，黑体，兰亭黑非衬线字体（sans-serif）：横竖笔画等宽，常见非衬线字体：微软雅黑，黑体，兰亭黑
font-family:"黑体"，楷体，sans-serif；

font-size 字体大小

font-size：16px；
默认字体大小是16pxchrome 浏览器字体大小最小是 12px，如果设置的 font-size 比 12 小，按照12px 显示

font-style 字体风格，用于设置斜体

font-style:normal;/*默认值*/font-style：italic；/*设置为斜体 使用字体自带的斜体 推荐！*/font-style：oblique；/*设置为斜体 强制变为斜体*/

font-weight

font-weight:noeml;/*默认值*/font-weight：bold;/*粗体*/ront-weight：lighter;/*细体字*/
font-weight 的值可以指定为数字100~300： 细体400、500： 正常600~900: 粗体

font-variant 字体变形（了解）

normalsmall-caps 小型大写字母

font 字体复合属性，同时设置多个属性的值，多个值用空格隔开

/*至少设置 字体大小和字体族科，顺序固定 */font: 20px 'Microsoft YaHei',sans-serif;/* 	字体大小和字体族科必须是最后两个	前面的 weight、style、variant 没有顺序要求*/font: bold 20px 'Microsoft YaHei',sans-serif;font: italic bold 20px 'Microsoft YaHei',sans-serif;

字体颜色

color设置字体颜色

color:#f90;

文本输入

1. letter-spacing 和 word-spacing(了解)

letter-spacing：设置字母之间的间距（汉字也会生效）word-spacing： 设置单词之间的间距（对汉字无效）

2. 文本对齐方式text-align

设置文本内容再元素内，水平方向的对齐方式

text-align:left/right/center;

3. 设置文本之间如何对齐vertical-align

① 用法

vertical-align:baseline /top /bottom /middlebaseline:沿基线对齐（默认）top：沿顶线对齐middle：沿中线对齐

②用途

第一个用途：行内元素或行内块元素与文本内容在一行显示的时候，设置如何对齐

给行内元素或行内块设置 vertical-align

第二个用途：设置表格中单元格文字的垂直对齐方式

给td 或 th 设置 vertical-align 可以控制文本在单元格内的垂直对齐方式

4. 行高 line-hright

行高： 第一行文字的中线与第二行文字中间的距离

通过设置行高与元素的高度一只，实现文字在元素内容垂直居中对齐方式，但是，只适合只有一行文字的情况。

行高可以让文本内容的高度变大，一个元素不设置高度，只设置行高且元素内有文本内容，元素高度与行高大小一致。

font 复合属性，把行高也复合进去了

font:30px/100px 'microsoft yahei';/* 其中100px 就是行高 */

5. 文本修饰 text-decoration

text-decoration:none /underline /overline /line-throuthnone:无效果（默认）underline：下划线overline：上划线line-throuth：删除线

注意：

超链接a默认有下划线，可以使用text-decoration:none 去掉a的下划线

6. 首行缩进text-indent

text-indent:2em;

背景属性

1. 背景颜色 background-color

background-color:#f89;

注意：

1.给body元素设置背景颜色，其实是设置整个页面的背景色

2.元素默认的背景颜色是透明色 transparent

2. 背景图片background-image

background=image:url(图片地址)；

使用img标签引入图片和背景图片有什么区别？

  1. img标签是一个元素，图片本身就是元素；背景图片可以给任何元素添加背景图
  2. 如果图片作为网页内容中的一部分，建议使用img标签；如果图片仅仅是修饰，建议使用背景图片
  3. img图片是可以被搜索引擎抓取的。

3. 背景图片重复background-repeat

background-repeat:repeat;
可选值：	repeat 重复（默认）	repeat-x 只在水平方向重复	repeat-y 只在垂直方向重复	no-repeat 不重复

4. 背景图片定位backgeound-position

调整背景图片在元素上的位置

①使用方式

使用关键字	水平方向的关键字： left right center	垂直方向的关键字： top bittom center使用关键字可以设置两个值	background-position：left top；使用关键字设置一个值（另一个默认值设置为center）	background-position：left；	background-position：center；
使用具体坐标，用长度来表示元素的左上角作为坐标原点，通过坐标设置图片（左上角）在元素上的位置设置两个值	background-position：100px 10px设置一个值（100px 会被作为 x 坐标，垂直方向默认 center）	background-position:100px;

② 使用情况

大部分情况，使用background-position的时候，背景图比元素要小但是，背景图比元素大的有些情况也需要设置background-position，往往会设置为center center

5. 背景图片附件 background-attachment

设置背景图的定位方式

background-attachment:scroll /fixed
scroll：默认值，设置背景图位置的时候，元素的左上角作为坐标原点fixed： 设置背景图片位置的时候，视口的左上角作为坐标原点如果滚动条滚动，元素会跟着滚动，但是视口不会跟着动

6. background复合属性

把所有的子属性的值写在一起，用一个css属性代替多个属性

background复合属性对值没有顺序和数量要求

background:#369 url(图片地址) no-repeat 10px 50px scroll;

鼠标光标属性cursor

设置鼠标光标华东到元素上之后，光标的样式

cursor:pointer;
值：	defalut默认值	pointer 小手（最常用）	move 移动图标（用于商品的放大镜）

列表属性

list-style-type		设置列表符号	值： disc、circle。。。。none（常用）	list-style-position 	设置项目符号在li的里面还是外面	值：	inside		  outside（默认在外面）		  list-style-image：url（图片地址）list-style 复合属性，把所有的子属性写在里面，没有数量和顺序要求
/*常见用法*/list-style：none；

表格属性

table-layou	设置列宽的计算方式		值：		auto	默认，列宽根据单元里的内容多少计算		fixed	列宽与单元格内内容多少没关系，如果去设置单元格宽度，所有列等宽		border-collspase	设置单元格边框是否合并			值：			separate 默认，独立			collspase 合并			border-spacing	设置单元格之间的距离（类似于 table 的 cellspacing 属性）			生效的前提：单元格边框不能合并			cpation-size	设置表格标题位置				值：				top 默认，在表格上面				bottom 在表格下面				empty-cells		设置是否隐藏没有内容的单元格1				值：				show  默认，显示				hide  隐藏

注意：

以上五个属性只能设置给table元素、

常用：

table-；layout、 border-collapse

选择器

1. 组合器选择

①后代选择器

选择器1 选择器2选择器1 选择器2 选择器3 选择器4....

② 子元素选择器

选择器1>选择器2选择器1>选择器2>选择器3>选择器4

③并集选择器

选择器1，选择器2选择器1，选择器2，选择器3，选择器4....

④ 交集选择器

选择器1选择器2选择器1选择器2选择器3选择器4....

伪类选择器

a：linke

选择到地址没有被访问过的超链接

a：visited

选择到地址被访问过的超链接

a：hover

选择到鼠标悬停在上面的元素

a：active

选择到激活状态（鼠标在元素上按键按下不松手）的元素

注意：

  1. ：linke 和 ：visited只能用于超链接元素， ：hover 和 ：active 可以用于所有的元素
  2. 4个伪类选择器一起使用的时候，注意顺序 love-hat 爱恨原则； ：link、：visted、：hover、：active
  3. 其中：hover 伪类选择器非常常用

选择器优先级

如果有层级比较多的组合选择器，比较它们你的优先级，查找id选择器、类名选择器等的数量，进行权衡计算

第一档次：	ID选择器第二档次：	类名选择器、伪类选择器第三档次：	标签名选择器第四档次：	全局选择器降维打击：	行内式开挂：	！important（针对某个具体的css属性）
！important > 行内式 > ID > 类名 > 标签名 > *

盒子模型

盒子模型的三种显示模式

① 块级元素

1. 能够独占一行2. 可以设置宽高

②行内元素

1. 无法独占一行2. 无法设置宽高

③ 行内块元素

1. 无法独占一行2. 可以设置宽高

盒子模型的组成

  • 内容区域（元素里面的文字内容或者是后代元素显示的区域）
  • 内边距 内容和边框之间的距离（内容不会显示在内边距上）
  • 边框
  • 外边距，外边距不属于盒子的一部分

影响盒子大小的设置： 内容区的大小，内边距的大小，边框的大小

外边距不影响盒子大小，影响盒子位置

盒子显示模式（隐藏盒子）

① 修改盒子的显示模式

display值：	inline	inline-block	block	none	让元素隐藏

② 设置元素的可见性

visibility	设置元素的可见性值：	visible 可见的，默认的	hidden 不可见

display：none 和 visibility：hidden 区别：

元素这只为display：none，元素不在占用页面中的位置

元素设置为 visibility：hidden，元素不可见但是还是占着原来的位置。

块级元素的默认宽度

  1. 如果元素没有外边距，元素的总宽度=父元素内容区域宽度
  2. 如果元素设置值了左右外边距，元素的总宽度=父元素内容区域宽度-元素自己的左右外边距
  3. 如果元素本身设置了内边距或边框，元素的总宽度不变，内容区域宽度会被挤压。