目录
- 一、转义字符
- 二、表单标签
-
- 1、form标签
- 2、input元素
- 3、label 标签
- 4、select 标签
- 5、button 元素
- 三、语义标签
- 四、Head标签
-
- 1、title 标签
- 2、link标签
- 3、style标签
- 4、script 标签
- 5、mate 标签
- 6、base 标签
- 五、CSS引用方式
-
- 1、行内样式
- 2、内嵌样式
- 3、外部样式
-
- 3.1 链接样式
- 3.2 导入样式
- 六、CSS背景属性
-
- 1、background-size 属性
- 2、background-repeat 属性
- 3、background 属性
- 七、CSS文本属性
-
- 1、color 属性
- 2、font-size 属性
- 3、font-weight 属性
- 4、font-family 属性
- 5、text-align 属性
- 6、line-height 属性
- 7、text-indent 属性
- 8、letter-spacing 属性
- 9、word-spacing 属性
- 10、text-decoration 属性
- 11、text-transform 属性
- 12、writing-mode 属性
- 13、white-space 属性
- 八、基本选择器
-
- 一、通配选择器
- 2.标签选择器
- 3、id选择器
- 4、类选择器
- 5.组合选择器
- 九、伪类选择器
- 十、伪元素选择器
- 十一、CSS优先级
-
- 1、CSS优先级
- 2.选择器权重计算
- 十二、块级元素和行业元素
-
- 1、块级元素
- 2、行内元素
- 3.行内块级元素
- 十三、盒模
-
- 1、概念
- 2.盒子模型组成部分
- 3.标准盒模型与怪异盒模型的区别
-
- 3.1标准盒模型
- 3.2怪异盒模型
- 十四、定位
-
- 1.脱离文档流
- 2、position定位
-
- 2.1 static定位
- 2.2 relative定位
- 2.3 absolute定位
- 2.4 fixed定位
- 2.5 sticky定位
- 3、层级属性z-index
- 十五、浮动
-
- 1、float属性
- 2、clear属性
- 3、浮动布局
- 十六、多媒体查询
-
- 1、使用多媒体查询
- 2.多媒体特征
一、转义字符
在HTML中，<、>、&（<、>用于区分标签，&用于转义)等特殊字符可能无法在页面上正常显示，因为它们有特殊的含义。HTML使用特殊的转义字符来表示文档。
转义字符也可称为字符实体，可用于同一特殊字符或者表示
| 效果 | 实体名称 | 实体编号 | 描述 |
|---|---|---|---|
| 空格 | |
  |
半角不换行的空间相当于按键盘space键产生的空间受字体影响，不同字体表现一致 |
| 空格 |   |
  |
中文字符占中文字符宽度的1/2，基本不受字体影响。不同字体的宽度是一致的 |
| 空格 |   |
  |
全角空格，占中文字符宽度的1个，基本不受字体影响，不同字体空间宽度一致 |
| < | < |
< |
小于号 |
| > | > |
> |
大于号 |
| & | & |
& |
&符号 |
| " | " |
" |
双引号 |
| ’ | ------ | ' |
单引号 |
| ? | © |
© |
版权符号 |
| ? | ™ |
™ 或 ™ |
商标符号 |
| ® | ® |
® |
注册商标符号 |
| $ | ------ | $ |
美元符号 |
| ¥ | ¥ |
¥ |
人民币符号 |
| × | × |
× |
乘号 |
| ÷ | ÷ |
÷ |
除号 |
二、表单标签
HTML表单用于收集用户输入 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
1、form标签
<form></form> 用于创建HTML表单，常用属性如下：
：规定表单提时，表单数据
：规定用于发送，常用属性值为get、post
2、input元素
<input /> 元素是最重要的表单元素，根据input元素的不同类型，表现形式也是不一样的
| 类型 | 描述 |
|---|---|
text |
普通文本框，一般默认20个字符宽度 |
textarea |
多行文本框 |
button |
普通按钮 |
radio |
单选框 |
checkbox |
多选框 |
reset |
表单重置按钮 |
submit |
表单提交按钮 |
password |
密码输入框，密码字段使用圆点或星号代替 |
3、label 标签
<label></label> 用于为input标签提供标注
点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上
label标签的for属性值应当与相关元素的id属性值相同
示例
<form>
<label for="like">点赞</label>
<input type="radio" name="like" id="like" />
<br />
<label for="collect">收藏</label>
<input type="radio" name="collect" id="collect" />
</form>
4、select 标签
<select></select> 用于创建下拉列表
select元素中的 <option></option> 标签用于定义列表的可选项
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
5、button 元素
<button></button> 用于定义普通按钮
三、语义化标签
HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，更利于开发者、程序和其他设备对于标签的理解。
语义化在盲人软件、机器翻译等方面发挥着重要作用，同时搜索引擎会通过语义化标签增强文章的SEO搜索。
下表为部分常见的语义化标签：
| 元素 | 描述 |
|---|---|
article |
定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等 |
aside |
一般用于网页中的侧边栏或者文章内部的标注框 |
header |
页面的头部区域，通常包括网站logo、链接导航、搜索框、banner |
nav |
页面的导航链接区域 |
main |
定义文档主要内容 |
section |
定义文档的区域 |
footer |
文档的页脚 |
mark |
标记、突出显示文本 |
ul |
无序列表 |
form |
创建HTML表单 |
button |
定义按钮 |
i |
用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体 |
四、Head标签
head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>
常见Head头
1、title 标签
<title></title> 用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称
例：
<title>uiu的日志_uiuing's_CSDN博客-前端开发,后端开发,大数据领域博主</title>
2、link标签
<link /> 用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标
<link rel="icon" type="image/png" href="/static/images/favicon.ico">
<link /> 是空元素，仅包含属性，只能存在于head部分
| 属性 | 属性值 | 描述 |
|---|---|---|
href |
URL | 设置目标链接的文件路径 |
rel |
stylesheet、icon、sidebar、prev等 | 规定当前文档与链接文档之间的关系 |
type |
MIME_type | 目标连接文档的MIME类型 |
3、style标签
<style></style> 用于给文档引入 CSS 样式信息，将样式表包含在 style 开始与结束标签之间
4、script 标签
<script></script> 用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本
<script> // JavaScript 代码 </script>
也可以通过script的src属性链接外部脚本文件
<script src="/static/js/main.js"></script>
5、mate 标签
<meta /> 提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
name 和 content 属性通常一起使用，以键值对的方式给文档提供元数据，其中 name 的属性值作为元数据的名称，content 作为元数据的值
keywords 和 description 这两个名称使用频率最高，是搜索引擎优化的主要方式之一
| 名称 | 值 | 描述 | |
|---|---|---|---|
| keywords | 关键字 | 描述网页关键字，使用逗号分隔 | |
| description | 描述内容 | 网站主要内容的简短描述 | |
| author | 作者 | 描述网站作者 | |
| viewport | width | viewport视口宽度，设置为device-width表示为设备的宽度 | 定义viewport的初始大小，仅用于移动设备 |
| height | viewport视口高度 | ||
| maximum-scale | 最大缩放比例 | ||
| initial-scale | 初始缩放比例 | ||
| minimum-scale | 最小缩放比例 | ||
| user-scalable | 是否允许用户缩放 | ||
charset 属性用于指定文档的。常用值为UTF-8、ISO-8859-1等
http-equiv 属性可用于，与content属性搭配使用，常用属性值如下：
-
content-type：规定，等同于charset属性设置字符编码 -
default-style：设置 -
refresh：设置，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）
6、base 标签
<base /> 用于为页面中的所有相对链接设置默认URL或默认 target 属性
<base href="https://www.uiuing.com" target="_blank" />
五、CSS引用方式
CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。
CSS遵循W3C规范，实现了跨浏览器的标准化。
1、行内样式
直接使用HTML元素的style属性引入CSS样式
<p style="color: #000;">uiu</p>
2、内嵌样式
使用标签引入样式
<style> p {
color: #000; } </style>
3、外部样式
链接样式 导入确实比较方便，当然也是最常用的，但在比较大的工程之中我常使用 导入样式 ，我认为这可以让我的代码得到更方便的管理
3.1 链接样式
在 <head></head> 标签中，使用 <link /> 标签链接外部的CSS文件
link 标签的 href属性设置为目标链接的 CSS 文件路径，rel 属性设置为 stylesheet 表示链接样式表，type 属性设置为 text/css
<link rel="stylesheet" href="style.css" type="text/css" />
3.2 导入样式
使用 @import url() 引入CSS文件
在CSS文件中直接使用 @import url()
在HTML文件中需要在 <style></style> 标签中使用 @import url()
在HTML初始化时，@import url() 导入的CSS会被直接导入到 HTML 或 CSS 文件中，成为文件的一部分
<!-- HTML文件中导入 -->
<style> @import url(style.css); </style>
/* CSS文件中导入 */
@import url(style.css);
六、CSS背景属性
在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式表）背景属性能够在页面美化的同时，实现页面的表现与内容分离。
| 属性 | 属性值 | 描述 |
|---|---|---|
background-color |
颜色值，如rgb，rgba，十六进制表示 等，设置为 transparent 表示背景透明 |
设置背景颜色 |
background-image |
url( filepath ) 或 none |
设置背景图像 |
background-size |
宽高 、百分比宽高 、contain 、cover |
设置背景图片尺寸 |
background-repeat |
repeat / repeat-x / repeat-y |
设置背景图片重复方式 |
background-position |
top left / top center / cente r等 |
设置背景图片的位置 |
1、background-size 属性
-
保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示 有可能出现图片无法完全覆盖背景区域
-
保持图片纵横比不变，最大程度覆盖背景区域 有可能导致背景图片部分区域无法显示
2、background-repeat 属性
-
（默认） 允许水平和垂直方向重复（平铺）背景图片
-
只允许水平方向重复（平铺）背景图片
-
只允许垂直方向重复（平铺）背景图片
3、background 属性
简写属性可以在一个属性声明中设置一个或多个背景属性
background: #000 url('bannner.png') no-repeat cover;
上面代码的意思为：黑色背景、背景图片为：bannner.png、关闭平铺、保持图片纵横比不变
七、CSS文本属性
通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。
1、color 属性
用于设置文本的颜色，可设置的值有：
-
，如
red -
，如
#FFFFFF -
，如
rgb(255, 0, 0) -
，如
rgba(255, 0, 0, 0.9)
2、font-size 属性
用于设置文本字体大小，可以设置为绝对大小，单位为px ，也可设置为相对大小，单位为 rem 、em 等
字体大小未设置时默认字体大小为 16px
3、font-weight 属性
用于设置文本的粗细，可设置的值有：
| 属性值 | 说明 |
|---|---|
normal |
标准字符（默认） |
bold |
粗体字符 |
bolder |
更粗的字符 |
lighter |
更细的字符 |
100、200、300、400、500... |
400 相当于 normal 700 相当于 bold ，数值越大字体越粗 |
4、font-family 属性
用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。
如果浏览器不支持第一个字体，则会尝试下一个，以此类推
font-family: "PingFang SC","Hiragino Sans GB","Arial,Microsoft YaHei","Verdana","Roboto","Noto,Helvetica Neue","sans-serif";
5、text-align 属性
用于设置，可设置的值有
- （居中对齐）
- （左对齐）
- （右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐
6、line-height 属性
用于设置，可设置的值如下
- ：行间距为当前字体大小乘此数字
- ：设置固定的行间距，如20px
- ：行间距为当前字体大小乘百分比
7、text-indent 属性
用于指定，可设置的值如下
-
：设置固定首行缩进，如20px
-
：首行缩进值为父元素宽度乘此百分比
8、letter-spacing 属性
用于设置，设置固定值为字间距，如10px
9、word-spacing 属性
用于指定文本中，设置固定值为单词间距，如10px
10、text-decoration 属性
用于设置文本的装饰线，是下表属性的简写
| 属性 | 属性值 | 描述 | |
|---|---|---|---|
| text-decoration-line | none | 无线条 | 设置要使用哪种文本装饰的类型 （下划线、上划线、删除线）。 |
| underline | 下划线 | ||
| overline | 上划线 | ||
| line-through | 删除线 | ||
| text-decoration-color | 颜色名、十六进制颜色、rgb等 | 设置装饰线颜色 | |
| text-decoration-style | solid | 实线 | 设置装饰线的样式 |
| double | 双实线 | ||
| dotted | 点划线 | ||
| dashed | 虚线 | ||
| wavy | 波浪线 | ||
/* 表示为黑色波浪形下划线 */
text-decoration: underline wavy black;
11、text-transform 属性
用于设置，常用属性如下
-
：全部文本均为大写字母
-
：全部文本均为小写字母
-
：文本的每个单词首字母为大写字母
12、writing-mode 属性
设置文本在水平或垂直方向的排布方式
-
：文本流在水平方向从上到下排列，文字方向为水平方向
-
：文本流在垂直方向，从下至上、从左至右排列
-
：文本流在垂直方向，从上至下、从右至左排列
-
：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
-
：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致
13、white-space 属性
用于设置文本的空白符处理方式，属性值如下
| 属性值 | 描述 |
|---|---|
normal |
合并空格，换行符转化为一个空格，允许自动换行 |
nowrap |
合并空格，换行符转化为一个空格，不允许自动换行 |
pre |
保留空格，保留换行符，不允许自动换行 |
pre-line |
合并空格，保留换行符，允许自动换行 |
pre-wrap |
保留空格，保留换行符，允许自动换行 |
break-spaces |
保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间 |
八、基础选择器
CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。
通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。
|
选择器类型
|
描述 |
示例
|
|---|---|---|
| 通配选择器 | 通配选择器使用一个星号*表示，*会匹配所有元素 |
* {
color: red; } |
| 标签选择器 | 通过标签名匹配，匹配文档中所有为此标签名的元素 | p {
color: red; } |
| id选择器 | 通过井号#来定义id选择器，根据元素的id属性匹配（精确匹配）元素 |
#box {
width: 100px; } |
| 类选择器 | 通过点.来定义类选择器，根据元素的class属性匹配（精确匹配）元素 |
.container {
height: 100px; } |
| 组合选择器 | 包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器 | #box>.nav p {
color: red; } |
1、通配选择器
可以与其他选择器相结合，选择某元素下的所有元素
/* 选择类名为box的元素的所有后代，添加一个黑色的字体颜色 */
.box * {
color: #000; }
由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式
* {
margin: 0;
padding: 0;
border: 0;
}
2、标签选择器
标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等
3、id选择器
id属性的属性值应当是当前文档唯一
4、类选择器
class属性值在文档中可以重复
5、组合选择器
通过间隔符将基础选择器连接起来，实现组合选择的效果
| 选择器 | 间隔符 | 描述 |
|---|---|---|
| 后代选择器 | 空格 | 选取该元素的后代元素 |
| 子代选择器 | > 大于号 | 选择该元素的第一级子元素 |
| 相邻选择器 | + 加号 | 选择该元素之后相邻第一个元素，且两者具有相同的父元素 |
| 兄弟选择器 | ~ 波浪号 | 选择该元素之后的同层级元素 |
九、伪类选择器
将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。
| 伪类 | 描述 |
|---|---|
:hover |
用于设置鼠标悬停在元素上方时的样式 |
:focus |
用于设置元素获得焦点时的样式 |
:active |
用于设置元素被激活时（按下按键时、松开按键时）的样式 |
:link |
用于设置元素点击之前的样式（仅可用于a标签） |
:visited |
用于设置被访问的元素的样式（仅可用于a标签） |
:first-child |
用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求 |
:first-of-type |
用于选取属于其父元素的第一个特定类型的子元素 |
:last-child |
用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求 |
:last-of-type |
用于选取属于其父元素的最后一个特定类型的子元素 |
:nth-child(N) |
选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1） |
:nth-of-type(N) |
选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字（odd / even）、公式 |
:nth-last-child(N) |
选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式 |
:nth-last-of-type(N) |
选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式 |
十、伪元素选择器
伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。
一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素，使用双冒号 :: 作为伪元素选择符
|
伪元素
|
描述 | 示例 |
|---|---|---|
::after |
用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素 | p::after {
content: ＂结束＂; } |
::before |
用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素 | p::before {
content: ＂开始＂; } |
::first-line |
向文本的首行添加样式，只能应用于块级元素 | p::first-line {
color: #333; } |
::first-letter |
向文本的首字母添加样式，只能应用于块级元素 | p::first-letter {
font-size: 16px; } |
::marker |
用于改变li元素的数字或符号的样式，只能作用于display属性值为list-item的元素 |
ul li::marker {
content: '*'; } |
::placeholder |
用于设置表单元素占位符文本的样式 | input::placeholder {
color: blue; } |
十一、CSS优先级
当创建的CSS样式表越来越多、越来越复杂的时候，一个元素的样式可能受到多个CSS样式表的影响，到底这个元素显示的是哪个样式表的样式呢？通过CSS优先级可以帮助我们得出结论。
1、CSS优先级
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
内联样式>ID选择器>类选择器、属性选择器、伪类选择器>标签选择器 、伪元素选择器
通配符选择器 * 和关系选择符 +（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等对优先级没有影响
在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1000 |
| ID选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 相邻选择符、子代选择符、兄弟选择符、后代选择符 | 0 |
2、选择器权重计算
选择器的权重可以相加
#header .nav li {
list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
-
权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性
-
权重不同时，权重大的选择器生效
3、!important规则 当你在一个样式声明中使用 !important 规则时，这个样式将覆盖其他的任何声明
!important 规则与优先级无关，但是会直接影响样式的最终显示结果
十二、块级元素与行内元素
HTML（超文本标记语言）中元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。
1、块级元素
-
在浏览器显示时总是独占一行
-
宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
-
可以包含内容、行内元素和其他块级元素
-
宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
-
常见块级元素：
div、form、footer、h1-h6、ol、ul、p、video -
设置
display属性为display: block可将元素转换为块级元素
2、行内元素
-
不独占一行，默认不自动换行
-
宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
-
一般只能包含内容和其他行内元素，不可包含块级元素
-
设置宽高无效，宽高默认为内容的宽高
-
常见行内元素：
span、label、a、em、label、img -
设置
display属性为display: inline可将元素转换为行内元素
3、行内块级元素
-
综合块级元素与行内元素的特性
-
不独占一行
-
元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
-
宽高未设置时默认为内容宽高
-
常见行内块级元素：
button、input、textarea、select -
设置
display属性为display: inline-block可将元素设置为行内块级元素
十三、盒子模型
所有的HTML元素都可以看做是一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。
1、概念
当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。
2、盒子模型组成部分
<style> div{
width: 100px; height: 100px; margin: 50px; padding: 15px; } </style>
<div></div>
盒模型由里到外包括四个部分：
- 内容部分
- padding（内边距）
- border（边框）
- margin（外边距）
内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置