HTML5+CSS3

原创已于 2022-04-07 23:45:41 修改 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

于 2022-03-07 20:38:55 首次发布

笔记同时被 2 个专栏收录

4 篇文章

订阅专栏

HTML5+CSS3

1 篇文章

订阅专栏

2.12 长度单位（width、height的值）

5.6 元素的垂直层级（z-index：n(层级)）

1. HTML基础

1.1 网页的结构 :

HTML(结构:描述页面的结构)、CSS(表现:控制页面中元素的样式)、JavaScript(行为: 响应用户的操作)

网页的基本结构：

<!doctype html>   html5声明
<html>
    <head>
        <meta charset="utf-8">
        字符集应该与编辑器的一致
    </head>
    <body>
    </body>
</html>

标签一般成对出现但是存在自结束标签，例如<input>,<img>H5不推荐写自结束的/

注释的写法

标签的属性：名值对结构
文档声明(doctype)：文档声明告诉浏览器网页的版本<!doctype html>
计算机的最小操作单位是 1byte=8bit
乱码问题：如果编码解码字符集不同就会有乱码问题
设置charset应该与编辑器的编码一致

<html lang="en"> 告诉浏览器你写的是英文网站，到时候会弹出是否翻译，中文则为<html lang="zh">

1.2 HTML中的"实体"

在网页中，编写的多个空格会自动被浏览器解析为一个空格，目的是方便格式化代码
但是在html中有时候不能书写一些特殊符号，比如字母两侧的 ‘<’ ‘>’ 号那么我们就需要实体(转义字符)语法是"&“开头”;"结尾，例如

  空格
> 大于
< 小于
© 版权号

1.3 meta 标签

meta主要用于设置网页的元数据

charset 指定网页中的字符集
name 指定数据名称
content 指定数据内容
keywords: 搜索引擎用的关键词，用逗号隔开
auther: 作者
title: 标题，会作为搜索引擎的结果标题表示
http-equiv 协议，其中http-equiv=“refresh” 几秒后跳转网页到

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

补充知识点（2022/3 当前元数据）：

<meta http-equiv="X-UA-Compatible" content="IE=edge" >：X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

1.4 语义化标签

语义化标签在HTML中表示特定的结构，但是会在显示的时候存在样式的变化。但是注意HTML是专门负责网页结构的，所以在使用html标签时应该关注的是标签的语义而不是标签的样式

标题标签

h1~h6一共有6级标题，重要性递减
- 1. h1是最重要的仅次于title，一般只有一个h1 2.一般只用到h1到h3
p标签，表示一个段落，也是一个块元素
hgroup标签：将h标题分组
em是语音语调的加重，是一个行内元素
strong表示强调
blockqueue 表示一个长引用
q 表示一个短引用
br 换行

块元素：主要对元素进行布局（p元素里不能放任何块元素）
行内元素：用来包裹文字，一般是块内放行内

布局语义化标签

header: 网页头部
main: 网页的主体部分(只有一个)
footer: 网页的底部
nav: 网页的导航
aside: 侧边栏，与主体相关的其他内容
article 独立的文章
section: 其他的独立区块

主要的布局标签

div: 没有语义，表示一个独立区块
span: 行内元素，没有语义，用来选中文字

1.5 列表

无序列表 ul > li
有序列表 ol > li
定义列表 dl
- dt 定义的内容
- dd 对定义进行解释说明

列表之间可以相互嵌套

1.6 超链接

超链接让页面跳转到另一个位置或者其他页面

用a定义超链接

<a href="07.列表.html" target="_blank">超链接</a>
<a href="#">去顶部</a>
<a href="javascript:;">什么也不发生</a>

a是一个行内元素可以嵌套除他自身以外块的元素

a的属性：

href:目标跳转路径
- 值可以是外部网站地址，也可以是内部页面地址
- #是回到顶部
- #ID跳转到页面指定位置
- 在开发中可以用javascript:;这样什么也不发生
target属性，可选值
- _self 默认值，在当前页面打开超链接
- _blank 在新的页面打开

注意：ID是唯一属性，不能一样，字母开头，区分大小写，靠前的元素优先生效

1.9 图片标签 <img src=' '>

img标签用于引入图片: 使用img标签引入外部标签，img是一个自结束标签

img 属于替换元素，属于行内元素和替换元素之间的一种元素，即img这段代码被具体的东西给替换了

属性：

src 属性指定的外部路径
alt 对于图片的描述，描述默认情况下是不会显示的，会在图片显示不出来的时候显示，搜索引擎会通过alt来搜索图片
width 指定图片的宽度(单位是像素)
height 指定图片的高度(单位是像素)

注意：一般在PC端不建议修改图片的大小，为了节省网络资源，最好直接在做图的时候改好,但是在移动端经常会把图片缩小

图片的格式：

jpg(jpeg)
- 颜色多，不支持透明，不支持动图
- 一般用于显示照片
gif
- 支持的颜色少，支持简单透明，支持动图
- 颜色单一的动图
png
- 颜色丰富，支持透明，不支持动图
- 颜色丰富，复杂透明(转为网页而生)
webp
- 谷歌新推出的，专业用于网络的格式
- 具有其他图片格式的优点，文件特别小
- 兼容性不好(例如IE)
base64
- 使用base64进行编码，这样可以直接把图片转化为字符，通过字符格式引入
- 一般都是需要与网页一起加载的图片

原则：效果一样用小的(快)，效果不一样用效果好的

1.10 内联框架

内联框架，用于向当前页面中引入其他页面

src 指定要引入的网页路径
frameborder 只有0/1 就是显示与不显示边框

内联框架是把一个网页做为窗口引入现在的网页，注意的是内联框架的内容不会被搜索框架所索引

<iframe src="https://www.qq.com" frameborder="0" width=800 height=400></iframe>

1.11 音视频

audio 向网页引入音频文件，音视频文件引入的时候默认情况下是不允许用户操作的

属性:

controls 控制播放停止（只有键没有值means 无属性值）
autoplay 音频是否自动播放(兼容性差，例如火狐不自动播放)
loop 循环播放

除了通过src实现之外，还可以通过source实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8不支持，所以要输出提示

原理是：进入audio标签，如果匹配到source,那么浏览器会自动忽略内部其他代码，实现选择，IE8不认识source所以会自动忽略所有source标签，于是只找到提示信息，自动不全p标签，输出提示

<audio controls>
    对不起你的浏览器不支持播放音频，请升级浏览器
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="">
</audio>

视频标签是video，同理

<video src="./source/flower.mp4" controls></video>

<video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="">
</video>

2. CSS基础

2.1 CSS简介

CSS 层叠样式表
网页实际上是一个多层的结构，通过css样式可以对网页的每一个层设置样式，最后可以看到的只有最上层的
CSS设置网页中的元素样式方式

第一种方式：
- 在标签内部通过style设置元素的样式
- 注意：开发时候绝对不要使用
第二种方式：
- 将样式编写到style标签里，style标签写在head里
- 通过css选择器为多个标签设置样式，并且只修改一次
- 更方便对样式进行复用
- 问题：只对一个网页起作用，里面的样式不能跨网页复用
第三种方式
- 将css样式写到一个css文件里
- 通过link链接外部css文件
- 写到外面可以触发浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

2.2 CSS基本语法

选择器和申明块

选择器：通过选择器选定指定页面元素,比如p的作用就是选中所有的p元素

申明块：通过声明块来为指定的元素设置演样式声明块是一个名值对结构，名值对之间以:连接，以;结尾

2.3 CSS 选择器基础

class是标签属性，和id类似，不同的是class可以重复使用

元素选择器
- 作用，根据标签名确定指定元素
- 语法：标签名{ }
ID选择器
- 作用，根据元素的ID属性选中元素（具有唯一性）
- 语法，#ID:'属性值'
- 例子，#box{}, #red{}
class
- 多个元素可以绑定同一个class选择器
- 一个元素可以绑定多个class(用空格隔开)
- 语法 : class: '属性值' / class: '属性值属性值属性值'
统配选择器：*{}

2.4 CSS的复合选择器

交集选择器，同时选择有几个类的元素，两个选择器直接写在一起
- 注意：交集选择器中如果有元素选择器，必须以元素选择器开头
并集选择器，同时选择多个选择器对应的元素，用,分割开

2.5 关系选择器

父元素：直接包含子元素的元素就是父元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代的元素就是祖先元素，一个元素是父元素也是他的祖先元素
后代元素：直接或间接被祖先包含的元素叫后代元素
兄弟元素：拥有相同父元素的元素就是兄弟元素

选择器

子元素选择器：
- 作用：指定父元素的子元素
- 语法父元素>子元素

div.box>span{
    color:red;
}

后代元素选择器
- 选中指定元素内的指定后代选择器
- 语法祖先元素后代元素

div li{
    color: orange;
}

选择下一个兄弟选择器
- 选择具有相同父亲的兄弟元素
- 语法兄 + 弟

p+span{
    color:blue;
}

2.6 属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 以属性值开头的元素
[属性名$=属性值] 以属性值结尾的元素
[属性名*=属性值] 以属性值含有某值的元素

p[title=abc]{
    color:orange;
}

p[title^=abc]{
    background-color: red;
}

2.7 伪类选择器

伪类：不存在的元素，特殊的类

伪类用来描述一个元素的特殊形态，比如第一个子元素，被点击的元素，鼠标移入的元素
伪类一般情况下是使用 : 开头
- :first-child 第一个元素(不是说同类的第一个子元素，是所有子元素)
- :last-child 最后一个子元素
- :nth-child(n) 选中第n个子元素
  - :nth-child(n)，相当于是0-INF
  - :nth-child(2n)，相当于是所有偶数元素
  - :nth-child(2n+1)，相当于是所有奇数元素(有3)
  - :nth-child(odd) / :nth-child(even)

以上这些伪类是根据所有的子元素进行排序的

加type的child

:first-of-type
:last-of-type
:nth-of-type
:not()是否定伪类: 将符合条件的元素从选择器去除

这几个伪类的功能和上述的类似，不同的是他们实在同类型元素中进行排序

2.8 a元素的伪类选择器

a:link{...}:正常的链接
a:visited{...}:访问过的链接，出于用户隐私考虑，visited只能改颜色
a:active{...}:鼠标点击
a:hover{...}: 鼠标移入

注意的是伪类一定要按照以上顺序写:link,visited,active,hover(LoVe A Ha)

2.9 伪元素选择器

伪元素表示页面中并不真实存在的一些元素(特殊的位置)，使用 :: 开头

::first-letter：表示第一个字母
::first-line ：表示第一行
::selection ：选中的内容
::before ：表示元素的开始必须结合content结合使用
::after ：表示元素的结束必须结合content结合使用

2.10 样式的继承

我们为一个元素设置的样式也会应用到他的后代元素

继承是发生在祖先与后代之间的

继承的设计师为了开发，利用继承只需写一次就可以让所有的元素都具有该样式

注意：并不是所有的样式都可以被继承，比如背景相关的，布局相关的样式都不会被继承

2.11 样式的冲突与优先级问题

当我们用不同的选择器选择相同的元素，并且为相同的样式设置不同的值，此时发生了样式的冲突

发生样式冲突的时候，显示的效果是由显示的优先级决定的

选择器的权重优先级
内联样式 1,0,0,0
ID选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式没有优先级

比较优先级的时候要把所有的求和计算，最后优先级高的优先显示，分组选择器单独计算
选择器累加不会超过下一级的，也就是不进位，如果优先级计算后相同优先使用考下的样式
在属性结束后加上 !important; 会获取最高优先级，慎用！！

2.12 长度单位（width、height的值）

像素
- 显示器实际上是由一个一个发光的小点构成的
- 不同屏幕像素大小不同
- 所以同样的200像素在不同的设备下显示效果不一样
百分比
- 相对于父元素的百分比
- 使得子元素随着父元素改变而改变
em
- 随着字体大小的改变而改变
- 1个em是一个字的大小，字的大小可以在div内部修改，即字体大小是自身的字体大小
rem
- 1个rem是相对根元素的字体大小而变化
- 经常用于移动端开发

2.13 颜色单位

在css中可以直接使用颜色名来配置各种颜色，但是直接使用颜色名来命名是非常不方便的

RGB值
- RGB是通过不同的颜色浓度调配处不同的颜色
- 每一种颜色是在0-255或者0-100%
- 语法: RGB(xx,xx,xx)
RGBA值
- 在RGB基础上多了个透明度值A
- 范围0-1,1是完全不透明
- 语法: RGBA(xx,xx,xx,xx)
16进制的RGB
- 语法#RGB
- 颜色浓度00-ff
- 如果两位两位重复，例如#AABBCC可以写成#ABC
HSL和HSLA值
- 在工业设计使用多
- H色相(0-360)
- S饱和度(浓度0-100)
- L亮度(亮度0-100)

3. 文档流与盒子模型

3.1 文档流

我们认为网页是一个多层结构，是一层一层的。用户只能看到最上面的一层
我们称最下面的一层叫文档流，文档流是网页的基础
我们创建的元素默认是在文档流中进行排列
对于我们来说元素主要有两种状态
- 在文档流中
- 不在文档流中
元素在文档流中的特点：
块元素 - 在页面中会独占一行
- 默认宽度是占满父元素
- 默认高度是被子元素撑开
行内元素 - 不会独占页面的一行，值占自身大小
- 自左向右排列
- 和书写习惯一致
- 行内元素默认的高度和宽度都是被内容撑开

3.2 盒子模型基础

1. CSS将页面全部元素设置为了一个矩形的盒子
2. 将元素设置为矩形的盒子之后，对网页的布局就变成了对不同盒子放在不同的位置
3. 每一个盒子都有以下几个部分

内容区(content) + 内边距(padding) + 边框(border) +外边距(margin)

内容区(content)：
- 元素中所有的子元素和文本内容都在内容区中排列
- 内容区的大小由width(内容区的宽度)、height(内容区的高度)两个属性来设置的
边框(border)：
- 边框属于盒子的边缘(边框里面属于盒子内部，出了边框都是盒子外部)
- 边框的大小会影响到整个盒子的大小
- 我们需要设置边框至少三个样式
  - border-width：边框的宽度
  - border-color：边框的颜色
  - border-style：边框的样式

border-width：可以指定四个方向边框粗细，不写默认是3px。

四个值：上右下左

三个值：上左右下

两个值：上下左右

border-color：可以指定四个方向边框颜色

border-width/border-color可以单独指定某一个边框的宽度/颜色

语法：border-xxx-width / border-xxx-colo

border-style属性:

solid 实线
dashed 虚线
double 双线
默认值是none
border-XXX :XXX取top,left…

3.3 盒子的内边距(padding)

内容区的边框之间的距离
一共有四个方向内边距：padding-top/ right / bottom / left
内边距设置会影响盒子的大小
背景颜色会延伸到内边距上
盒子大小由内容区，边框，内边距共同决定

3.4 外边距

外边距不影响可见框的大小
外边距会影响盒子的位置
一共有四个外边距
元素会尽量的自左向右顺序排列，在默认情况下如果我们设置左上的边距会影响自己，右下会影响别人
也可以设置负值，但是元素会向左上移动
mergin不会影响元素的可见框的大小，但是会影响盒子的实际占用空间

3.5 盒子的水平布局(重要)

元素在父元素的位置由以下属性决定

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在他的父元素中
子元素的margin-left+border-left+padding-left+width+padding-right+border-right=父元素宽度(必须满足)

等式不成立的时候，我们称他为过度约束，这个时候我们会自动调整

如果7个值中没有auto会先调整margin-right
这7个值中有三个可以设置为auto
- width (默认是auto)
- margin-left
- margin-right
如果某一个值为auto就会先自动调整那个值
如果一个宽度和一个外边距是auto，那么宽度会调整到最大
如果三个都是auto，那么宽度会是最大
如果外边距都是auto，那么两个auto会赋相同的值(常用这个特点实现水平居中)

3.6 盒子模型垂直方向布局

盒子的高度默认情况下，父元素高度被子元素内容撑开

子元素在内容区中排列

如果子元素的大小超过父元素则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素

overflow 可选值：

visible：(默认值)子元素从父元素中溢出，在父元素的外部显示
hidden: 溢出的元素将会被裁减而不显示
scroll: 生成两个滚动条，通过两个滚动条实现浏览
auto：根据需要生成两个滚动条

3.7 外边距折叠问题

相邻元素的垂直方向的外边距会发生折叠（重叠）现象

兄弟元素
- 兄弟元素之间相邻垂直外边距会取较大值
- 特殊情况
- 如果两个一正一负取和
- 如果两个都是负数取绝对值较大的
父子元素
- 父子元素之间的外边距子元素会传递给父元素
- 父子外边距折叠会对页面造成影响

3.8 行内元素的盒子模型

width,height不支持设置宽度和高度
行内元素可以padding但是垂直方向不会影响布局
行内元素可以boarder但是垂直方向不会影响布局
行内元素不折叠，只相加
display 用来设置元素显示的类型，其可选值有
- inline 设置为行内元素
- block 行内转换块元素
- inline-block 既可以设置宽度又不会独占一行,类似于替换元素
- table 表格
- none 隐藏，啥都没了
visibility:用来设置元素的显示状态，可选值：
- visible:默认值，元素在页面中正常显示
- hidden：元素在页面中隐藏了，但是占据位置

3.9 默认样式(重置样式表)

重置样式表(网上找资源)有两个

reset.css 去除了所有的css样式
normalize.css 是将css样式进行了统一但不去除

3.10 盒子尺寸的计算方式

默认情况下盒子的可见框大小是由内容区，内边距，边框共同确定的

box-size 可以设置盒子的计算方式，设置width，height的作用域，可选值：

content-box 默认值，使用宽度高度设置内容区的大小
border-box 宽和高用来设定整个盒子可见区的大小

3.11 盒子的轮廓和圆角

outline 用来设置元素的轮廓线，用法和boarder一样，但是轮廓不影响可见框的大小

boxs-shadow ：用来设置元素的阴影效果，不影响页面布局。四个值(单位px)如下

-第一个值：设置阴影的水平偏移量，正值右偏移，负值左偏移
- 第二个值：设置阴影的垂直偏移量，正值下偏移负值上移量
- 第三个值：阴影的模糊半径
- 第四个值：阴影的颜色(RGBA设置)

border-radius：用来设置圆角，圆角就是圆的半径大小

border-radius：四个值：左上右上右下左下(单位px)

三个值：左上右上/左下右下

两个值：左上/右下右上/左下

border-radius单独设置某一角：border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius

特殊值：椭圆 border-radius:50px/10px; 圆形：border-radius：50%；

4. 浮动布局

4.1 浮动简介

通过浮动可以使一个元素向其父元素的左侧或者右侧移动，使用float属性设置元素的浮动

可选值：

none 默认值元素不浮动
left 向左浮动
right 向右浮动

浮动的特点

元素设置浮动之后元素的水平布局等式不需要强制成立
元素设置浮动以后会完全从文档流脱离，不在占用文档流中的位置
元素下面还在文档流中的元素会向上移动
浮动可以让元素横向排列
浮动元素不会从父元素中移出
设置浮动以后元素会向父元素的左侧或者右侧移动
浮动元素向左右移动不会超过前面的其他浮动元素
如果浮动元素上面是没有浮动的块元素则浮动无法上移
浮动元素不会超过他上面的兄弟元素最多最多一样高
浮动的主要作用是让元素水平排列，通过浮动可以制作水平方向上的布局

4.2 脱落文档流的特点

浮动不会盖住文字，文字会自动环绕在浮动元素周围

元素从文档流脱离之后会发生变换

块元素
- 块元素不在独占一行
- 脱离文档流以后宽度和高度被默认内容撑开
行内元素
- 行内元素脱离文档流之后会变成块元素，长宽默认被内容撑开

脱离文档流之后，不区分行内和块了

4.3 浮动引起的高度塌陷问题

在浮动布局中农，父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。其下元素会自动上移，导致页面布局混乱。所以高度塌陷是浮动布局较常见的一个问题我们必须处理

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

BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC元素会变成一个独立的布局区域
元素开启BFC之后的特点：
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC元素子元素和父元素的外边距不会重叠
- 开启BFC可以包含浮动的子元素
可以通过特殊方式开启BFC
- 设置元素浮动(不推荐)
- 将元素设置为行内块元素(不推荐)
- overflow 这只非visible一般设置auto或者hidden

4.4 BFC最优解决方案

直接引入clearfix类

<style>
    .clearfix::before, //clearfix：同时解决高度塌陷和外边距重叠问题
    .clearfix::after{
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="box1 clearfix">
    <div class="box2"></div>
</div>

原理比较简单，首先设置一个前后属性，里面填充一个空内容，但是如果是内联的话就不会显示，我们必须设置为非内联，为了解决外边距重叠问题，设置为table,最后为了解决BFC所以设置clear:both

5 定位

5.1 定位的简介

定位是一种更加高级的布局手段
通过定位我们可以将元素摆放到页面的任何地方
使用position设置定位，可选值
- static 静止的，默认值，不开启定位
- relative 开启元素相对定位
- absolute 开启元素绝对定位
- fixed 开启元素的固定定位
- sticky 开启元素的粘滞定位

5.2 相对定位（relative ）

当元素的position时则开启了元素的相对定位

相对定位的特点
- 元素开启相对定位以后如果不设置偏移量不会发生任何变化
- 相对定位参照元素在文档流中的位置
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的属性( 块/ 行)
偏移量(off-set)：当元素开启了定位之后可以通过偏移量设置元素的位置
- top：定位元素和定位位置上边的距离，垂直方向
- bottum：定位元素和定位位置下边的距离，垂直方向
- left：定位元素和定位位置左侧的距离，水平方向
- right：定位元素和定位位置右侧的距离，水平方向
- 通常情况下我们四选二即可实现定位

5.3 绝对定位(absolute)

当元素的position设置为absolute的时候开启了绝对定位

开启绝对定位之后不设置偏移量元素的位置不会发生变化
开启绝对定位之后，元素会从文档流脱离
绝对定位会改变元素的性质-> 行内变快，块的宽高被内容撑开
绝对定位会提升元素层级
绝对定位元素是相对于包含块进行定位的

包含块（containing block）：正常情况下, 包含块是当前元素最近的祖先元素块元素。
绝对定位的包含块: 就是离他最近的开启了定位的祖先元素。
如果所有的祖先元素都没有开启定位就相对于根元素，html是根元素，也是初始包含块

于是有了一种对于确定大小的盒子的居中方式

<style>
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
</style>

5.4 固定定位(fixed)

将元素的position设置为fixed,则开启了元素的固定位置

固定定位可以认为是一种特别的绝对定位
脱离文档流
内联变块，块宽高被内容撑开
固定定位永远参照浏览器的视口进行定位
固定定位后不随网页的滚动条滚动

5.4 粘滞定位

当元素的position属性设置为sticky则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素达到某个位置时将其固定

5.5 水平垂直布局

包含块的宽度=Σ 7+绝对定位的left right （Σ 7=margin-left + border-left +padding-left +width+margin-right+ border-right+padding-right）

当发生过度约束的时候

如果9个值没有auto就调整right
如果有auto就调整auto
left right的默认值是auto，所以如果不知道left right 而且等式不成立，那么自动调整这两个值

垂直布局

top+margin2+padding2+height+buttom=h

5.6 元素的垂直层级（z-index：n(层级)）

对于开启了定位的元素，可以使用z-index指定元素的层级

z-index需要一个整数作为参数,越大越优先显示
元素层级如果一样优先显示后面的
层级可以设置负数，但是别用
祖先元素的层级再高也不会盖住后代元素

6 字体,图标字体与渐变

6.1 字体

字体相关的样式

color 用来设置字体颜色的
font-size 字体的大小，和font相关的单位
- px
- em 相当于当前元素的一个font-size
- rem 相当于根元素的一个font-size
font-family 字体族(字体)
- 可选值1：字体
- 可选值2：
  - serif 衬线字体
  - sans-serif 非衬线字体
  - monospace 等宽字体
  - 注意：以上并不是字体，而是字体的分类，如果写了这三个只是告诉浏览器要用这类字体，具体用哪个浏览器自行决定
- 我们往往可以指定很多值，用,隔开，字体名称有空格分号的要用’'包起来

@font-face 可以将服务器中的字体直接提供给用户去使用，但是存在问题问题：

加载速度
版权

6.2 图标字体

在网页中经常使用到一些图标可以通过图片引入图标但是图片本身比较大，但是非常不灵活

所以还可以将图标直接设定字体，然后通过@font-face引入
这样就可以通过使用字体图标的形式来使用图标

fontawsome 使用规范

官网下载
解压
将css和webfonts移到目录
将all.css引入网页
使用图标字体
直接通过类名来使用图标字体

使用示例

<!-- 1. -->
li::before{
    content: "\f1b0";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;           /*fab需要单独设置*/
    color: blue;
    margin-right: 10px;     
}

<!-- 2. -->
<span class="fas">&#xf0f3;</span>

<!-- 3. -->
<i class="fas fa-cat"></i>

6.3 字体的属性

行高(line-height)

行高指的是文字占有的实际高度
可以通过line-height来设置行高
- 行高可以直接指定一个大小( px em)
- 也可以直接为行高设置一个整数
  - 如果是一个整数的话，行高将会是字体的指定的倍数
行高经常还用来何止文字的行间距
行间距 = 行高 - 字体大小

字体框

字体存在的格子，设置font-size实际上就是设置字体框的高度

行高会在字体框的上下平均分配。将行高和高度设为一样的值，使单行文字在一个元素中垂直居中

font: 可以设置字体相关的所有属性

语法：

font: 字体大小/行高字体族; (行高可以省略不写，不写则为默认值)

写法一：先写字号在写字体

font: 50px Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

写法二：字号/行高在写字体

font: 50px/5 Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

font-weight: 字重 (字体的加粗)

可选值:

normal 不加粗
bold 加粗
100-900 表示9个加粗的级别,虽然提供了9个级别，但是没什么用,因为电脑上不可能安装这么多字重字体

font-style: 字体的风格

normal：正常的
italic：斜体

6.4 文本样式

text-align 文本水平对齐

left默认值
right 右对齐
center 居中对齐
justify 两端对齐

vertical-align 垂直对齐

baseline 基线对齐默认
top 顶部对齐，父子顶部对齐
bottom 底部对齐
middle 居中对齐一般不用
指定数值调整位置

text-decoration 设置文本修饰

none 默认值什么也没有
underline 下划线
overline 上划线
linethrough 穿过的线
后面还可以加颜色，给线改色但是IE不支持

6.5 背景

background-color 设置背景颜色

background-image 设置背景图片

可以同时设置背景图片的颜色，这样背景颜色将会成为图片的背景
如果背景图片小于元素，则背景图片会在元素中平铺将元素铺满
如果背景图片大于元素将会有一部分图片无法显示
如果两者一样大则会正常显示

background-repeat 设置背景的重复方式

repeat 默认值，背景会沿着xy轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 不重复

background-position 用来这只背景图片的位置

通过left、top、right、center、bottom设置图片的位置例如background-position: left center,使用方位词的时要写两个，如果写一个的话，默认第二个是center
通过偏移量指定图片的位置水平和垂直

background-clip: 用来设置背景的范围

border-box 默认值背景会出现边框下面
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只出现在内容区

background-origin 背景图片的偏移量计算的原点

padding-box 默认值 background-position 从内边距开始计算
content-box ：background-position 从内容区开始计算
border-box ：background-position 从边框开始计算

background-size 设置背景图片的大小

第一个值表示宽度
第二个值表示高度
- 如果指定一个值，另一个值就是auto，等比例缩放
cover 比例不变，将元素铺满
content 比例不变图片完整显示

background-attachment 背景图片是否跟随元素滚动

scroll 背景图片跟随元素移动
fixed 背景图片会固定在页面中

background 所有上述相关属性都可以设置没顺序

注意：bockground-size必须写在background-position的后边，并且使用/隔开background-position/bockground-size

bockground-origin bockground-clip两个样式，origin在clip前面

解决图片闪烁的问题

可以将多个小图片统一保存到一个大图片中，然后通过调整bockground-position来显示
这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题
这个技术在网页中应用十分广泛，被称为css-Sprite，这种图我们称之为雪碧图

雪碧图的使用步骤

先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景图片
设置一个偏移量以显示正确的图片

雪碧图的特点：

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验

6.6 渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

！！渐变是图片，通过background-image设置

线性渐变，颜色沿着一条直线变化

linear-gradient()

background-image: linear-gradient(red,yellow);

linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域

线性渐变的开头，我们可以指定一个渐变的方向：

to left
to right
to bottom
to top
deg deg 表示度数
turn 表示圈

/*前面加to指定渐变的方向*/
background-image: linear-gradient(to right,red,yellow);

/*直接指定旋转度数 例如 25deg 0.2turn(0.25圈)*/
background-image: linear-gradient(45deg,red,yellow);

/*渐变可以指定多种颜色，每种颜色默认情况下平均分配*/
background-image: linear-gradient(45deg,red 50px,yellow,#bfa,orange);
/*表示红色是c从50px开始，之前的就是纯红色*/

径向渐变: radial-gradient
默认情况下径向渐变的形状是根据元素形状变化的

正方形->圆
长方形->椭圆形
可以手动指定圆心的大小与位置

    background-image: radial-gradient(100px 100px,red,yellow);
    background-image: radial-gradient(100px 100px at 0 0,red,yellow);

repeating-radial-gradient() 可以平铺的线性渐变

background-image: repeating-radial-gradient(100px 100px,red,yellow);

7. 表格与表单

7.1 表格

在网页中我们也需要设置表格，通过使用table创建表格

<table border="1">
    <!-- 在table中使用tr表示一行,有几个tr就表示几行 -->
    <tr>
        <!-- 在tr中使用td表示一个单元格,有几个td就是有几个单元格 -->
        <td>1</td>
        <td>2</td>
        <td rowspan = "2">3</td>
        <!-- colspan：纵向的合并单元格 -->
    </tr>
    <tr>
        <td>1</td>
        <td colspan="2">2</td>
        <!-- colspan：横向的合并单元格 -->
        <td>3</td>
    </tr>
</table>

7.2 长表格

可以将一个表格分为三部分

表头 thead
主体 tbody
底部 tfoot
th 表格头部单元格

7.3 表格的样式

边框之间的间距

border-spacing: 0px;

边框合并

border-collapse: collapse;

如果不使用tbody直接使用tr，浏览器会自动创建一个tbody然后把所有tr放到里面，所以tr不是table子元素，这就导致子元素选择器无法选择

将元素设置为单元格

display: table-cell;
vertical-align: middle;

7.4 表单

现实生活中用于提交数据
网页中的表单用于将本地数据提交远程的服务器
使用form标签创建表单

实例

<body>
<!--
    from的属性： action 表单要提交的服务器的地址
-->
<form action="./target.html">
    <!-- 添加表单项 -->
    <!-- 文本框
        注意
            数据要提交的服务器中，必须要元素指定一个name
    -->
    文本框<input type="text" name="username">
    密码框<input type="password" name="pw">

    <br>
    单选按钮
    <!--必须要指定一个value属性，value属性最终会作为用户填写的值 -->
    <!--必须有一个相同的name属性，否则不知道哪两个选项是一组的 -->
        <input type="radio" name="hrll" value="a">
        <input type="radio" name="hrll" value="b" checked>

    <br>
        <input type="checkbox" name="tt" value="1" checked>
        <input type="checkbox" name="tt" value="2" checked>
        <input type="checkbox" name="tt" value="3">

    <br>

    下拉列表
    <select name="aa">
        <option value="i">选项一</option>
        <option selected value="ii">选项二</option>
        <option value="iii">选项三</option>
    </select>

    <!-- 提交按钮 -->
    <input type="submit" value="注册">
</form>
<body>

7.5 表单的属性

<!-- 关闭自动填充 -->
<form action="./target.html" autocomplete="on">
    <!--
        autocomplete="off" 关闭自动补全
        readonly 将表单项设置为只读，数据会提交
        disabled 将表单项设置为禁用，数据不会提交
        autofocus 设置表单项自动获取焦点
    -->    
    <input type="text" name="username" value="hello">

    <br><br>

    <input type="color">
    <!-- 自动获取焦点 -->
    <input type="email" autofocus>
    <input type="submit">

    <!-- 将表单设置为只读 数据提交 -->
    <input type="text" value="fasd" readonly>
    <!-- 将表单设置为禁用 数据不提交 -->
    <input type="text" value="fasd" disabled>

    <br>
    
    <input type="reset">

    <br>
    
    <input type="button" value="按钮">
</form>

8 弹性容器与移动端

8.1 弹性盒/伸缩盒子

是css的另一种布局手段，主要用来代替浮动完成页面的布局
如果你不需要兼容老浏览器就用flex要是需要兼容PC就用float
伸缩盒可以使元素更有弹性，让元素可以跟随页面的大小而改变
弹性容器
- 要使用弹性盒子必须先将元素设置为弹性容器
- 通过display设置弹性容器
  - display:flex 设置为块级元素的弹性盒子
  - display:inline-flex 设置为行内块元素的弹性盒子
弹性元素
- 弹性容器的子元素是弹性元素(弹性项目)
- 只有弹性容器的直接子元素才是弹性元素，后代元素不是
- 一个元素既可以是弹性容器也可以弹性元素
弹性容器的属性
- flex-direction 用于指定弹性元素的排列方式，可选值有
  - row (默认值),弹性元素在容器中水平排列，这个row是按书写顺序排列，中国是左到右他就是左到右。 ——主轴自左向右
  - row-reversw 反向水平排列 ——主轴自右向左
  - column 弹性元素纵向排列 (自上向下)
  - column-reversw 弹性元素纵向排列 (自下向上)
主轴
- 弹性元素的排列方向称为主轴,例如row的时候主轴值自左向右…
侧轴
- 与主轴垂直方向的称为侧轴一般不说具体的方向只说水平还是垂直
弹性元素的属性
- flex-grow 指定元素伸展的系数
  - 当父元素有多余的空间的时候子元素如何伸展
  - 父元素的剩余空间按比例分配
- flex-shrink 指定元素的收缩系数
  - 当父元素中的空间不足以容纳所有的子元素时如何对子元素进行收缩
  - 默认值是1 等比例收缩
  - 0是不收缩
  - 值越大收缩越多

8.2 弹性容器的使用

flex-wrap:设置弹性元素是否在弹性容器中自动换行
- nowrap 默认值，元素不会自动换行
- wrap 元素沿着辅轴方向自动换行
- wrap-reverse 元素沿着辅轴反方向换行
flex-flow wrap和direction 的简写属性（flex-flow: wrap direction）
justify-content 如何分配主轴上的空白空间(主轴上的元素如何排列)，可选值
- flex-start 沿着主轴起边排列主轴较大值处空白
- flex-end 元素沿着主轴终边排列
- center 元素居中排列空白分布到两边
- space-around 空白分布到每一个元素的两侧但是起始两个的左右是小一半
- space-evenly 空白分布到元素单侧所有的空隙全相等 (唯独这一个兼容性的不好)
- space-between 空白分布元素之间，起始终止的左右没有
**align 开头的是设置辅轴上的样式 **
alihn-items 是设置元素在辅轴上如何对齐
- 他设置的是元素间的关系
- stretch (默认值)将元素之间长度设置为相同值这个行指的是与本行元素高度均相同，其他行不管
- flex-start 元素不会拉伸,沿着辅轴起边对齐
- flex-end 辅轴终边对齐
- center 居中对齐
- baseline 基线对齐
align-content 辅轴上的空白空间对齐方式，同justify-content
align-self 用来覆盖覆盖元素的align-items，相当于单独修改

8.3 弹性元素的样式

弹性元素的增长系数flex-grow是分配是在宽度的基础上加上按比例分配的空白的空间

弹性元素的缩减系数flex-shrink
- 缩减系数的计算方式比较复杂
- 缩减多少是根据缩减系数和元素的大小来计算的

计算元素flex-basis在主轴上的基础长度的时候就忽略了width，

默认值是auto即参考元素自身的width
如果传递了一个具体的数字即以该值为准

可以理解为弹簧的三种状态

flex-basic就是弹簧自然状态
flex-grow 弹簧拉伸
flex-shrink 弹簧压缩
- 他们有一个通用属性 flex: grow shrink basic
- flex有一个默认值 initial 相当于 flex:0 1 auto
- flex有一个 auto 相当于 flex:1 1 auto
- flex有一个 none 相当于 flex:0 0 auto 相当于弹性元素没有弹性

order 决定弹性元素的排列顺序

8.4 像素与视口
像素

屏幕是由一个一个发光的小点构成的，这一个一个发光的小点就是一个一个像素
分辨率：1920*1080 说的就是屏幕中小点的数量
像素在前端开发中分成两种情况：CSS像素和物理像素
物理像素：上述所说的小点点就是物理像素
CSS像素：在编写网页的时候我们所用的像素就是css像素
浏览器在现实网页的时候需要把css像素转化为物理像素，然后再呈现
一个css像素最终由几个物理像素现实由浏览器决定，默认情况下PC端1个css像素就是1个物理像素
视口(viewport)

视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小来观察css像素和物理像素的比值
默认情况下视口的宽度就是html标签的宽度
浏览器放大两倍之后
视口宽度 960px
物理像素 1920px
我们可以通过改变视口的大小改变比值

HTML&CSS学习笔记纯知识点版 (尚硅谷2019李立超版)_LiuKairui的博客-优快云博客_李立超前端笔记