HTML&CSS复习

最新推荐文章于 2024-05-05 20:36:35 发布

除了优秀就是瘦

最新推荐文章于 2024-05-05 20:36:35 发布

阅读量668

点赞数

分类专栏： HTML&CSS 文章标签： css html

本文链接：https://blog.csdn.net/m0_47203646/article/details/126426236

版权

HTML&CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

HTML篇

HTML基础

HTML不是编程语言，只是一种超文本标记语言
HTML文档也叫作web页面
HTML相对路径的写法：
- ./ ：代表文件所在的目录（可以省略不写）
- …/ ：代表文件所在的父级目录
- …/…/：代表文件所在的父级目录额父级目录
- / ：代表文件所在的目录
在HTML4中标签推荐使用小写
注释：

HTML头部

head 元素包含了所有的头部标签元素，在元素中你可以插入脚本(script)，样式文件(CSS)，以及各种meta元数据。可以在头部添加的元素标签有：<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>
title：该标签定义了不同文档的标题，当网页添加到收藏夹时，显示在收藏夹中的标题，也是显示在搜索引擎结果页面的标题。
base：该标签描述了基本的链接地址/链接目标，该标签作为HTML文档中的所有链接标签的默认连接：

<head> 
	<base href="http://www.baidu.com" target="_blank>
</head>

link：该标签定义了文档与外部资源之间的联系，通常用于链接到样式表：

 <head>
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>

style：该标签可直接添加样式来渲染HTML文档
meta：该标签描述了一些元数据（描述数据的数据，用于记录一些数据的信息）：关键字、内容、文件最后的修改时间、作者和其他数据。

<!-- 设置字符集 -->
<meta charset="utf-8">

<!-- 为搜索引擎定义关键词 -->
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">

<!-- 为网页定义描述内容 -->
<meta name="description" content="HTML&CSS复习">

<!-- 每30秒刷新当前页面 -->
<meta http-equiv="refresh" content="30">

<!--为网页定义字符集编码格式  -->
<meta charset="utf-8">

script：该标签用于加载脚本文件

HTML标题

标题通过 h1 - h6 进行定义的，字体大小从大到小。
浏览器的默认标题大小：（假设浏览器默认字体大小为16px）
h1(32px == 2em)
h2(24px == 1.5em)
h3(18.72px == 1.17em)
h4(16px 没有font-size)
h5(13.28px == 0.83em)
h6(12px == 0.75em)

HTML文本格式化

文本格式化标签

关于 b 和 strong：这两个标签在网页显示都是加粗，但是后者带有加重语气的意思。
关于 i 和 em：这两个标签在网页上显示都是斜体，但是后者有强调的意思。
通常标签 strong 替换加粗标签 b 来使用, em 替换 i 标签使用。

HTML链接

HTML标签中使用标签 a 来设置超文本链接，利用 href 属性来描述链接的地址。
浏览器的默认形式：一个为访问过的链接显示为蓝色字体并带有下划线；访问过的链接显示为紫色并带有下划线；点击链接时，链接显示为红色并带有下划线。
链接语法：<a href="url" target="_blank">链接文本</a>
target 属性：定义被连接的文档在何处显示
id 属性：该属性可以创建一个HTML文档书签

    1、在HTML文档中插入ID:  <a id="tips">有用的提示部分</a>

    2、在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"： <a href="#tips">访问有用的提示部分</a>

    3、或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"： <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

注意：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次HTTP请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。

HTML图像

图像由 img 标签定义的，这是一个单标签，只包含属性，并且没有闭合标签。
语法：<img src="url" alt="some_text" title="text_title">
src 属性：源属性的值是图像的URL地址。
alt 属性：用来为图像定义一串可替换的文本，当用户无法载入图片时，替换文本将会显示。
title 属性：该属性用于提供建设性的信息，可以实线鼠标悬停的效果。

HTML图像映射

图像映射是指带有可点击区域的衣服图像，由 map 标签来定义，这是一个双标签。
map 元素是一个容器，其中包含一组 area 元素，这些 area 元素定义了图像地图中的可点区域，name 是 map 中的必须属性，用于定义图像地图的名称。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><!-- usemap属性 可引用map中的 id 或 name属性-->
<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <!--矩形 路径起点终点坐标(0,0)-(82,126) 替换文本 点击跳转的地址-->
	<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><!-- 圆形 圆心坐标(90,58) 半径3 -->
	<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
	<area shape="poly" coords="x1,y1,x2,y2 ......" href=url> <!--  多边形 各顶点坐标一次为(x1,y1),(x2,y2)-->
</map>

HTML表格

1.基本语法是：

<table>
	<tr><th>....</th></tr>
	<tr><td>..... </td></tr>
</table>

table 标签用于定义一个表格，tr标签用于定义行，th用于定义表头，td 标签用于定义表格单元；必须相互嵌套，tr 中只能嵌套td，td 可以容纳所有元素。
表格结构：标题(caption)+表头(thead)+主体(tbody)+表尾(tfoot)；
caption：紧跟在table之后，对每个表格只能定义一个标题，通常默认样式是 居中于表格之上 。
thead：主要包含网页的logo和导航等头部信息
tbody：一般包含除头部和底部之外的其他内容
tfoot ：定义表格的页脚(脚注或表注)，元素内部必须包含一个或者多个 tr 标签。

<table>
		<caption> 表格标题</caption>
		<thead>
			<tr><th>.....</th></tr>
		</thead>
		<tbody>
			<tr><td>.....</td></tr>
		</tbody>
		<tfoot>
			<tr><td>.....</td></tr>
		</tfoot>
	</table>

表格属性
合并单元格
跨行合并：rowspan
跨列合并：colspan

<table>
		<caption>合并单元格</caption>
		<thead>
			<tr><th colspan="4">我是占位符</th></tr>
		</thead>
		<tbody>
			<tr >
				<td rowspan="2">我是占位符</td>
				<td>我是占位符</td>
				<td>我是占位符</td>
				<td>我是占位符</td>
			</tr>
			<tr>
				<td>我是占位符</td>
				<td>我是占位符</td>
				<td>我是占位符</td>
			</tr>
		</tbody>
	</table>

合并单元格

HTML列表

列表分为无序列表(ul)、有序列表(ol)、定义列表(dl)。
表格用来显示数据，列表用来布局；列表的特点：整齐有序。
无序列表(ul)：该列表最常用。该列表中的列表项没有顺序级别之分，是并列的。在HTML5中使用CSS来进行列表的项目符号的设置。默认的标记是小圆点。<ul><li>...<li></ul>
有序列表(ol)：列表项之间是有顺序之分的，默认以数字来显示。<ol><li>...</li></ol>
自定义列表(dl)：主要用在网站底部对项目/名字的具体描述；通常是用于对属于或名词进行解释和描述，前面没有项目符号，但是前方会有一大段空白，dt 和 dd是并列关系，一个dt可以对应多个dd。<dl><dt>定义项目名称</dt><dd>描述项目名称</dd></dl>
ul、ol 中只能包含 i，dl 中只能包含 dt 和 dd

HTML表单

表单(form)用于收集用户的信息，会将收集到的用户信息发送到 Web 服务器。
语法格式：<form action="www.baidu.com" method="get" name="biaodan"></form>

表单属性

action：url地址，数据要传送的地方
method：提交方式，有get和post可以选择；get适用于少量数据提交（被动提交），post适用于敏感数据(密码)提交，主动提交，页面不可见
name：表单域名城，定义一个名字
enctype：设置表单提交的编码方式
1. TEXT/plain:以纯文本形式传递信息
2. Application/x-www-Form-urlencoded:默认的编码形式
3. Multipart/Form-data:使用MINE编码形式
target：设置表单返回的窗口
1. _blank:将返回信息显示在新开的浏览器窗口中
2. _parent:将返回信息显示在父级浏览器窗口中
3. _self:将返回信息显示在当前浏览器窗口中
4. _top:将返回信息显示在顶级浏览器窗口中

表单标签

HTML表单标签

1.input标签

语法：<input type="value">

类型

a. 单行文本框： <input type="text">
b. 密码框：<input type="password">
c. 单选框：<input type="radio">
d. 复选框：<input type="checkbox">
e. 提交按钮：<input type="submit">
f. 重置按钮：<input type="reset">
g. 普通按钮：<input type="button">
h. 图像按钮：<input type="image" width="100">
i. 文件按钮：<input type="file">
同一组单选按钮，其name属性的值要一样
一下为H5新增的一些控件：

    颜色：<input type="color" name="" id=""><br>
    日期：<input type="date" name="" id=""><br>
    年月日时间：<input type="datetime" name="" id=""><br>
    邮箱：<input type="email" name="" id=""><br>
    年月：<input type="month"><br>
    数字：<input type="number" name="" id=""><br>
    范围：<input type="range" name="" id=""><br>
    查找：<input type="search" name="" id=""><br>
    手机号码：<input type="tel" name="" id=""><br>
    时间：<input type="time" name="" id=""><br>
    URL地址：<input type="url" name="" id=""><br>
    年周：<input type="week" name="" id=""><br>
    <input type="submit" value="提交">

HTML5 新增表单控件

属性

a. autocomplete(on/off)：规定input元素是否应该启动自动完成功能
b. autofocus(autofocus)：规定当页面加载时元素自动获得焦点
c. checked(checked)：规定页面加载时应该被选定（针对于radio 和 checkbox）
d. disabled(disabled)：规定应该禁用的input属性
e. name(text)：规定input元素的名称【在提交表单时，只有定义了name属性的表单元素，其值才会被送出】
f. placeholder(text)：input字段预期值的简短的提示信息
d. readonly(readonly)：规定输入字段是只读的
g. type(控件名称)：要显示的input的控件类型
h. value(text)：input元素控件的内容

2.textarea标签

语法：<textarea rows="10" cols="30">我是一个文本框</textarea>
该标签定义了一个多行的带有拖拽按钮的文本输入控件

3.label标签

语法：
<label for="male">Male</label> 
<input type="radio" name="sex" id="male" value="male">
<label for="female">Female</label> 
<input type="radio" name="sex" id="female" value="female">

label标签不会像用户呈现任何特殊的效果，他是伪类鼠标用户改进了可用性，如果在label元素内点击文本，将会触发此控件，浏览器就会自动将焦点转到和标签相关的表单控件上。
label标签的 for 属性值与相关元素的 id 属性相同。

4.select标签

语法：select元素用来创建下拉列表，option作为列表项
<select>
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option value="guangzhou">广州</option>
	<option value="shenzhen">深圳</option>
</select>

select下拉选项

5.optgroup选项组

语法：
<select>
	<optgroup label="hunan">
		<option value="changsha">长沙</option>
		<option value="loudi">娄底</option>
	</optgroup>
	<optgroup label="guangdong">
		<option value="guangzhou">广州</option>
		<option value="shenzhen">深圳</option>
	</optgroup>
</select>
属性值有:label(为选项组规定描述)，disabled(规定禁用该选项组)
该标签经常用于把相关的选项组合在一起

optgroup选项组

6.button按钮

语法：<button type="button">点击</button>

该标签定义一个按钮，在元素内部可以防止文本或者图像，这就是与input元素创建按钮之间的不同
提示：为 button 按钮规定type属性，不同浏览器根据type值有不同的默认值。

HTML框架

介绍：在当前页面中添加嵌套另一个页面，并且可以指定宽高（内联框架）(行内元素）
语法：<iframe src="index.html"></iframe>

字符实体

HTML URL

URL 是一个网页地址
格式：scheme://host.domain:port/path/filename
例如：http://www.baidu.com，http://www.cnblogs.com/liulongbinblogs/p/11649393.html

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的一些URL scheme:

scheme	访问	用途
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

注意：URL不能包含空格，URL编码通常使用 + 来替换空格。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

CSS篇

CSS基础

CSS 全称是 Cascading Style Sheets，层叠样式表，是一种结构化文档添加样式的计算机语言
扩展名是 .css
利用 CSS 同时控制多重网页的样式和布局
语法：选择器 + 一条或多条声明；选择器通常是需要该表扬时的 HTML 元素，每条生命由一个属性和一个值组成；每个声明总是以 ;结束，声明以 {}括起来
CSS 只有一种注释，不管是多行注释还是单行注释，都必须以/*开始、以*/结束，中间加入注释内容。

选择器

元素选择器

元素选择器也被称为了标签选择器、类型选择器，可以直接使用元素的标签名当做选择器，将选择页面上所有该种标签。
标签选择器的作用：覆盖面大，通常用于标签的初始化。

例如：
span{
	color: red;
}

ID 选择器

锚点也是 id ，datalist 也对应的 id

标签可以有id属性，是这个标签的唯一标识
Id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，习惯上一般为小写字（驼峰命名法）
同一个页面上不能有相同的id标签

例如：
 #id1{
 	color: red;
 }

Class 选择器

多个标签可以共用一个类名
一个标签可以设置多个类，中间使用空格隔开；若一个标签同时设置两个类，并且存在样式冲突则样式显示写在后面一个
原子类，是一种写法（一个类名对应一个样式，并且命名是和规则有关的），从而在标签上附加不同的类名来生成对应的效果，可以有效减少相关的代码；例如：.flex{display:flex;} 要慎用

例如：
.green {
	color: green;
}

* 通用选择器

通用选择器也被成为通配符 (*)，用于匹配根标签html 的所有标签
该选择器一般不常用，通常会单独初始化相关元素的样式；该标签会影响网页性能，回流重绘的时候比较消耗时间

* {
	padding: 0;
	margin: 0;
}

复合选择器

复合选择器可以由两个或多个基础选择器通过不同的方式组合而成

后代选择器

概念：后代选择器又被称为包含选择器，即父元素下的所有子元素（包括儿子、孙子等）

.grandfather.houdai{
	color: red;
}

子选择器

概念：子选择器表示父元素下的子元素（只有儿子）

.father > .son {
	color: red;
}

并集选择器

概念：并集选择器是同时选中多个选择器进行样式设置，中间用 “,” 隔开

.one, .two, .three {
 color: red;
}

交集选择器

概念：交集选择器由两个选择器组成，第一个是标签，第二个是class选择器（或者id选择器），两个选择器之间不能有空格
选择器之间不能有任何连接字符

/*该选择器选中的是类名为 one 的段落*/
p.one{
	color: red;
}

相邻兄弟选择器

概念：可选择紧接在另一个元素后的元素，且二者有相同的父元素

/*紧跟在类名为 one 后的类名为 two 的元素*/
.one + .two {
	color: red;
}

/*相邻兄弟选择器有一个很妙的用途就是用来设置中间元素的间隔（margin）*/
/*css*/
li + li {
	margin: 15px;/*相邻的li之间会有15像素的外边距*/
}
<!--html->
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

通用兄弟选择器

概念：选择指定匹配属于指定元素的同级元素的所有元素

/*选择类名为 one 元素的后面的所有类名为 two 的兄弟节点*/
.one ~ .two {
	color: red;
}

属性选择器

概念：属性选择器就是通过选中属性（属性值），从而选中标签，属性选择器的一半对应着特殊标签
id选择器也属于属性选择器，前面的字符是 “#”；类选择器同理，前面的字符是 “.”

有以下四种：

[attr]：

	/*
		[属性名] 选中含有指定属性的元素
	*/
	[title] {
		color: red;
	}
	<p title="abc">我是p</p>

[attr = “val”]：

	/*
		[属性名=属性值] 选中含有指定属性和属性值的元素
	*/
 	[title="abc"] {
		color: red;
	}

[attr ^= “val”]：

	/*
		[属性名 ^= 属性值] 选中属性值以指定之开头的元素
	*/
	[title ^= abc] {
		color: red;	
	}

[attr |= “val”] ：

	/*
		[属性名 |= 属性值] 选中属性值中以属性值开头或者属性值-开头的元素，
		典型的应用时来匹配语言简写代码，例如zn-CN,zh-TW,可以用zh 作为 "val"
		（属性中必须是完整且唯一的单词）
	*/
		[lang |= zn] {
			color: red;
		}
		<p lang="en"></p>
		<p lang="en-us"></p>

[attr ~= “val”]：

	/*
 		[属性名 ~= 属性值] 选中以 attr命名的属性的元素，并且该属性是一个以空格为分隔的值列表，
 		其中至少有一个值为 val
 	*/
 	[title ~= "one"] {
		color: red;
	}
	<p title="one two></p>

[attr $= “val”]：

	/*
		[属性名 $= 属性值] 选中以 attr 命名的属性，且属性值以 val 结尾的元素
	*/
	[title $= "two"] {
		color: red;
	}
	<p title="one-two"></p>

[attr *= “val”]：

	/*
		[属性值 *= 属性名] 选中带有 val 命名的属性，且属性值至少包含一个 val 值的元素
	*/
	[title *= one] {
		color: red;
	}
	<p title="onetwo"></p>

伪类选择器

概念：用来描述一个元素的特殊状态。比如：第一个元素、某个元素的子元素、鼠标点击的元素等等
伪类是开头为冒号的关键字
伪类选择器主要可以分为：动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器

动态伪类选择器
- E:link(链接伪类选择器)：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过（常用于链接锚点上）
- E:visited(链接伪类选择器)：选择匹配的元素E，而且匹配元素被定义了超链接并已被访问过（常用于链接锚点上）
- E:active(用户行为选择器)：选择匹配的E元素，且匹配元素被激活，鼠标点击按钮但是不松手（常用于链接锚点和按钮上）
- E:hover(用户行为选择器)：选择匹配的E元素，且用户鼠标停留在E元素上
- E:focus(用户行为选择器)：选择匹配的E元素，而且匹配元素获取焦点

a标签上的四种伪类选择器(link、visited、hover、active）存在一定的顺序，各个样式之间的顺序有讲究，一旦出现排列错误就容易形成覆盖，导致其中某个样式无法显示：hover 必须置于 link 和 visited 之后才是有效的，active 必须置于 hover 之后才是有效的

UI元素状态伪类选择器
- E:checked（选中状态伪类选择器）：匹配选中的复选框按钮或者单选按钮表单元素
- E:enabled（启用状态伪类选择器）：匹配所有启用的表单元素
- E:disabled（不可用状态伪类选择器）：匹配所有禁用的表单元素

UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type=“checkbox”"有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用：

 input[type="text"]:disabled {
 	border:1px solid #999;
 	background-color: #fefefe;
 }
 <!--注意：IE6-8不支持":checked",":enabled",":disabled"这三种选择器。-->

结构伪类选择器
- E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
- E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
- E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
- E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
- E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
- E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素
- E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素
- E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
- E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
- E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素
- E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素
- E:empty：选择没有子元素的元素，而且该元素也不包含任何文本节点

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

否定伪类选择器
- E:not(F)：匹配所有除元素F外的E元素

	<!--对 form 中的所有input加边框，但是不给 submit 加边框-->
	input:not([type("submit")]) {
			border: 1px solid #ccc;
	}

CSS创建

插入样式表有三种方式：外部样式表、内部样式表、内联样式
优先级：内联样式 > 内部样式 > 外部样式

外部样式表

<head>
	<link rel="stylesheet" href="index.css" type="text/css">
</head>

内部样式表

<head>
	<style>
		p{ 
			color: red;
		}
	</style>
</head>

内联样式

<p style="color:red;margin-left:20px">这是一个段落</p>

CSS背景

属性	可选值	说明
background-color	十六进制(#ccc)、RGB值(rgb,0,0)、颜色名(red)称	定义背景的颜色
background-image	url(图像地址)	描述了元素的背景图像，默认是平铺重复显示
background-repeat	repeat-x、repeat-y、no-repeat	定义背景图像在页面的水平或者垂直方向上的平铺
background-attachment	scroll(背景图像随页面的滚动而滚动)、fixed(固定不动)、local(随着元素内容的滚动而滚动)	设置背景图像是否固定或者岁页面的其余部分滚动
background-position	方位(left top)、百分比(50% 50%)、数字(50px 50px)	设置背景图像的起始置
简写	按照上述的顺序进行书写	background: red url(..) no-repeat fixed left top

CSS 文本

属性	属性值	说明
color	十六进制(#ccc)、RGB值(rgb,0,0)、颜色名(red)称	设置文本颜色
direction	ltr(left to right)、rtl(right to left)	设置文本的方向
letter-spacing	固定值	设置字符间距（用于减少字符间的空白）
line-height	固定值，百分比，数字	设置行高（行高等于高则文本垂直居中）
text-align	left,right,center	对齐元素中的文本
text-decoration	underline(下划线),overline(上划线),line-through(删除线)	向文本添加修饰
text-indent	百分比，固定值	定义文本的缩进
text-shadow	h-shadow,v-shadow,blur,color	设置文本的阴影
text-transform	uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母大写)	设置文本大小写
vartical-align	baseline,middle,top,bottom	设置元素的垂直对齐(将图片和很尬内块元素、文字垂直居中：vertical-algn:middle)
white-space	nowrap(不换行),pre-wrap(保留空白符序列，正常的进行换行),pre-line(合并空白符序列，保留换行符)	设置元素中空白的处理方式
word-spacing	固定值	设置字间距

1、关于vartical-align:

2、关于 word-spacing 和 letter-spacing

letter-spacing:英文中是指的是字母之间的间隔；中文中是字与字之间的间隔
word-sapcing:英文中是单词之间的间隔；中文不能自动解析，根据空格来进行分隔

CSS字体

利用 font-family 属性来设置文本的字体系列

属性	属性值	说明
font-family	Times New Roman,Serif,Georgia	设置文本的字体系列
font-size	数字，百分比，尺寸（small,large,medium）	设置文本的字体大小
font-style	normal(默认值),italic(斜体),oblique(倾斜)	设置文本的字体样式
font-varient	small-caps(小型大写字母：与小写字母一样高，外形与大写字母保持一致)	以小型大写字体或者正常字体显示文本。
font-weight	bold(粗体：400),100-700（定义又细到粗）	设置文本字体的粗细

CSS链接

超链接有四种连接状态：

a:link 用户未访问过的链接
a:visited 用户已访问过的链接
a:hover 当用户将鼠标放在链接上时
a:active 链接被点击的那一刻

在为超链接设置样式时，有顺序之分：

a:hover必须跟在 a:link 和 a:visited 后面
a:active 必须跟在 a:hover 后面
l[link]ov[visited]e h[hover] a[active]te (爱恨情仇)

CSS列表

列表常用于布局中，整齐有序
默认情况下，ul 和 ol 都设置了内边距和外边距

属性	属性值	说明
list-style	list-style-type list-style-image	简写属性
list-style-type	none(移除列表项标记),disc(默认实心圆),circle(空心圆),square(实心方块)[ul]	设置列表项标志的类型
list-style-image	图像的url	将图像设置为项目标记类型
list-style-position	inside,outside(默认值)	设置列表项标值的位置

列表项项目标记可以进行自定义设置：

<style>
	li {
		list-style: none;
	}
	/*利用伪元素进行列表项标记的自定义设置*/
	li::before {
		content: "★";
		color: red;
	}
</style>

CSS表格

border属性：指定表格的边框样式（宽度，样式，颜色）

/*全部设置边框，表格会形成一个双边框，因为 th/td 元素有独立的边界*/
table, tr, td {
	border: 1px solid #ccc;
}

border-collapse属性：设置表格的边框是否被折叠成一个单一的边框或隔开，默认值是 separate(边框会分开，不会忽略 border-spacing 和 empty-cells属性)

table {
	border-collapse: collapse;
}
table, th, td {
	border: 1px solid black;
}

caption-side属性：设置表格标题的位置，默认值是 top

caption {
	caption-side: bottom;
}

CSS盒子模型

概念：在CSS中，CSS和模型本质是一个盒子，封装周围的HTML元素，包括外边距，边框，内边距和内容：box-sizing: border-box | content-box(默认值)
content-box 是标准的盒子模型；border-box是 IE盒子模型
元素的总宽度=内容+左右内边距+左右边框+左右外边距

content-box：默认值，width 和 height 会分别应用到元素的内容框。在宽度和高度之外绘制元素的padding , border , margin
总宽度=margin+padding+border+width(只包含内容)
border-box：为元素设定的 width 和 height 属性决定了元素的边框和。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度
总宽度=margin+width(border+padding+内容)
两者区别：将盒子设置为IE盒子模型后，盒子的大小保持不变，内容的大小会发生变化（总大小减去边框和内边距）；但如果是默认的盒子模型，盒子的大小将会保持不变。总结来说：IE盒子模型是总不变，内容变；标准盒子模型是内容不变，总变。
关于border-box的应用：
- 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
- 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

CSS边框

概念：盒子模型中的一部分，是盒子内边距和外边距之间的中间部分
代码： border: 1px solid #ccc

边框宽度 border-width

边框的宽度通过 border-width来指定，属性值的方式可以使用长度值或者关键字（thick、medium、thin），CSS中没有定义这三个关键字的具体大小，Chrome 浏览器中三个关键字的值分别为 1px、3px、5px。。

边框样式 border-style

边框样式

边框颜色 border-color

border-color 属性用于设置边框的颜色，方式有以下三种：

name ：指定颜色的名称，如 “red”
RGB ：指定RGB值，如"rgb(255,0,0)"
Hex ：指定十六进制值，如"#ff0000"
注意：可以设置边框颜色为 transparent(用在利用CSS创建小三角)；单独设置border-color不起作用，需要和border-style搭配使用

简写

单独设置每边

CSS中可以单独设置每个方向：

border-top: 1px solid #ccc
border-top-style: solid

简写

每个属性的简写的顺序都一样，以下拿 border-width 来举例说明：（顺时针方向）

border-width: 1px (上下左右均为1px)
border-width: 1px 2px (上下1px，左右2px)
border-width: 1px 2px 3px(上1px，左右2px，下3px)
border-width: 1px 2px 3px 4px(上1px，右2px,下3px，左4px)

CSS外边距

概念：外边距定义元素周围的空间，两个盒子之间的空隙就是外边距
margin 没有背景颜色，是完全透明的
margin-top | margin-right | margin-bottom | margin-left
代码：margin: 100px:

margin 设置的几种写法：

margin 和 border 一样可以一起设置，也可以按边设置。

margin: 0 (四个方位均为0px)
margin: 10px 20px (上下10px，左右20px)
margin: 10px 20px 30px (上10px，左右20px，下30px)
margin: 10px 20px 30px 40px (上10px，左20px，下30px，右40px)

margin 的设置事项

水平方向相邻元素的 margin 值不会重叠
垂直方向相邻元素的 margin 值会重叠，最终以两者之间最大值为准
利用该属性进行块级元素水平居中：margin: 0 auto

CSS内边距

概念：内边距定义元素内容与边框之间的空间
当内边距被清除时，所释放的区域将会受到元素背景颜色的填充
代码：padding: 100px

注意：填充的属性和margin 一样，可以单独设置也可以整体简写设置

CSS轮廓

概念：轮廓是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
代码： outline: #ccc dotted thick

轮廓和边框类似，除简写时的顺序不一样(outline:outline-color outline-style outline-width)
和border的区别：

outline不占空间，不会增加额外的 width 或者 height。之后的元素会覆盖
不能单独设置边，总是围绕所有边
不能设置多层，只能有一个外边框
根据内部元素形状而定，并不一定是矩形

CSS显示与可见性

display

概念：该属性设置一个元素应该如何显示

display: block;
- 设置元素为块级元素
- 此元素前后会带有换行符
display: inline;
- 设置元素为行内元素，一行内显示
display: inline-block;
- 设置元素为行内块元素
display: none;
- 隐藏元素，并释放元素的位置

visibility

概念：该属性指定一个元素应该可见还是隐藏

visibility: visible;
- visible属性值定义的元素是可见显示的，是默认的属性值。
visibility: hidden;
- hidden属性值定义的元素是不可见不显示的，但是元素还会占据原有的空间。
visibility: collapse;
- collapse属性值定义不同的元素有不同的效果。
- 用在表格元素时：会删除一行或一列，不会影响表格的布局，类似于 display: none；
- 用在非表格元素上时：和hidden属性值的效果一样；

CSS定位

概念：CSS定位属性可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
CSS中有三种基本的定位机制：普通流、浮动和绝对定位
position 属性有五个属性值：static、relative、absolute、fixed、sticky

static定位

该定位方式是默认的定位，即静态定位。静态定位的元素不会受到 top, bottom, left, right 的影响。遵循正常的文本流对象。
代码：position:relative

relative定位

相对定位，其位置相对于其正常时的位置。移动相对定位元素，原本所占的空间不会发生改变。没有脱标，会与下方的元素发生重叠。
通常和绝对定位搭配使用，子绝父相
代码：

.relative{
	position: relative
	/*相对于正常时的位置的左侧向左移动20px*/
	left: -20px;
}

absolute定位

绝对定位，其位置相对于距离最近的定位的父元素，如果没有已定位的父元素，则参考对象是浏览器；绝对定位的元素会使元素 脱标(脱离标准流),会与其他元素发生重叠。
代码：

.parent {
	position: relative;
}
.son {
	position: absolute;
	/*相对于 .parent 的父元素的上端120px，左侧100px*/
	top: 120px;
	left: 100px;
}

fixed定位

固定定位，相对于浏览器窗口的位置，即使是窗口滚动他也不会移动。固定定位会使元素脱标，因此不占据空间，并会与其他元素重叠。
代码：

.pos_fixed{
	position: fixed;
	/*固定在距离浏览器上方10px，右侧10px位置*/
	top: 10px;
	right: 10px;
}

sticky定位

粘性定位，基于用户的滚动位置来定位。
粘性定位就是元素依赖于用户的滚动，position: relative与position:fixed之间切换。当正常文本流显示的时候，他和相对定位一样，当页面超出滚动目标，他的表现就像固定定位，他会固定在某个位置。
元素定位表现在跨特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom, left之一，只有制定了其中一个，才可使粘性定位生效，否则就和相对定位一样。
代码：

.sticky{
	position: sticky;
	position: -webkit-sticky;/*Safari*/
	top: 0;
}

重叠的元素 z-index

元素定位于文档流无关，所以他们可以覆盖在页面上的其他元素。
z-index属性制定了一个元素的堆叠顺序，数值越大，则越靠前，也就是可以覆盖在其他元素上。默认值是auto，也可以为负数，不能为小数。
z-index 只用在定位的元素上（除static之外）。
如果两个定位元素重叠，没有指定z-index，则在后面的将会覆盖前面的。（同一个层叠上下文区域中）

标准流盒子，低于浮动盒子，浮动盒子低于定位盒子。（高低和占不占位置无关）
用法：

必须有定位（除static之外）
给定 z-index 的值为层级的值（不给则是默认值0）
层级为0的盒子，比浮动和标准流高
层级为负数的盒子，比标准流和浮动低
层级不取小数
层级一样，后面的盒子比前面的层级高
浮动或者标准流的盒子，后面比前面高
absolute 不占位，relative占位，层级的高低和占不占位置无关

浮动

概念：浮动是指将元素向左或向右移动，同时其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动之后的元素将会围绕他，浮动之前的元素步骤影响
几个浮动的元素放到一起，如果有空间的话，他们之间将会彼此相邻。
代码：float: left / right

浮动的特点

浮动元素会脱离标准流（脱标：浮动的盒子不再保留原先的位置）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性（不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性）
浮动的元素，display自动设置为 block
一个元素浮动，理论上其他的兄弟元素也会浮动
浮动的元素有“自围”效果（文字环绕）

浮动带来的影响

脱离标准流，不占据页面空间
浮动会将行内元素和行内块元素转化为块元素
高度塌陷（包含框的高度小于浮动框的时候出现的问题）

清除浮动

概念：clear 属性指定元素两侧不能出现浮动元素。
代码：clear:left / right / both

额外标签法

.clear {
	clear: both;
}

开启BFC(父盒子添加overflow)

.container {
		overflow: hidden;
	}

after 伪元素/ before 和 after 双伪元素

.clearfix::before,
.clearfix::after {
	display: block;
	content:"";
	clear: both;
}

父盒子指定高度

CSS布局 overflow

概念：overflow 属性用于控制内容溢出元素框时显示的方式。该属性只工作于指定高度的块元素上。
代码：overflow: visible / hidden / scroll / auto

visible

该属性值意思是内容会正常的溢出元素框

hidden

该属性值当文本溢出时将不会在页面中显示，则被裁掉了

scroll

该属性值是当文本溢出元素框时，会生成滚动条

CSS伪类和伪元素

CSS伪类

概念：CSS伪类是用来添加一些选择器的特殊效果，主要是用来修饰一类元素
语法： selector:link{}

详见上述 *选择器篇>复合选择器>伪类选择器*

CSS伪元素

概念：CSS伪元素是用来添加一些选择器的特殊效果，主要是用来修饰一个元素
语法：selector::after{}

在这里插入图片描述 CSS伪元素是在DOM流中创建一个原先不存在的元素，但这个元素是虚拟不存在的；CSS伪类是对DOM流中存在的对象进行修饰。

媒体类型

概念：@media 规则允许在相同样式表为不同媒体设置不同的样式
代码：@media screen {p{...}}

媒体类型

除了优秀就是瘦

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS复习

HTML&CSS 全面知识点复习....
复制链接

扫一扫

专栏目录