HTML是一种超文本标记语言
一、选择器
类选择器：.class
id选择器：#id
通配选择器：*（选择所有元素）
元素选择器：element（选择某个元素的所有元素）
交集/并集选择器：
elementelement ：
p.important 选择class属性包含impotant的所有<p>元素，注意：不能是两个元素
element,element ：
div,p 选择所有的<div>元素和<p>元素
后代/兄弟元素选择器
element element ：
div p 选择<div>元素内的所有<p>元素
element>element ：
div>p 选择所有父级是<div>元素的<p>元素
element+element ：
div+p 选择所有紧接着<div>元素之后的<p>元素
element1~element2 ：
p~ul 选择p元素之后的每一个ul元素
伪类选择器
:hover a:hover 选择鼠标在链接上面时
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素
:last-child p:last-child 选择每个p元素是其父级的最后一个子级
:not(selector) :not(p) 选择每个并非p元素的元素
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点）
伪元素选择器
:before p:before 在每个<p>元素之前插入内容（一般不用，淘汰了）
:after p:after 在每个<p>元素之后插入内容（一般不用，淘汰了）
::before p::before 在每个<p>元素之前插入内容
::after p::after 在每个<p>元素之后插入内容
::selection p::selection 选择被用户选取的元素部分
属性选择器
[attribute] [target] 选择所有带有target属性元素
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素
自定义滚动条
滚动条组成部分：
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
用:hover实现鼠标在一个元素时另一个元素发生变化
二、盒子模型
（1）块级盒子（默认样式为块级的元素）
常见的块级元素：div、p、h1~h6、ul、ol、li、table、hr
被定义成块级的盒子会有以下情况：
盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下这意味着盒子会和父级容器一样宽
每个盒子都会换行
可以定义width 和 height
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
（2）内联盒子（默认样式为行级的元素）
常见的行内元素：span、img、a、lable、input、textarea、select、button
被定义成行级的盒子会有以下情况：
盒子不会产生换行（在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示）。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。
(3) padding和margin（可以随便找一个网页，打开检查元素即可看到）
padding -> 内边距(内容与边框之间) margin -> 外边距(标签与标签之间)
*注意：两个挨着的margin浏览器最后会取其中的最大值；
1.margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
2 .padding: 用于控制内容与边框之间的距离；
3 .border(边框):围绕在内边距和内容外的边框。
4 .content(内容):盒子的内容，显示文本和图像。
(4)标准盒模型（向外扩展）
加入padding或者border，内容不变，盒子向外扩展
box-sizing=content-box;
盒子的大小=padding+border+width/height
(5)替代盒模型(向内伸缩)
box-sizing=border-box;
加入padding和border，盒子大小不变，内容被压缩
content=width/height-(padding+border)
(6)盒模型实例
(7) margin和padding拓展 overflow:hidden可以用来解决margin塌陷问题
a.body的margin问题
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下,
body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框.
解决办法：margin:0;
b.margin collapse（边界塌陷问题）
外边距的重叠只产生在普通流文档的上下外边距之间
兄弟div: 上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
父子div: 如果父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin
(8)元素的高度和宽度
1.元素不设宽度
a.当元素为文档流,元素元素不设宽度时，若元素为文档流中元素，则此元素继承其父元素宽度。
b.当元素为脱离文档流元素,在元素不设宽度的情况下，若子元素为脱离文档流元素，则此元素宽度等于其内容宽度。
2.元素不设高度
若元素没有内容，则高度为0；若元素有内容，元素高度为内容高度。
三、定位
定位（position）
static
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
特点
静态定位的元素不会受到 top, bottom, left, right影响。
relative
相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间（初始文档流位置）不会改变。
fixed
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>
overflow
该属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。 overflow:visible
hidden 内容会被修剪，并且其余内容是不可见的。 overflow:hidden
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 overflow:scroll
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 overflow:auto
inherit 规定应该从父元素继承 overflow 属性的值。 overflow:inherit
四、浮动、对齐
浮动
float:left or right
特点：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为 止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
清除浮动
语法
.text_line {clear:both;}
特点：
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
居中对齐
1.水平居中
文字
text-align: center
通用
1.子元素 display: block; margin: auto
2.子元素position: relative; left: 50%; margin-left: -子元素宽度/2px;
3. 子元素 position: relative; left: 50%; transform: translate(-50%,0);
4.父元素 display: flex; justify-content: center;<常用，好用>
2.垂直居中
1.父元素 position: relative; 子元素 position: absolute; top: 0; bottom: 0; margin: auto 0
2.父元素 overflow:hidden;子元素 top: 50%; margin-top: -高度/2px;（注意margin塌陷，给父级添加overflow:hidden）
3. 子元素position: relative;top: 50%;transform: translate(0,-50%);<常用>
4. 父元素 display: flex; 子元素 align-self: center;
5. line-height 属性
补充：
利用弹性盒子的居中：
水平居中：
display:flex;
justify-content:center;
垂直居中
display:flex;
align-items:center;
注意:
text-align:具有穿透性
fit-content:自适应元素的宽度
应用auto的时候必须给元素加一个固定的高度或宽度
涉及到top、buttom、left、right的时候需要给元素加一个相对定位，当有margin-top的时候 要注意margin塌陷
五、
各种效果
盒子的相关设置
边框的三个属性
border-radius
box-shadow
border-image
圆角（利用border-radius)
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
border-radius: 5px;（效果赋予四个角）
border-radius: 5px 10px;（第一个值是左上右下角，第二个值是右上左下角）
border-radius: 5px 10px 15px 20px;（从左上角顺时针到左下角4个值）
border-radius: 50%;圆角值从左上顺时针到左下。
box-shadow: 10px 10px 5px grey;
从左到右的几个数值分别是：
阴影的水平偏移 阴影的垂直偏移 模糊程度 阴影尺寸 颜色 是否为内阴影（是否加insect）
border-image：
就是盒子的四个边用图片进行填充，
round图片通过重复来形成边框
stretch图片通过拉伸来形成边框
渐变（可自行用下面代码尝试）
background-image: linear-gradient(#e66465, #9198e5);
background-image: linear-gradient(red, blue, yellow);
background-image: linear-gradient(to right, red , yellow);
background-image: linear-gradient(45deg, red, yellow);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(circle, red, yellow, green);
角度从正上顺时针增加。百分数指颜色键的位置。
文字效果
1.文字阴影
text-shadow: 5px 10px 15px #FF0000;
text-shadow: 5px 5px 15px #FF0000, 5px 5px 30px #FF0000;
从左到右的几个数值分别是：
阴影的水平偏移 阴影的垂直偏移 模糊程度 颜色
补充:边框阴影
box-shadow:
2.矩形阴影
3.文字overflow属性
text-overflow: ellipsis： div 容器内的文本无法完全显示时，可以看到加上此代码它被裁剪了。
显示省略符号来代表被修剪的文本。
text-overflow: clip; 默认值 修剪文本。
使用 ellipsis 的前提：
white-space: nowrap;
overflow: hidden;
css设置文字显示两行,溢出部分用省略号代替
div{
overflow:hidden;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
text-overflow:ellipsis;//溢出部分用省略号代替
-webkit-line-clamp:2; //设置文本显示两行
-webkit-box-orient:vertical; //从上到下排列子元素;
white-space:normal;
}
换行
4.word-wrap: break-word;
使用该属性，文本在区域中会尽力（换行）显示出完整单词，如果单词长度大于区域宽度则分裂单词，以防止单词显示到区域外面。
5.单词拆分换行
word-break: keep-all;
word-break: break-all;
keep-all 是保护所有单词不被拆分。
break-all 是换行时拆分所有单词。
过渡!!!!!
transition: 2s;
transition: width 2s;
transition: width 2s, height 2s, transform 2s;
transition: width 2s linear 2s;
从左到右几个数值分别为：
效果（可选，不写指全部） 过渡时间 过渡的时间曲线（可选） 过渡的开始时间（可选）
动画!!!!!!
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3的动画属性
下面列出了 @keyframes 规则和所有动画属性：
属性 描述 CSS
@keyframes 规定动画名字。
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
学了js后用的
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-fill-mode它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟(animation-delay)，并且按正常方向（animation-direction）执行的动画（正常方向是指normal也就是指动画从0%运行到100%的动画）。动画按执行时间来划分，它分为三个过程，或者说一次动画过程可以将元素划分为三个状态：动画等待、动画进行和动画结束。默认情况之下，只有在动画进行状态，才会应用@keyframes所声明的动画；而在动画等待和动画结束状态，对元素样式并不会产生任何的影响。
animation-fill-mode属性可以接受none、forwards、backwards或者both四个值中的一个值。接下来分别来解释每个值对其影响。
原文: https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html © w3cplus.com
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
属性值
值描述测试
normal默认值。动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
样例：
@keyframes hengtiao {
0% {
top: -3px;
}
50% {
top: 76px;
}
100% {
top: -3px;
}
}
@-webkit-keyframes hengtiao {
0% {
top: -8px;
}
50% {
top: 105px;
}
100% {
top: -8px;
}
}
transform(translate)详解
translate()
translateX()
translateY()
translateZ()
translate3d()
translateX
向X轴平移，填正数往右平移，填负数，往左平移
translateY
向Y轴平移，填正数往下平移，填负数，往上平移
translateZ
向Z轴平移，这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ() 里面的值 越大， 电脑屏幕离你越远， translateZ() 的值就越小。 所以说，Z 增加，那么这个电脑屏幕，离你就越近，
下面要用到旋转，rotate，不懂的话，请点击→css3系列之transform 详解rotate
首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。
translate() 和 translate3d()
translate 是同时设置 translateX 和 translateY， 所以里面可以填两个参数， 第一个值 X 第二个 Y
translate3d 是同时设置 translateX ，translateY 和 translateZ 所以里面可以填三个参数
只不过有点不同的是， translate 如果第二个参数不填的话，默认是0， 不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。
补充
1.给字体设置样式
给字体加粗用 font-weight：bold;
改变字体大小： font-size: 0px;
用font-size:
可能的值
值描述
xx-small
x-small
small
medium
large
x-large
xx-large
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
默认值：medium。
smaller把 font-size 设置为比父元素更小的尺寸。
larger把 font-size 设置为比父元素更大的尺寸。
length把 font-size 设置为一个固定的值。
%把 font-size 设置为基于父元素的一个百分比值。
inherit规定应该从父元素继承字体尺寸。
字体间距用法:
word-spacing: 1cm;
word-spacing: 10pt;
word-spacing: 10px;
word-spacing: none;
line-height:10px;可以给li标签设置行间距
改变div里面文字横竖方向的方法
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
2.制作鼠标悬停浮动效果时可以用
:hover用来制作鼠标悬停效果
:hover的
z-index:指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
opacity:透明度
如何让一个原来隐藏的元素在鼠标放上去的时候会出现？
1.要设置块的堆叠顺序，首先它需要有宽高
position: absolute;
z-index: 1;
2.可以用到透明效果，
.navcontent{
background-color: rgb(180, 174, 174);
opacity:0.1%;
filter:alpha(opacity=10);
}（图片是透明的）
.navcontent:hover{
opacity:1.0;
filter:alpha(opacity=100);
}（鼠标放上去后不透明）
3.行级元素与块级元素的相互转化
display:inline将块级元素设为行级元素
同样，也可以用display:block将行级元素设为块级元素
一些功能可以看CSS选择器
4.一些常用的快捷键，不要忘了
F11可以对Vscode进行全屏
Alt+Shift往下复制
5.取消Body与HTML之间的默认边距margin：0；
6.在CSS样式中引入图片
background-image: url();
7.让电脑图片自适应浏览器
background-size: cover;
8.如何让三个Div元素居于同一行
利用flex弹性布局：display：flex；阮一峰的笔记：非常Nice，非常好用！！！
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
当用flex弹性布局的时候,如果想对其中的某个元素进行位置偏移,可以用margin-left等等
9.HTML如何去掉网页超链接下划线
在超链接里面加个样式style="text-decoration:none;"
引入超链接的颜色是可以直接改的
给链接或者文本加下划线：
text-decoration:
none:默认。定义标准的文本。
underline：定义文本下的一条线。
overline：定义文本上的一条线。
line-through：定义穿过文本下的一条线。
blink：定义闪烁的文本。
inherit：规定应该从父元素继承text-decoration属性的值。
10.CSS里面有一个多列属性可以看看
还有一个column属性
column-count 属性设置列的具体个数 好用
column-width属性控制列的宽度
column-gap，主要用来设置列之间的间隔，
column-rule-width，主要用来设置列之间的竖线分隔的宽度
column-rule-style，主要用来设置列之间的竖线分隔的样式，dotted是虚线
column-rule-color，主要用来设置列之间的竖线分隔线的颜色，
column-rule-style:对于样式而言有以下的值：
值描述
none定义没有规则。
hidden定义隐藏规则。
dotted定义点状规则。
dashed定义虚线规则。
solid定义实线规则。
double定义双线规则。
groove定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset定义 3D inset 规则。该效果取决于宽度和颜色值。
outset定义 3D outset 规则。该效果取决于宽度和颜色值。
11.表单
<form></form>标签，还需要用到<input>
列表：
无序列表（会用圆点进行标识）：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
当想要去掉前面的小圆点的时候,可以给ul加一个属性ul{list-style-type:none}
可以使li标签横向排列的方法：
1、给ul设置display:flex,justify-content:center、或者其他的
2.给Ul设置display:inline-block，float:left
3、利用float和margin
有序列表（会用数字进行标识）：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述
Display的值：
none此元素不会被显示。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block行内块元素。（CSS2.1 新增的值）
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row此元素会作为一个表格行显示（类似 <tr>）。
table-column-group此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column此元素会作为一个单元格列显示（类似 <col>）
table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption此元素会作为一个表格标题显示（类似 <caption>）
inherit规定应该从父元素继承 display 属性的值。
在制作下拉框的时候，会出现，下拉框的内容会遮挡住其底部的网页链接，导致鼠标放在链接上的时候没有效果，要解决这一问题可以：因为在制作下拉框的联动效应的时候需要用到伪类，直接在伪类里面加上z-index就可以解决这个问题了,
另外，隐藏的内容和鼠标悬停的位置（让其展现出的）需要时同级
鼠标光标设置：cursor
属性值
值描述
url需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default默认光标（通常是一个箭头）
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针（一只手）
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右（东）移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize此光标指示矩形框的边缘可被向上（北）移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize此光标指示矩形框的边缘可被向下移动（南）。
w-resize此光标指示矩形框的边缘可被向左移动（西）。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。
给div块加边框或者给图片加边框
边框虚线样式：dashed
边框实现样式：solid
border:1px dashed #000
代表设置对象边框宽度为1px黑色虚线边框
border:1px solid #000
代表设置对象边框宽度为1px黑色实线边框
去除<input><button>标签点击后出现的默认边框效果，outline:none;
实现鼠标点击后，input边框变色的方法 .class：focus{ 1px solid green}
