HTML-CSS基础知识点总结✍
☛引言
复习一下HTML和CSS的基础知识点，加深理解一下吧
☛HTML及CSS知识点总结
HTML基础知识点回顾✍
1. HTTM语义化
1. 由于语义化更具有可读性，便于团队开发维护
2. 在没有css的情况下，页面也可以呈现出也很好的内容结构和代码结构
3. 关于SEO，搜索引擎能更好的理解页面中各部分的关系，可更快更准确的搜索到信息
2. 浏览器的渲染过程
1. 构建DOM节点树（解析HTML）
2. 构建渲染树（解析样式信息）
3. 布局渲染树（根据节点树和渲染树构建布局渲染树）
4. 绘制渲染树（画出节点在浏览器中的位置）
为了将渲染的结果尽早的展现在用户的屏幕上，不会等HTML都解析完成再布局渲染树，而是边界解析边布局
3.回流（也叫重排）/重绘
refolw回流（也叫重排）：
我们浏览器要花费时间去渲染，只要某个部分的布局改变了（例如：浮动的margin等元素几何属性都会改变布局，排除决定定位和相对浏览器窗口定位）浏览器需要倒回去重新排列。（改变了整体）
repaint（重绘）：
一般改变元素的颜色，文字颜色等等，不影响元素的周围或内部的属性，浏览器就会重绘，重新绘制某一个部分
为了性能，要减少重绘重排，解决方法如下：
1. 不要一条一条的修改样式，可以直接设置一个预先设置好的类名
2. 千万不要使用table布局，一般我们稍微操作一下就会重新布局
3. 对于动画来说尽量使用绝对定位或相对浏览器定位（因为不会影响到整个页面的布局）
4. 浮动叫做不完全脱离页面流，定位完全脱离页面流
4.块属性
1. 独占一行
2. 可设置行高和宽（完美支持margin和padding）
3. 可嵌套块标签和行标签以及行内块（p和h只能嵌套行标签）
div：无语义标签
p：段落标签
h1~h6：标题标签
ul、li：无序列表
ol、li：有序列表
块属性：独占一行显示，可以设置宽高，完全支持margin和padding，可以嵌套任何元素属性的元素，p标签和h标签不能嵌套自身
5.行属性
1. 行内显示
2. 内容撑开宽高，设置的宽高无效
3. 行标签只能嵌套行标签，不能把嵌套块标签
支持左右的margin和所有的padding（上下的padding检查元素时存在但无效，不能撑开高度）
一、a标签：
a标签俩个作用：
（1）页面跳转
（2）锚链接：连接地址，对应所在元素的id
a标签的常用属性及含义：
（1）href：a标签的基本属性，定义链接的地址
（2）title：定义a标签的说明
（3）target：定义连接被打开方式
target有三个值：
- _self，在当前页面打开
- _blank，在新的窗口打开
- _top，在当前页面打开
- _parent，在父窗口或者包含来超链接引用的框架集中打开。如果这个引用是在窗口或者在顶级框架中，那么它与_self等效。
-
a标签的四个伪类：
(1)link
(2)visited
(3)hover
(4)active
二、span标签
6.行内块
行内块：即拥有块标签属性可以设置宽高，也拥有行属性的行内显示
1. 可以设置宽高
2. 行内显示
img标签属性值及含义：
src:图片地址
alt：图片不能显示时所显示的信息（SEO搜索引擎的依据）
width和height：可直接设置图片大小（当css和自身属性都设置时取css）
title：当鼠标移至图片时出现一个悬浮窗口进行提示
表单：用于为用户输入创建表单，提交后可将from中所有的表单元素提交到服务器
表单属性：
action:提交的服务器地址
metod：数据传输方式
1. get传输的数据量少，数据所有人可见
2. post传输的数据量大，相对安全
input：
type属性值：
1. text 文本域
2. password 密码域
3. radio 单选框
4. checkbox 多选框
5. hidden 隐藏域
6. file 文件域
7. button 单纯的按钮样式
8. reset 重置按钮
9. submit 提交按钮
select&option:
下拉按钮菜单
textarea：多行文本输入框
cols属性：表示一行多少个字符
rows属性：表示行数
cols和rows可直接设置大小，但一般不用，用css设置默认值写在标签中，而不是value中
h5新增表单元素新属性
label的使用：
可使用label和其他元素关联（一个label只能对应一个input，多个时只看第一个）
方法一：直接将所有内容放在label标签中
<label><input ...></label>
方法二：labelba包含关联信息（让label中的for属性值和要关联元素的id值相等）
<label for="name">
<input id="name">
</label>
7.选择器
1、基础选择器：
标签选择器：div
类选择器：.active
属性选择器：name="lily"
id选择器：#box
2、层级选择器：
选择器优先级
!importent > 内联样式 > id > 类 （伪类） > 标签名（伪元素） > 通配 > 继承
8.怪异盒模型 标准盒模型
盒模型
1. 在html中，把每一个元素都当成一个盒子，拥有盒子的平面外形和空间
2. 盒模型由content padding border margin
3. 分为标准盒模型 怪异盒模型（混杂模式，ie6，**box-sizing：border-box**）
4. 标准盒模型：content + padding + border + margin
5. 怪异盒模型：内容+外边距
盒模型补充：
内容区域的盒子：content-box
内边距区域的盒子：padding-box
边框区域的盒子：border-box
没有 margin-box（这个是不存在的）
9.弹性盒子
横向 主轴 默认从左至右排列
竖向 侧轴 默认从上到下排列
**开启弹性盒子**
想要让元素进行弹性布局，必须在父元素中设置开启弹性布局
display:flex;
1. 当不设置宽度的时候，内容撑开宽度
2. 项目沿着主轴依次排列
3. 高度默认撑满整个容器
- 当项目的宽度，相加没有超过父级宽度，那么项目不进行压缩
- 当项目的宽度相加超出父级，项目进行压缩，并且填满父级容器
**控制主轴位置：**
改变主轴位置：flex-direction
- flex-direction:row ,默认值 由左向右
- flex-direction:row-reverse 由右向左
主轴侧轴互换
- flex-direction :column 主轴 由上到下
- flex-direction:column-reverse 主轴由下向上
**主轴富余空间分配：justify-content**
- justify-content：flex-start：默认在主轴开始位置 依次排列
- justify-content：flex-end 右对齐到主轴结束位置（不是反转）
- justify-content：center 项目在主轴内居中
使用较多：
- justify-content：space-around 富余空间包含项目
- justify-content：space-between 项目包含富余空间(靠两端）
侧轴富余空间管理:
- align-items：stretch 默认撑满侧轴
- align-items:flex-start 侧轴上对齐
- align-items:flex-end 侧轴下对齐
- align-items：center 侧轴居中
- align-items：baseline 基线对齐
将富余空间分配到项目上:
- justify-content 只是控制富余空间怎么分布，但是并没有把富余空间分配给项目
将富余空间分配给这个项目：
- **flex-grow：1**（数字代表几分，只有一个有那么全部给有的）
项目超出父级宽度换行：flex-wrap：wrap
不换行宽度压缩：flex-wrap：nowrap
超出父级的宽度， 换行并改变侧轴的start 和end 位置,调换了上下
-flex-wrap：wrap-reverse
**侧轴居中，只在****当前项目所在的行****居中**
diaplay：flex；
flex-wrap：wrap；
align-items：center
**整体侧轴的打包排列**
控制项目整体打包在侧轴的排列
- align-content：flex-start 整体项目进行打包，放在整体侧轴的start处
- align-content:flex-end 整体项目进行打包，放在整体侧轴的end处
- align-content：center 整体项目进行打包，放在整体侧轴的center 处
冲突：
- 在项目**换行后**，侧轴的排列 **优先align-content**
- 在项目**没有换行**是，**优先align-items**
在主轴居中：justify-content：center
flex-flow ：wrap column
- 是flex-wrap：wrap 和 flex-direction：column的合写
只有主轴有压缩，侧轴没有压缩
**项目的排列书顺序**
- order：1
- order对项目在容器中的排列 定义顺序
- 优先没有order属性排列，然后再从小至大排列 order
- **若是为负值 则最先排序 order：-1；**
**单独控制元素在侧轴上的位置 使用 align-self**
- align-self：flex-start
- align-self：flex-end
- align-self：center
收缩 flex-shrink：1
没有书写宽度是由内容撑开的
flex-basis 可以在弹性布局中取代 width 代表的是在主轴上的宽度
但是当主轴和侧轴交换位置后，flex-basis 就变成了项目的高度了
等分布局条件
| 基准值：0 | flex-basis：0 |
| 富裕空间分配项目：1 | flex-grow:1 |
| 收缩率：1 | flex-shrink:1 |
**合写： flex：1**
10.浮动
清浮动
- 清浮动并不是不让元素浮动，而是清除浮动元素脱离页面流
方法：
1. 在父级书写overflow：hidden等开始BFC的代码，常用overflow：hidden 但是 bfc 代码都有自己的其他效果，在不影响代码的清浮动
2.在所有浮动元素的最下边书写一个空标签（块标签）书写clear：both 在结构中多书写一行标签，有时候会影响代码
3.**在浮动元素后边书写一个 br 给br 标签书写一个属性：clear：all**
4.给父级设置高度也可以清除浮动 但基本不用
5.给父级书写 after 伪元素 替代直接在浮动元素下书写空标签的方法
一般可以直接命名一个清浮动的类名，将来如果需要清浮动，直接把类名给浮动元素的父级元素即可
.clearFix:after{
content:"\200B";
height:0;
display:block;
clear:both;
}
因为低版本的IE不支持伪元素，所以要在低版本IE中 给父元素开启haslayout （其实就是现代浏览器的BFC）
.clearFix{
*zoom:1;
}
11.定位
相对定位：
1.相对自身的位置定位（ex：right：100px 元素向左移动）
2.不会脱离页面流
3.left right top bottom 控制元素的定位位置，left和top具有优先性
4.一个元素设置相对定位，不会影响这个元素的其他属性
5.一般用在书写包含块或者是给非定位元素设置堆叠顺序（只有定位属性才支持z-index）
绝对定位：
1.相对包含块的位置进行定位
2.脱离页面流
3.left right top bottom 控制元素的定位位置 left和top具有优先性
4.改变元素的属性
（1）行标签：可以设置宽高，完美支持 margin
（2）块标签：不再独占一行
5.在浮动解决不了的布局下可以使用，在元素层叠的时候也可以使用相对浏览器窗口定位（固定定位）：
（1）相对于浏览器窗口定位，位置只和浏览器窗口相关
（2）脱离页面流
（3）left right top bottom 控制元素的定位位置 left和top具有优先性
（4）改变元素的属性
（5）无论页面滚动条或窗口大小怎么改变，元素的位置始终相对窗口定位
（6）IE678不支持
设置元素的堆叠顺序：
z-index：
- 整数
- z-index 默认为 auto
- 值越大越靠前
- 值为负会到当前页面流元素的后边
12.包含块
包含块：
- 初始包含块和其他元素包含块
- 首先：初始包含块：html根元素
- 当绝对定位一直找不到最近定位父级的话，那么就会相对初始包含块定位
- 当禁止系统滚动条的时候，固定定位的效果其实也是相当于相对初始包含块
包含块：
1. 当一个元素没有定位属性的时候，其实就是position属性为static（静态的，也就是在页面流中正常显示）
- 这个元素的包含块就是他自己的父级
2.当一个元素相对于自身的位置定位，（relative），那么它的包含块也是它的父级
3.如果一个元素定位属性是绝对定位（absolute），那么它的包含块是沿着父级一直向上寻找，直到寻找到拥有定位属性（不包含（static））的祖辈元素为止，这个祖辈元素就是它的包含块，但是如果找不到拥有定位属性的祖辈元素，根元素（包含块）
4.如果元素是fixed定位，其实他的包含块（官方说明还是初始包含块），但是是相对浏览器窗口定位的
行元素和块元素的互相转换：display
- display（控制元素显示方式）：元素的出生是自带一个默认的display属性，决定改元素该怎么样显示
- ：block 转成块属性
- ：inline 转成行属性
- ：inline-block 转成行内块属性
- ：none 不显示（元素已经加载到了，但是我们只是控制它不显示而已）
13.display 的值
控制元素隐藏有两种方法：
- **1。display：none**
- **2。visibility：hidden**
display 和 visibility 区别：
1.**display**：none **不占用空间 ** ** visibility**：hidden** 占用空间**
2.**display**：none **不继承** 直接把当前元素包括所有元素的内容**全部隐藏掉了**
**visibility**：hidden **继承** 只是隐藏当前的元素，但是子元素继承了属性所以**才隐藏** 若
设置是**可以显示的。**
14.overflow 三个值及含义
overflow 三个值：
- overflow 属性是设置元素内容超出的显示方式元素只要设置好宽高，那么就算超出也不会挤到别人
- 超出隐藏：overflow：hidden
- 超出生成滚动条（横竖都超出）：overflow：scroll；
overflow-y：scroll y方向生成
ps：当你设置一个方向有滚动条，那么他就会回去检测另一个方向有没有超出，如果有就顺便给它也添加自动生成滚动条：overflow：auto；
auto 和scroll 的区别：
1. auto只是在超出的方向上自动生成滚动条；
2. scroll 是无论是否超出，都会生成滚动条样式;
15. css精灵图
允许将一个页面涉及的所有零星图片放在一个大图 中，通过css背景图片的定位属性调用
优点：
1. 减少服务器请求次数
2. 减少图片大小
3. 利用缓存机制，图片可一次加载多次调用，加快网页加载速度，提高用户体验
16.BFC
什么是BFC：
1. BFC 块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里的子元素的样式不会影响到外边的元素
2. 在BFC中两个相邻的块级元素在垂直方向是margin发生折叠的
3. BFC是一个独立的布局环境，可以理解为一个容器，这个容器是会按照一定规则进行摆放的，不会影响外部环境
4. 如果一个元素符合BFC，那么BFC中的元素不会受影响
构成条件：
1. 根元素
2. 浮动的元素
3. 定位元素（绝对定位和固定定位）
4. display为inline-block
5. overflow值为hidden auto scroll
应用例如：浮动后高度塌陷，会影响到外界，开启BFC不会影响到外界
效果：
- 已知宽高的元素水平垂直居中
- 不写宽高的margin：auto属性
- 左边固定右边自适应
- 等高布局
CSS基础知识点回顾✍
1.文本溢出
（1）首先超出部分不能换行
（2）超出隐藏
（3）超出生成省略号
（4）元素必须是块元素
//超出部分不能换行
white-space：nowrap;
//超出隐藏
overflow：hidden；
//超出生成省略号
text-overflow：ellipsis;
//元素需要是块级元素
display：block；
2.伪类伪元素
- 伪类和伪元素都是css中的：
- 伪类：通过伪类选择器去选择到不存在于DOM树中的信息，还有通过一般的选择器获取不到的（hover，:nth-child）
- 伪元素：在DOM树中创建了一个元素，这个元素不存在于HTML源码中
- 我们无法去获取一行文字的第一个字，一段文字的第一行字，我们可以把他们变成一个伪元素来获取到，并控制样式。
- ！important > style >id > class（伪类也是类） > 标签名（伪元素）> * >继承
3.关键帧动画
- 书写在css样式style标签中，当某一个元素需要使用动画的时候，可以直接调用这个关键帧即可，可以复用的。
- 当关键帧的两个帧是from和to的时候代表的是0%和100%的状态，当关键帧开始后，会先执行form然后依次执行百分比，然后执行到to，当然也可以不书写from和to，直接书写百分比。
@keyframes move{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
- 在动画类型中，除了linear等方式以外，还有一个逐帧动画（让动画进行阶跃式变化，而不是两个状态）steps（图片的张数）
- animation调用关键帧：antimation:move 3s linear infinite;
- animation-name：名字；
- animation-duration：执行时间；
- animation-timing-function：曲线；
- animation-delay：1s 延迟时间；
- animation-iteration-count：动画执行次数；
- animation-direction：alternate；动画轮流反向播放
默认情况下，动画在执行前和执行后都变成默认的样式
- 在执行前让元素已第一帧动画等待：animation-fill-mode：backwards；
- 在执行后，让元素保持最后一帧的样式：animation-fill-mode：forwards；
- 两个效果都实现：animation-fill-mode：both；
- 这样是直接还原初始状态，不叫停止：animation：none；
- 暂停动画：animation-play-state：paused；
- 让暂停的动画继续执行：animation-play-state：running；
4.逐帧动画
animation: name 1s steps(12) infinite;
在动画类型中，除了linear等方式以外 还有一个逐帧动画（让动画进行阶跃式变化，而不是两个状态之间的过渡）
5. 过渡动画
- transition:过渡
要过渡的属性，如果全部则写all
- transition-property：width，height；
动画持续时间
- transition-duration：1s；
动画过渡类型
- transition-timing-function：linear；
动画延迟时间
- transition-delay：.5s；
- transition：all 1s linear .5s; 合写
6.2D
transform的属性：
1.rotate 旋转
（1）transform：rotateX（）；
沿着x轴旋转，当值为正，顶部朝里旋转，当值为负的时候，顶部朝外
（2）transform：rotateY（）；
沿着Y轴旋转，当值为正，左朝里旋转，当值为负的时候，左侧朝外
（3）transform：rotate（）;
默认沿着中心点，顺时针或逆时针旋转，顺时针值为正，逆时针值为负
2.skew扭曲
（1）transform：skewX(30deg);
沿着X扭曲，当值为正头往左边扭，否则头往右边扭
（2）transform:skewY（）;
沿着Y轴扭曲，当值为正的时候，左侧向上扭曲，否则左侧向下扭曲
（3）transform：skew（30deg,50deg）;
skew()是合写，两个参数，一个是X一个是Y。如果只有一个值，默认X轴
3.translate移动
（1）transform：translateX（10px）;
为正，向右移动，否则向左
（2）transform：translateY（10px）;
为正，向下移动，否则向上
（3）transform：translate（10px，20px）；
两个值：代表X和Y
一个值：只代表X
（4）translate书写百分比的时候，是相对于自身移动5的
4.scale缩放
（1）transfrom：scaleX（1.2）；
默认沿着中心点缩放，缩小和放大，沿着X轴缩放，是一个比例
（2）transform：scaleY（0.8）；
沿着Y轴缩放
（3）transform：scale（0.8,0.5）；
- 两个值，是X轴和Y轴缩放
- 一个值，是X轴和Y轴等比缩放
7.3D变换
transform-style: preserve-3d; 开启3d，针对父级
开启3d硬件介入：
- perspective:300px;开启景深，近大远小，视锥，在父级开启景深，子元素都将开启近大远小的效果
- 只想单独让一个子元素实现景深效果，那么可以对子元素设置transform：perspective因为box自身旋转，所以我们观察者也跟着旋转，我们需要把景深设置给父级
rotateX:沿着X轴旋转，当值为正的时候，顶部朝里旋转，当值为负的时候，顶部朝外旋转
- transform:rotateY(30deg)
transform：rotate（30deg），rotateZ是一样效果，一个是3d一个是平面
- rotate:元素默认沿着中心点
transform：skewX（30deg）；skewX控制扭曲，当值为正头向左边扭， 否则头向右边扭
transform：skewY（30deg）；skewY当值为正，左侧向上扭，否则左侧向下扭
skew（）是合写，两个参数，一个是x一个是y，如果只有一个值默认x轴
scaleX(0.8)沿着中心点缩放
scaleY(1.1)沿着中心点缩放
scale(0.8,1.1) scale跟两个值的时候，代表x和y一起缩放，一个值的时候代表x和y一起缩放
translateX（）当值为正向右移动
translateY（）当值为正向向下移动
transateZ（）当值为正往后走
translate两个值分别代表x和y，如果书写一个值只代表x
translate（百分比）书写百分比相对于自身的宽和高
translate 3d只能跟三个值
补充：
1.开启3D空间
- transform-style：preserve-3d；（对父级设置）
- 3d功能有个开始硬件加速，走显卡介入，极显，独显，而不影响浏览器
- 重排：DOM树发生改变，重绘：样式改变，就算没有开启3D空间，写rotateZ都可以
2.rotateZ和rotate是一样的效果，一个是3d，一个是平面
- translate的值 有百分比 像素 但是在Z轴，只有像素
3.transform：rotate3d(1px,5px,2px);三个值
当元素旋转的时候，坐标轴会跟着旋转
8.景深
景深设置：
- 父元素的景深设置：perspective();
- 子元素的景深设置：（只想一个元素实现景深效果，可以对子元素设置）
transform：perspective() translateZ()
9. 图片原点、大小、裁剪
原点：背景图原点指的是 背景图定位的时候 0 0（坐标轴的原点） 所默认的位置、如果图片平铺，那么border-box区域都是图片可以显示的区域
- background-origin: 改变背景图原点位置;
- background-origin: border-box；
- background-origin: padding-box；
- background-origin:content-box；
裁剪：背景图默认不裁剪，如果图片充满整个容器（无论是大图片还是小图片平铺）、那么图片显示区域就是border-box。
背景图裁剪 可以规定哪个区域可以显示背景图；
- background-clip: border-box;
- background-clip: padding-box;
- background-clip: content-box;
大小：background-size：
1.背景图大小设置必须写在背景图引入的下边，width heigth
2.百分比相对于容器的宽和高
例、background-size：50% 50%
3.图片等比缩放，当宽高的其中一个刚好充满容器，另一个充满或超出容器,图片有可能超出容器 但是图片一定充满整个容器.
background-size: cover
4.图片比例不变，等比缩放。当任意宽高其中一个充满容器 即停止,图片全部显示，但是可能充不满整个容器
background-size: contain;
10.渐变（本质是绘制一张背景图）
1、线性
线性渐变：background: linear-gradient（）第一个参数指定的是渐变的方向，同时决定渐变颜色的停止位置，默认值是 to bottom（由上至下）
- 第二个和第三个参数是开始颜色和结束颜色，当然中间可以添加更多的渐变色，格式可以是任意的，可以是角度，颜色值也可以是百分比
- 对角渐变：linear-gradient(to right,color,color,color...)
例：to left top右下至左上
- 角度渐变：linear-gradient(45deg ,color,color...)
坐标轴（y轴正方向（正上）为0度，度数顺时针递增）
- 在每个颜色值的后面添加百分比可以控制颜色怎么过渡 当百分比不是从0开始或者100结束，只有在百分比的区域过渡，其他以最近的颜色填充
- 重复渐变：repeating-linear-gradient，写一个循环的颜色，后面会跟着前面的操作平铺（必须从0开始）
.con{
width: 2000px;
height: 50px;
/*重复渐变*/
background: repeating-linear-gradient(45deg,#fff 0px,#fff 10px,#000 10px,#000 20px);
transition: all 20s linear;
}
2、径向
background: radial-gradient参数的组成部分主要包括五大部分：形状、大小、圆心位置、颜色和颜色位置。默认从圆心开始，100%的位置在离圆心最远的角或边
例： -webkit-radial-gradient(150px,80px,farthest-side（最远的边）/farthest-corner（最远的角）,#ccc,#ddd)
- 改变圆心点用at：radial-gradient （at left top , #ddd , #ccc）重复径向渐变的操作与线性相同
最后
- 未完待续，持续补充
- 愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖疲倦的自己，坚持学习
