前端基础知识（更新中）

最新推荐文章于 2024-08-14 12:22:11 发布

Ak.imba

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量223

点赞数

分类专栏：前端知识总结文章标签： css html5

本文链接：https://blog.csdn.net/weixin_44542031/article/details/105806789

版权

前端知识总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML和CSS基础知识

本文章为B站尚硅谷前端学习视频的笔记整理

一、基本语法

（一）元素

标题：一到六级标题：h1到h6 <h1></h1>
段落：<p></p>
链接：<a href="url"></a>
图像：<img src="url" alt="替换文本属性" />
换行：<br />
分割线: <hr />
表格：<table></table>
- 边框属性:border="1"
- 表头：<th></th>
- 行：<tr></tr>
- 单元格：<td></td>
- 表格标题：<caption></caption>
- 表格页眉：<thead></thead>
- 表格主体：<tbody></tbody>
- 表格的页脚：<tfoot></tfoot>
- 表格列的属性：<col align="left" />
- 表格列的组：<colgroup></colgroup>
注释：

（二）属性

class规定元素的类名
id规定元素的唯一id
style规定元素的内样式
title规定元素的额外信息（可在工具提示中显示）

（三）文本格式化标签

<b></b>定义粗体文本
<big></big>定义大号字
<em></em>定义着重文字,默认使用斜体文字
<i></i>定义斜体字
<small></small>定义小号字
<strong></strong>定义加重语气，默认加粗
<sub></sub>定义下标字
<sup></sup>定义上标字
<ins></ins>定义插入字
<del></del>定义删除字

（四）计算机输出标签

<code></code>定义计算机代码
<kbd></kbd>定义键盘码
<samp></samp>定义计算机代码样本
<tt></tt>定义打字机代码a
<var></var>定义变量
<pre></pre>定义预格式文本

（五）引用、引用和术语定义

<abbr></abbr>定义缩写
<acronym></acronym>定义首字母缩写
<address></address>定义地址
<bdo></bdo>定义文字方向
<blockquote></blockquote>定义长的引用(块级引用)
<q></q>定义短的引用语，浏览器默认加引号
<cite></cite>定义引用、引证
<dfn></dfn>定义一个定义项目

（六）CSS

<style type="text/css"></style>样式定义
<link rel="stylesheet" type="text/css" href="theme.css" />定义资源引用

（七）其它

<div></div>定义文档中的节或区域
<span></span>定义文档中的行内的小块或区域
<nav></nav> 标签定义导航链接的部分。
<article> 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<aside>标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。可用于定义文章的侧栏

二、meta标签

使用meta标签指定编码

	<meta charset="utf-8" />

使用meta标签设置关键字

	<meta name="keywords" content="html5,前端" />

使用meta标签设置描述信息

	<meta name="description" content="前端相关基础知识">

meta标签请求重新定向：<meta http-euiv=“refresh” content=“秒数，url=目标路径” />

	<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />

三、选择器

（一）常用选择器

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>常用选择器</title>
			<style type="text/css">
				p{
					color: aqua;
				}
				/* 选择特定id */
				#p1{
					color: black;
				}
				/* 选择特定class */
				.p2{
					color: blue;
				}
				/* 选择同时满足p3和p2的元素,交集选择器 */
				#p3.p2{
					color:red;
				}
				/* 并集选择器 */
				#p1,.p2{
					color: antiquewhite;
				}
			</style>
		</head>
		
		<body>
			<p>这是一个段落</p>
			<p>这是一个段落</p>
			<!-- 设置ID，可以用#id选择 -->
			
			<p id="p1">这是一个段落</p>
			<!-- 设置class，可以用.class选择 -->
			<p class="p2 p3">这是一个段落</p>
			<p id="p3" class="p2">这是一个段落</p>
		</body>
	</html>

（二）属性选择器

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>属性选择器</title>
			<style type="text/css">
				/*
				title属性可以给任何标签指定
				当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
				*语法：[属性名="属性值"] 选取含有指定属性的元素
				 */
				 [title="属性提示"]{
					 background-color: antiquewhite;
				 }
				 /* 选择以"ab"为开头的属性 */
				 [title^="ab"]{
					 background-color: aqua;
					 width: 200px;
				 }
			</style>
			 
		</head>
		<body>
			
			<p title="属性提示">这是一个段落</p>
			<p title="属性提示">这是一个段落</p>
			<p title="属性提示">这是一个段落</p>
			<p>这个一个无属性段落</p>
			<p>这个一个无属性段落</p>
			<p>这个一个无属性段落</p>
			<p title="ab">这个一个无属性段落</p>
			<p title="abc">这个一个无属性段落</p>
			<p title="abcd">这个一个无属性段落</p>
		</body>
	</html>

（三）伪类选择器

顺序：:link = :visited > :hover > :active

:link 表示普通的链接（没访问过的）
:visited表示访问过的链接,由于涉及用户隐私问题，所以visited伪类只能设置字体颜色
:hover鼠标移入效果
:active鼠标点击状态效果
:focus获取鼠标焦点

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title伪类选择器</title>
			<style type="text/css">
				/*
					:link
						表示普通的链接（没访问过的）
				*/
			   a:link{
				   color: #00FFFF;
			   }
			   /* 
					:visited
						表示访问过的链接
						由于涉及用户隐私问题，所以visited伪类只能设置字体颜色
				*/
			   a:visited{
				   color: #0000FF;
			   }
			   /* 
					:hover
						鼠标移入效果
				*/
			   a:hover{
				   background-color: chartreuse;
			   }
			   /* 
					:active
						鼠标点击状态效果
				*/
			   a:active{
				   color: #000000;
			   }
			   /* 
					:focus
						获取焦点
				*/
			   input:focus{
				   background-color: antiquewhite;
			   }
			</style>
		</head>
		<body>
			<a href="https://www.baidu.com">百度一下</a><br>
			<a href="https://www.icourse163.org">mooc</a><br>
			<!-- 使用input创建文本输入框 -->
			<input type="text">
		</body>
	</html>

（四）子父元素

选择后代元素语法：祖先元素后代元素{}
选择指定后代元素的指定子元素： >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择后代元素 语法：祖先元素 后代元素{}*/
			#p1 span{
				color: #0000FF;
			}
			/* 选择指定后代元素的指定子元素 */
			#p2 > span{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="p1">
			<span>
				这是子（后代）元素（变）
			</span>
			<p>
				<span>
					这是后代元素（变）
				</span>
			</p>
		</div>
		<div id="p2">
			<span>
				这是指定的子元素（变）
			</span>
			<p>
				<span>
					这是后代元素（不变）
				</span>
			</p>
		</div>
	</body>
</html>

（五）伪元素

使用伪元素来表示元素中的一些特殊的位置

::first-letter第一个字符
::first-line第一行字符
:before元素最前边的部分
:after元素最后边的部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素</title>
		<style type="text/css">
			/* 使用伪元素来表示元素中的一些特殊的位置 */
			/* 为P1中第一个字符设置一个特殊的样式 */
			#p1::first-letter{
				color: #FF0000;
			}
			/* 为p2中的第一行字符设置一个特殊的样式 */
			#p2::first-line{
				color: #0000FF;
			}
			/* 
				:before表示元素最前边的部分
					一般before都需要结合content这个样式一起使用
					通过content可以向before的位置添加一些内容
			 */
			#p3:before{
				content:"before部分";
				color: #FAEBD7;
			}
			/* :after表示元素最后边的部分 */
			#p3:after{
				content:"after部分";
				color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<p id="p1">
			这是一个段落这是一个段落这是一个段落这是一个段落
			这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
		</p>
		<p id="p2">
			这是一个段落这是一个段落这是一个段落这是一个段落<br>
			这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
		</p>
		<p id="p3">
			这是一个段落这是一个段落这是一个段落这是一个段落<br>
			这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
		</p>
	</body>
</html>

（六）子元素的伪类

:first-child选择第一个子标签
:last-child选择最后一个子标签
:nth_child(参数)先泽指定位置的子元素

参数：
- even偶数位置的子元素
- odd奇数位置的子元素
:first-of-type选择指定类型中满足条件的子元素
:last-of-type选择指定类型中满足条件的子元素
:nth-of-type选择指定类型中满足条件的子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素的伪类</title>
		<style type="text/css">
			 :first-child{
				 background-color: yellow;
			 }
			 :last-child{
				 background-color: yellow;
			 }
			 :nth-child(2){
				 background-color: burlywood;
			 }
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
	</body>
</html>

（七）兄弟元素选择器

前一个+后一个可以选中一个元素后紧挨的指定的兄弟元素(不能有相隔)
前一个~后一个选中后边所有指定的子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>兄弟元素选择器</title>
		<style type="text/css">
			/* 为span后的p元素设置一个背景颜色为黄色
				后一个兄弟元素选择器
				作用：可以选中一个元素后紧挨的指定的兄弟元素(不能有相隔)
				语法：前一个+后一个
			 */
			span + p{
				background-color: yellow;
			}
			/* 选中后边所有指定的子元素 
			语法：前一个~后一个*/
			div~p{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<span>我是一个span标签</span>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<div>我是一个div标签</div>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
	</body>
</html>

（八）否定伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>否定伪类</title>
		<style type="text/css">
			/* 为所有的除了class为hello的p元素设置背景颜色为黄色 */
			p:not(.hello){
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p class="hello">我是一个p标签</p>
		<p class="hello">我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
	</body>
</html>

（九）样式的继承

CSS中，祖先元素上的样式，会被他的后代元素继承

但是背景、边框。定位相关的样式都不会被继承

（十）选择器优先级

使用不同的选择器选择同一个元素，并且设置不同的样式时，最终会选择那个选择器定义的样式，由选择器的优先级决定

优先级规则：

内联样式优先级1000
id选择器优先级100
类和伪类优先级10
元素选择器优先级1
继承的样式没有优先级
当选择器中有多个选择器时，将所有选择器的优先级相加比较，但选择器优先级计算不会超过它的最大优先级层次
如果选择器优先级一样，则使用靠后的样式
并集选择器优先级单独计算
!improtant可以添加在样式的最后，此时该样式将会获得最高优先级

四、列表

列表之间可以相互嵌套

（一）无序列表

<ul type="disc"></ul>创建无序列表（块元素）

可选值：
- disc默认值，实心圆
- square实心方块
- circle空心圆
<li></li>在ul中创建列表项（块元素）

（二）有序列表

<ol type="1"></ol>创建有序列表

可选值：
- 1阿拉伯数字
- a或A英文字母
- i或I罗马数字
<li></li>在ol中创建列表项

（三）定义列表

定义列表用来对一些词汇或内容进行定义

<dl></dl>创建一个定义列表
<dt></dt>被定义的内容
<dd></dd>对定义内容的描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<ul type="disc">
			<li>
				第一天
				<ol>
					<dl>
						<dt>
							<li>第一项</li>
						</dt>
						<dd>第一天的第一项项目计划描述</dd>
					</dl>
					<li>第二项</li>
					<li>第三项</li>
				</ol>
			</li>
			<li>第二天</li>
			<li>第三天</li>
		</ul>
	</body>
</html>

五、单位

（一）长度单位

像素px
百分比根据父元素的大小计算
em与百分比类似，相对于当前字体大小来计算，1em=设置的字体大小
rem 相对于根元素（）字体大小计算

（二）颜色单位

red在CSS中可以直接用颜色单词来表示不同的颜色
rgb(255,255,255)使用RGB值来表示颜色,值也可以使用百分数
#FFFFFF使用三组两位的十六进制RGB值表示颜色

（三）HSL值和HSLA值

H：色相（0~360）；
S：饱和度，颜色的浓度（0%~100%）；
L：亮度（0%~100%）；

六、字体和文本

（一）字体的样式

style=“属性:属性值”

color:red设置文字的颜色
font-size:30px设置文字的大小
font-family:雅黑指定文字字体。可以指定多个字体，用逗号隔开，浏览器优先采用前面的字体
font-style:normal指定字体的样式
1. normal默认值，文字正常显示
2. italic文字会以斜体显示
3. oblique文字会以倾斜的效果显示
font-weight用来设置文本的加粗效果
1. normal默认值，文字正常显示
2. bold文字加粗显示
3. 可以直接指定100到900之间的9个值（大多数字体只有两种效果）
font-variant:small-caps文本的小写字母以小型大写字母显示
font:可以同时设置字体相关的所有样式，不同的值之间用空格隔开，没有顺序要求，如果不写则使用默认值，但文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式。使用该方法性能较好

（二）字体的分类

在font-family属性中指定大的字体分类之后，浏览器会自动选择该类字体

serif衬线字体
sans-serif非衬线字体
cursive草书字体
fantasy虚幻字体
monospace等宽字体

（三）文本样式

text-transform设置文本的大小写
1. none默认值，正常显示
2. capitalize单词的首字母大写，通过空格来识别单词
3. uppercase所有字母大写
4. lowercase所有字母小写
text-decoration为文本设置修饰
1. none默认值，不添加任何修饰
2. underline为文本添加下划线（超链接默认添加）
3. over-line为文本添加上划线
4. line-through为文本添加删除线
letter-spacing可以指定字符间距
word-spacing可以指定单词的间距
text-align 设置对齐方式
1. left 默认值，文本左对齐
2. right 文本右对齐
3. center 文本居中对齐
4. justify 两端对齐（自动调整文本之间的空格）
text-indent 用来设置首行缩进，可用px或em，可以是正值或负值
line-height设置行高，可以接受数字、像素值或百分值，百分值会相对字体计算，数字会将行高设置为字体相应的倍数（行间距=行高-字体大小）

用font设置行高：font:字px/行高px 字体

七、盒子模型

一个盒子的可见框大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

（一）内容区

使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度

（二）为元素设置边框（border)

要为一个元素设置边框必须指定三个样式

大部分浏览器，边框的颜色和宽度都有默认值，但边框样式的默认值是none

border-width 设置边框的宽度，
1. 如果指定四个值，会分别设置给上、下、左、右边框
2. 如果指定三个值，会分别设置给上、左右、下边框
3. 如果指定两个值，会分别设置给上下、左右边框
4. 如果指定一个值，则四边都是该值
5. 专门设置指定边的宽度
  1. border-top-width
  2. border-right-width
  3. border-bottom-width
  4. border-left-width
border-color 设置边框的颜色
1. border-top-color
2. colorer-right-color
3. border-bottom-color
4. border-left-color
border-style 设置边框的样式
1. none 默认值，没有边框
2. solid 实线
3. dotted 点状边框
4. dashed 虚线
border 边框的简写样式，通过它可以同时设置边框的样式、宽度、颜色。只能同时指定四个边，没有顺序要求
border-top
border-right
border-bottom

border-left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			.box1{
				width:100px;
				height: 100px;
				background-color: #00FFFF;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #7FFF00;
				border-width:10px;
				border-color: red;
				border-style:solid;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: #ffff00;
				border-top-width: 10px;
				border-bottom-width: 20px;
				border-left-width: 30px;
				border-right-width: 40px;
				border-right-color: #0000FF;
				border-top-color: #CD5C5C;
				border-left-color: #000000;
				border-bottom-color:darkorange;
				border-style:solid;
			}
			.box4{
				width: 100px;
				height: 100px;
				background-color: #ffff00;
				border-width:30px 20px 20px 40px;
				border-right-color: #0000FF;
				border-top-color: #CD5C5C;
				border-left-color: #000000;
				border-bottom-color:darkorange;
				border-style:dotted;
			}
			.box5{
				width:100px;
				height: 100px;
				background-color: #00FFFF;
				border:10px #7FFF00 solid;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			第一个盒子模型
		</div>
		<div class="box2">
			第二个盒子模型
		</div>
		<div class="box3">
			第三个盒子模型
		</div>
		<div class="box4">
			第四个盒子模型
		</div>
		<div class="box5">
			第五个盒子模型
		</div>
	</body>
</html>

（三）内边距（padding）

内容区和边框之间的距离，内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上

padding 内边距的简写属性(四种指定方式同上)
padding-top
padding-right
padding-bottom
padding-left

（四）外边距（margin)

外边距不会影响盒子可见框的大小，但会影响盒子的位置

左和上外边距会影响元素自身，下和右边距会影响其他元素

设置为负值则往与正值相反的方向移动

margin-top 上外边距，设置一个正值，元素会向下移动
margin-right 默认情况下不会产生任何效果
margin-bottom 设置一个正值，改变下方元素的位置
margin-left 左外边距，设置一个正值，元素会向右移动
margin 简写属性，可以同时设定四个方向的外边距

（五）水平布局

元素在水平方向的布局由七个元素共同决定，且满足

margin-left border-left padding-left width border-right margin-right 相加等于父元素的宽度

如果相加结果不等于父元素宽度，则成为过度约束，则等式会自动调整

自动调整情况：若等式中没有auto值，则自动调整margin-right来满足条件

七个值中有三个可以设置为auto:

width margin-left margin-right

设置为auto的值会根据情况自动调整。如果width和其它两个值同时设置了auto值，则会将width调整为最大

（六）垂直布局

overflow 处理子元素溢出，可选值：

visible 默认值。子元素会从父元素中溢出，在父元素的外部显示
hidden 溢出内容将会被裁剪不显示
scroll 生成垂直和水平两个方向的滚动条
auto 根据需要生成滚动条

overflow-x 处理水平方向的溢出
overflow-y 处理垂直方向的溢出

（七）垂直方向的相邻外边距的折叠

兄弟元素间的垂直外边距会取其中一者绝对值的较大值

如果值一正一负，则取两者的和

父子元素间的相邻外边距，子元素的会传递给父元素

会影响页面的布局，需要进行处理

（八）行内元素的盒模型

行内元素不支持设置宽度和高度

行内元素可以设置padding，垂直方向padding不影响界面布局

行内元素可以设置border，垂直方向不影响页面的布局

行内元素可以设置margin，垂直方向不影响页面的布局

display 用来设置元素显示的类型，可选值：
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素（即可以设置宽度和高度，又不会独占一行）
- table 将元素设置为一个表格
  - table-cell 设置为单元格
- none 元素不在页面中显示
visibility 用来设置元素的显示状态
- visible 默认值。元素在页面中正常显示
- hidden 元素在页面中隐藏不显示，但是依然占据页面的位置

（九）默认样式

通常情况，浏览器都会为元素设置一个默认样式

默认样式会影响到页面的布局，所以通常情况下编写网页时必须去除浏览器的默认样式（PC端的页面）。

简单的方法

<style>
    *{
        margin:0;
        padding:0;
    }
</style>

用link导入重建样式表
1. reset.css 直接去除了浏览器的默认样式
2. normalize.css 对默认样式进行了统一

reset.css

/* 
html5doctor.com Reset Stylesheet
v1.4.1 
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    box-sizing:border-box;
}
body {
    line-height:1;
}

:focus {
    outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ======================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
d decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

（十）盒子的尺寸

box-sizing 用来设置盒子尺寸的计算方式。可选值：
- content-box 默认值。宽度和高度设置的是内容区的大小。
- border-box 宽度和高度用来设置整个盒子可见区域的大小

（十一）轮廓和圆角

outline 用来设置元素的轮廓线。用法同border，但不会影响页面的布局
box-shadow 用来设置元素的阴影效果，但不会影响页面的布局
1. box-shadow:10px 10px 20px rgba(0,0,0,.3)为阴影设置水平、垂直偏移量、模糊半径和颜色
border-radius 用来设置圆角。后面跟像素值，是圆角所在的圆的半径。（四个值：左上、右上、右下、左下；三个值：左上、右上/左下、右下；两个值：左上/右下、右上/左下。）
1. border-top-right-radius 后面跟像素值，是圆角所在的圆的半径。跟两个值，分别为水平、垂直方向的半径
2. border-top-left-radius
3. border-bottom-right-radius
4. border-bottom-left-radius
5. 将元素设置为圆形：border-radius:50%

八、浮动

（一）浮动基础

通过浮动，可以使一个元素向其父元素的左侧或右侧移动。用来制作水平方向的布局。

元素设置浮动以后，水平布局的七个值不需要强制等于父元素的宽度。

元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。

浮动元素默认不会从父元素中移出。

浮动元素向左或向右移动时，不会超过它前边的其它浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。

浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高。

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以用浮动来设置图片的文字环绕效果

脱离文档流特点：

块元素不再独占一行

块元素的宽度和高度都被内容撑开

行内元素特点和块元素相同

float 设置元素的浮动。可选值：
1. none 默认值。元素不浮动；
2. left 元素向左浮动
3. right 元素向右浮动

（二）简单的布局

方便统一样式的布局

<header></header> 创建头部
<main></main> 网页的主体
<footer></footer> 网页的底部

（三）BFC

BFC(Block Formatting Context)块级格式化环境。

BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局

元素开启BFC后的特点：
1. 开启BFC的元素不会被浮动元素所覆盖；
2. 开启BFC的元素子元素和父元素的外边距不会重叠
3. 开启BFC的元素可以包含浮动的子元素。
可以通过一些特殊的方式开启BFC
1. 设置元素的浮动（不推荐）；
2. 将元素设置为行内块元素：display:inline-block（不推荐）；
3. 将元素的overflow设置为一个非visible的值

（四）清除浮动的影响

clear 浏览器自动为当前元素添加一个外边距，使其位置不受其他元素的影响：
1. left 清除左侧浮动元素对当前元素的影响；
2. right 清除右侧浮动元素对当前元素的影响；
3. both

:after 利用伪元素清除浮动影响

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用after伪类解决高度塌陷问题</title>
    <style>
        .box1{
            border:5px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .box1:after{
            content:"" ;
            display:table;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">

        </div>
    </div>
</body>
</html>

九、定位

元素开启***相对定位***后，如果不设置偏移量，元素不会发生任何变化。

相对定位会使元素提升一个层级；

参照元素在文档流中原本的位置定位；

不会使元素脱力文档流；

不会改变元素的性质；

元素开启***绝对定位***后，如果不设置偏移量，元素位置不会发生变化。

元素会从文档流中脱离；

会改变元素的性质，行内元素变为块元素，块的宽高被内容撑开；

绝对定位会使元素提升一个层级；

相对于其包含块进行定位：

正常情况下，包含块就是离当前元素最近的祖先块元素；

绝对定位的包含块：离它最近的开启了定位的祖先块元素，如果所有的祖先元素都没有开启定位，则相对于根元素进行定位。

当元素开启绝对定位后，水平方向就需要添加left和right两个值，当水平方向的属性没有设置auto时，自动调整right 的值来使水平方向的宽度等于内容区的宽度。可以设置auto的值有：margin width left right（left和right的值默认为auto，如果需要设置其它值为auto，需要为left和right赋值）

***固定定位***的大部分特点都和绝对定位一样

唯一不同是固定定位永远参照于视口定位，不会随滚动条移动。

***粘滞定位***可以移动，但不会超出视口（兼容性差）

position 使用该属性来设置定位。可选值：
1. static 默认值。元素静止，没有开启定位；
2. relative 开启元素的相对定位；参照元素在文档流中原本的位置定位；
3. absolute 开启元素的绝对定位；相对于其包含块进行定位；
4. fixed 开启元素的固定定位；
5. sticky 开启元素的粘滞定位
偏移量（offset)。
1. top 定位元素和定位位置上边的距离;
2. bottom 定位元素和定位位置下边的距离;
3. left 定位元素和定位位置左边的距离;
4. right 定位元素和定位位置右边的距离;
z-index 为开启了定位的元素指定层级。需要一个整数作为参数，值越大元素jnb 层级越高。

十、背景

background-color: 设置背景颜色
background-image:url("路径名") 设置背景图片
background-repeat 用来设置背景的重复方式。可选值：
1. repeat 默认值。沿着x轴和y轴双向重复；
2. repeat-x 沿着x轴重复；
3. repeat-y 沿着y轴重复；
4. no-repeat 不重复。
background-position 设置背景图片的位置。
1. 通过top left bottom right center几个表示方位的词来设置背景图片显示的九宫格方位。需要同时指定两个方位值，如果只指定一个，则另一个默认为center;
2. 通过偏移量来指定位置。
background-clip 设置背景的范围。可选值：
1. border-box 默认值。背景会出现在边框上；
2. padding-box 背景不会出现在边框，只会出现在内容区和内边距；
3. content-box 背景只会出现在内容区；
backfround-origin 设置背景图片偏移量计算的原点。可选值：
1. padding-box 默认值。从内边距开始计算；
2. content-box 从内容区开始计算；
3. border-box 从边框处开始计算。
background-size 设置图片的大小。
1. 第一个值表示宽度，第二个值表示高度；如果只指定一个值，则第二个值默认是auto。
2. cover 图片比例不变，将元素铺满；
3. contain 图片比例不变，在元素中完整显示。
background-attachment 背景图片是否随元素移动。可选值：
1. scroll 默认值，背景图片会随元素移动；
2. fixed 背景会固定在页面中，不会随元素移动。
background 背景相关的简写属性，所有背景相关的样式可以用该样式设置。
1. 雪碧图：将小图片组合成大图片，通过background-position来确定使用哪个具体的小图。
渐变效果：
1. 线性渐变：background-color:linear-gradient(方向，颜色，颜色，...)。
  1. 渐变方向设置：
    1. to left to right to bottom to top；
    2. 数值deg 表示旋转度数；
    3. 数值turn 表示旋转圈数。
  2. 手动指定渐变分布情况：在颜色后面加上像素大小。

十一、表格

（一）`<table></table>`表格

<tr></tr> 表格中的一行；
<td></td> 一个单元格；
1. colspan="2" 属性，横向合并单元格
2. rowspan="2" 属性，纵向合并单元格；
可以将一个表格分为三个部分：
1. <thead></thead>
2. <tbody></tbody> 如果表格中没有使用而直接使用，那么浏览器会自动创建一个，并将全都放在中
3. <tfoot></tfoot>

（二）样式

border-spacing 指定边框之间的距离
border-collapse 设置边框合并
vertical-align 设置元素的垂直对齐方式。
text-align

十二、表单

将数据提交给服务器

<form></form> 属性：
1. action="地址" 表单提交的服务器的地址
<input></input> 属性：
1. type="text" 文本框
2. type="password" 密码框
3. type="submit" 提交按钮
4. value="名称" 指定按钮的名字
5. type="radio" 单选按钮。
  1. 多个单选按钮指定同样的name属性值，可做到单选效果。
  2. 需要指定value，将选择结果提交。
  3. checked 将单选按钮设置为默认选中
6. type="checkbox" 多选按钮
7. type="button" 创建普通按钮。通过js添加效果。
8. type="reset" 重置按钮
9. type="color" 颜色选择框。兼容性不好
10. type="email" 电子邮件地址输入框
11. type="tel" 电话号输入框
12. autocomplete="off" 关闭表单自动补全内容。可放在form 或者input标签中
13. readonly 将表单设置为只读
14. disabled 将表单设置为禁用
15. autofocus 自动获取焦点
16. 注：数据要提交到服务器中，必须指定一个name属性和值。
<select></select> 下拉列表
1. <option value="值"></option> 设置选项。可添加selected设置为默认选中。

十三、动画

（一）过渡

transition 样式。指定一个属性发生变化时的切换方式。
1. transition-property 指定执行过渡的属性。多个属性使用逗号隔开。所有属性指定all。
2. transition-duration 指定过渡效果的持续时间。单位：s/ms。可为不同的变化属性分别指定时间，逗号隔开。
3. transition-timing-function 过渡时序函数。指定过渡的执行方式。可选值：
  1. ease 默认值。慢速开始，先加速，再减速。
  2. linear 线性（匀速）变化。
  3. ease-in 加速变化。
  4. ease-out 减速变化。
  5. ease-in-out 先加速后减速。
  6. cubic-bezier() 指定时序函数.链接

（二）动画

动画和过渡类似，都是可以实现一些动态的效果

不同的是过渡需要在某个属性发生变化时才触发，动画可以自动触发动态效果

设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行的每一个步骤

关键帧

#keyframs 关键帧名{
	/*from表示动画的开始位置，也可以使用0%*/
    from(
        margin-left:0;
    )
    25%{
        
    }
    /*to动画结束的位置，也可以使用100%*/
    to(
    	margin-left:700px;
    )
}
.box{
    /*animation-name:关键帧名;设置关键帧的名字*/
    animation-name:test;
    /*animation-duration: 动画执行的时间*/
    animation-duration:4s;
    /*animation-delay:设置动画的延时*/
    animation-delay:2s;
    /*animation-timing-function:动画时序函数，同过渡*/
    animation-timing-function: ease-in-out;
    /*动画执行的次数。infinite:无限执行*/
    animation-iteration-count:20；
    /*动画执行方向。可选值：
        normal 默认值，从from向to运行；
        reverse 从to向from执行；
        alternate 从from向to,重复执行时反向执行；
        alternate-reberse 从to向from，重复执行时反向执行。
        */
    animation-direction:reverse;
    /*动画执行状态；可选值：
    	running 默认值。动画执行；
    	paused 动画暂停。
    */
    animation-play-state: paused;
    /*动画填充模式。可选值：
    	none 默认值。动画执行完毕，元素回到初始位置；
    	forwards 动画执行完毕，元素会停止在动画结束的位置；
    	backwards 动画延时等待时，元素就会处于初始位置。
    	both 结合了forwards和backwards。
    */
    animation-fill-mode: both;
    /*简写。两个时间属性的顺序：持续时间 延时*/
animation: test 2s 2 1s alternate;
}

（三）变形

transform 可选值如下所列

：

平移
1. translateY() 设置元素Y轴方向平移；
2. translateZ() 设置元素Z轴方向平移；
3. translateX() 设置元素X轴方向平移；
Z轴平移：

Z轴平移,调整元素在Z轴的位置,通常情况是调整元素和人眼之间的距离Z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距.
旋转

通过旋转可以使元素沿着x,y,z轴旋转指定的角度

rotateX()

rotateY()

rotateZ()

transform-style:preserve-3d 设置3D变形效果。
缩放
1. scaleX() 括号内填数值代表缩放倍数
2. scaleY()
3. `scale()``

``transform-origin:20px 20px;`变形的原点，默认值center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform</title>
    <style>
        html{
            /*设置当前网页的视距*/
            perspective: 800px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 20px auto;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:#00ffff;
            margin: 20px auto;
        }
        body:hover .box2{
            transform: rotateX(45deg);
        }
        body:hover .box1{
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

十四、less

是一门CSS的预处理语言，可以使用更少的代码实现更强大的功能，浏览器无法直接执行less代码，需要先将less转化为css代码

变量：可储存任意的值
1. 作为变量使用：@变量名
2. 作为类使用：@{类名}
3. 作为路径名使用：@{路径名}
& 表示外层父元素
:extend() 对当前选择器扩展指定选择器的样式
.样式名() 混合

@color:red;
@box:box6;
@images:".../img";

.@{box}{
    width: 100px;
    height: 100px;
    background-color: @color;
    background:url("@{images}/1.png");
}
.box1{
    .box2{
        color:@color;
    }

    >.box3{
        color: blue;
    }

    //为box1设置一个hover,&代表外层的父元素
    &:hover{
        color: blueviolet;
    }
}

.p1{
    width:100px;
    //$使用其它属性的值
    height: $width;
}
//对其他属性的样式进行拓展
.p2:extend(.p1){
    color: red;
}
//相当于设置了一个样式类
.p3(){
    width: 100px;
    height: 100px;
    background-color: red;
}
//对指定的样式进行引用
.p4{
    .p3();
}
//混合函数用法：在混合函数中直接设置变量的值
.test(@w){
    width:@w;
    height: 200px;
    border: 1px solid red;
}
div{
    .test(100px);
}

十五、弹性盒flex

是CSS中的一种布局手段，它用来代替浮动完成页面的布局

flex可以让元素根据页面的大小的改变而改变

弹性容器：

要使用弹性盒，必须先将一个元素设置为弹性容器

通过display来设置弹性容器

display:flex; 设置为块级弹性容器

display:inline-flex; 设置为行内弹性容器

弹性元素：

弹性容器的子元素是弹性元素

弹性元素可以同时是弹性容器

主轴：弹性元素排列的方向

侧轴：与主轴垂直的方向

（一）弹性容器的样式

flex-direction 指定容器中弹性元素的排列方式，可选值：
1. row 默认值。弹性元素在容器中水平排列；
2. row-reverse 弹性元素在容器中反向水平排列；
3. colum 弹性元素纵向排列（自上向下）；
4. column-reverse 弹性元素水平排列（自下向上）。
flex-grow:1; 指定弹性元素的伸展系数。当父元素有多余的空间时，子元素如何伸展。父元素的剩余空间会按比例进行分配。
flex-shrink:1; 指定弹性元素的收缩系数。父元素空间不足时，如何对子元素进行收缩。
flex-wrap 设置元素是否自动换行，可选值：
1. nowrap 默认值。元素不会自动换行；
2. wrap 元素沿着侧轴方向自动换行；
3. wrap-reverse 元素沿着侧轴反方向换行。
flex-flow wrap和direction的简写属性
justify-content 如何分配主轴的空白空间，可选值：
1. flex-start 元素沿着主轴起始边排列；
2. flex-end 元素沿着主轴终边排列；
3. center 元素居中排列；
4. space-around 空白分布到元素两侧；
5. space-evenly 空白均匀分布到元素的单测；
6. space-between 空白均匀分布到元素之间
align-items 设置元素在侧轴上如何对齐，可选值：
1. stretch 默认值，将同一行内的元素高度设置为相同的值；
2. flex-start 元素不会拉伸，沿着侧轴起边对齐；
3. flex-end 沿着侧轴终边对齐；
4. center 居中对齐；
5. baseline 基线对齐。
align-content 侧轴空白空间的分布。可选值：
1. flex-start 元素沿着侧轴起始边排列；
2. flex-end 元素沿着侧轴终边排列；
3. center 元素居中排列；
4. space-around 空白分布到元素两侧；
5. space-evenly 空白均匀分布到元素的单测；
6. space-between 空白均匀分布到元素之间。
align-self 用来覆盖单个弹性元素上的align-items,同align-items

（二）弹性元素的样式

flex-grow:1; 指定弹性元素的伸展系数。当父元素有多余的空间时，子元素如何伸展。父元素的剩余空间会按比例进行分配。
flex-shrink:1; 指定弹性元素的收缩系数。父元素空间不足时，如何对子元素进行收缩。
flex-basis 指定元素在主轴的基础长度。（元素的高度或宽度，默认值为auto，参考元素自身的高度或宽度。若给定该值，则以该值为准）
flex 可以设置弹性元素所有的三个样式：flex: 增长缩减基础;。可选值：
1. initial flex: 0 1 auto；
2. auto flex: 1 1 auto；
3. none flex 0 0 atuo(弹性元素没有弹性)。
order:num 决定弹性元素的排列顺序

Ak.imba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识（更新中）

HTML和CSS基础知识本文章为B站尚硅谷前端学习视频的笔记整理一、基本语法（一）元素标题：一到六级标题：h1到h6 <h1></h1>段落：<p></p>链接：<a href="url"></a>图像：<img src="url" alt="替换文本属性" />换行：<br /&gt...
复制链接

扫一扫