建议打开目录食用~~
选择器
使用选择器之前，在head标签内加style标签：
<head>
<style>
</style>
</head>
- class类选择器 ，多个标签的类名可以重复
<h3 class="hhh">h3</h3>
使用： .类名{ 声明 }
- id选择器，唯一的
<h3 id="hhh">h3</h3>
使用： #类名{ 声明 }
- 标签选择器： 标签 { 声明 }
导入CSS样式的方法
- 内部样式：直接写在前面的
<h5 style="font-size:50px;color:cornflowerblue ">h5</h5>
-
内联样式：正如选择器所讲的，声明在head标签内的
-
外联样式：建立一个css文本，写在style外面，用link将地址写在href里；
<link rel="stylesheet" href="./外联.css">
内部样式优先级最高；
设置字体样式
以font-开头的声明，如：font-family ；font-size 等设置字体样式
文本装饰
- 水平对齐方式： text-align： center为居中，left和right为左右；
- height与line-height的区别：height是字体背景的限高，而line-height是字体基线与背景限高的距离除二；
- width是字体背景的宽；
- text-decoration: 文本装饰，例如text-decoration: none;取消超链接下划线
- text-shadow:阴影，值：水平位置，垂直位置，阴影颜色，模糊程度；
- white-space:控制元素内部空白部分的显示方式，比如：pre 为保留空白符和换行符，不进行换行处理；pre-wrap 保留空白符和换行符，允许自动换行
- text-overflow文本溢出，需要注意的是要使其生效，块元素必须显式定义
overflow为非visible值（hidden），同时white-space需要为nowrap值。值：ellipsis是将溢出部分替换为’…’ 。 - 等等等等…
伪类语法
选择器：伪类名{ 声明； }
- a:link{}未单击访问过超链接样式；
- a:visited{}单机访问后超链接样式；
- a:hover{} 鼠标悬浮其上的超链接样式；
- a:active{} 鼠标单击未释放的超链接样式；
- focus 获取焦点，只有表单类元素能使用
- checked 选中勾选的复选框或单选按钮。
结构伪类
- first-child容器内第一个这个元素变化
- nth-child()表示第几个“儿子”；
- first-of-type 这类元素的第一种
UI伪类
- disabled，比如某些信息不需要你填时变灰适用
- enabled，除disabled以外都可以用
目标伪类：target，跳到此处时会变化
伪元素选择器！！！
还有鼠标形状：cursor：1. default ;2.pointer ; 3.wait ; 4.help ; 5.text ; 6. crosshair 7. …；
div
div容器就如同一个背包，把想要写的东西放在一个背包里方便后续统一操作
- width和height是div的宽高；
- border是边框界限，例如： border: 1px solid rgb(236, 234, 234); 是黑色占一像素的实线边框；
- background是div的背景，例如： background: url(…/leisai.jpg) no-repeat 10px 20px; 是不重复平铺背景的图片，10px是移动的x轴，20px是移动的y轴，y轴方向颠倒了；
- 等等一些其他标签可用的div都可以用。
- resize可以重新盒子调节大小，需要配合overflow
- box-shadow阴影，值：水平位置，垂直位置，阴影颜色，外沿，模糊程度，内阴影：
box-shadow: 10px 10px 10px rgb(205, 152, 255) ;
- opacity透明度
span
类似于小括号，方便直接修改其他标签里面的内容。
列表
- 无序列表： ul标签，可以通过type或者style改变前面的样式，
<ul>
<li>苹果</li>
</ul>
- 有序列表： ol标签，可以通过type或者style改变前面的样式。
<ol>
<li>苹果</li>
</ol>
- 自定义列表：dl标签，dt是列表头，dd是列表内容。
<dl>
<dt>计算机</dt>
<dd>软件</dd>
<dd>硬件</dd>
</dl>
表格（加载效率较低）
table标签，tr标签是一行的开始，td标签是每一行每一列的内容
<table>
<tr>
<td>白杨</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>杨晨</td>
<td>语文</td>
<td>92</td>
</tr>
</table>
rowspan是将列相连，colspan是将行相连。例如 <td colspan=“3”> 是从这个格子开始向右三格相连。collapse可以使边框合并！！！
表单
补：记得加form标签套在最外面
input标签 ，可以创建一个输入框 ，type可多选；
- text是输入文本；
- password是输入密码，可隐藏显示；
- radio是选择选项，单选时则需要使选项的name相同，checked表示这个选项默认被选了
<p>男：<input id="man" type="radio" name="sex" checked>
女：<input type="radio" name="sex" id="woman"> </p>
- checkbox也是选择；
- button是按钮，两种写法
<button>提交</button>
<input type="button" value="注册">
- select是下拉菜单 加上selected是默认先显示这个内容
<select>
<option value="">请选择地域</option>
<option value="" selected>晋城</option>
<option value="">长治</option>
<option value="">太原</option>
</select>
多行文本域
textarea标签 ,用于限制字数，但不常用
<textarea cols="30" rows="10"></textarea>
一般用 <input type=“password” maxlength=“11”>；；
表单高级用法：1. 用于隐藏输入框<input type=“hidden”> 2. <textarea readonly > 表示只读，不可修改内容
- <button disabled> 表示这个按钮不可用
后代选择器
爹在前面，儿子在后面，空格隔开，（儿子之后所有都会被影响）例如
<ul> <li>第一</li>
<li>第二</li>
<li><a href="">第三</a></li> </ul>
若要使a标签内的“第三”也为红色，需要
li a{ color:red; }
子代选择器
只能选择作为某元素直接/一级子元素的元素，爹>子，例如
p>strong{color:red;}
<p>哈哈哈<strong>哈哈</strong>啊哈哈哈</p>
<p>哈哈哈<span>嗷嗷<strong>哈哈</strong>嗷嗷</span>啊哈哈哈</p>
并集选择器（话不多说直接例子）
p,strong{color:red;}
交集选择器
<p class="choose">第一个p</p>
<p>第二个p</p>
<h1>第一个h1</h1>
<h1 class="choose">第二个h1</h1>
若要使第一个h1变色，直接标签加类即可
p.choose{color:aquamarine;}
属性选择器
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.luogu.com.cn/">洛谷</a>
<a>无</a>
在[]内的属性，只要有则都会被渲染；例如
[href]{color:rgba(222, 152, 250, 0.729);}
只要有href的则都会变色。
有多种其他方式：1. 例如： href*=“cn” 只要href里有则都变色；2.href^=“https://www.baidu” 以此为开头的会变色；
- href$="cn/"以此结束的都会变色
边框设置
- border 边框 ： solid 实线 dashed 虚线 double 双实线 dotted 点状虚线 ；同时可以分别设置四边如：border-right；
还可以使用boder-radius这类使div变成圆（还有变态的好玩的：border-bottom-left-radius:100px 50px（椭圆），单独设值）
- margin 外边距 ，与最近的元素的的边距（似乎一般left和top比较优先，right和bottom没反应） 设置四个值时为上右下左，两个值时为上左；
margin:0px auto;//左右居中
- padding 内边距 ，其它与margin相似
盒模型计算：元素大小+边框+内边距，margin修改不会修改元素大小，padding会改变，那么可以用这个来防止修改
box-sizing: border-box;
- 一般为了统一，使用 * （通配符）来适配所有元素
- outline，外轮廓，例如outline-width,style,color，offset等，不占盒子计算
标准流之间的转换
- 块元素，独占一行，能设置宽高；
- 行内块元素，不独占一行，能设置宽高；
- 行内元素，不独占一行，不能设置宽高；
转换：用display 1.inline 是转化为行内元素 2. inline-block 转化为行内块元素 3. block 转化为块元素 4. none 消失
浮动
float 标签，脱离标准流以后，可以设置宽高（span也可以），当脱离标准文档流时，其他元素会占用原来的文档流；
如何清除浮动？
例如直接用div包裹浮动，然后设置高；或者用加一个div标签，然后在给这个标签的style加clear:both;清除浮动，让父元素能够正确地包裹所有子元素 ， 还有：
ul:after{
clear:both;
display: block;
content:"";
visibility: hidden;
}
（我自己理解是先清除浮动，再变成块，然后加个内容让之后的字可以回车到下一行）
超出部分隐藏
overflow标签，如果只想展示部分则直接hidden，滚动展示scroll，
紧接上文，如果想要清除浮动，可以使用 overflow: hidden; 来触发BFC机制。
定位（position）
固定定位
position: fixed; 参照物：浏览器屏幕
特点：1. 固定在了浏览器屏幕上，不会随着页面滚动而滚动
- 不占实际位置，位置会被下面的元素占去，脱离了标准文档流
- 可以调整位置： top left right bottom
相对定位
position: relative; 参照物自身原本位置
特点：1. 会随着页面滚动而滚动
- 占实际位置，没有脱离了标准文档流
- 可以调整位置： top left right bottom （例如right是离原本自身的右边框的距离）
绝对定位
position: absolute; 参照物：离这个元素最近的设置过定位值的父元素的左上角
特点：1. 会随着页面滚动而滚动
- 不占实际位置，位置会被下面的元素占去，脱离了标准文档流
- 可以调整位置： top left right bottom
层级
z-index
后面数字越大，越优先显示
基础过完了，重要的就是练习啦！！！
# 补：
每次设置宽高的时候可以在控制台获取一下宽高：window.innerWidth
背景
- background-origin设置参考原点
- background-clip设置裁剪边框（cover万能解）如text表示只显示在文本内，content-box表示被才见到内容框内等
渐变（background-image）
- 线性渐变
background-image: linear-gradient(to right,rgb(228, 160, 255),rgb(189, 212, 255));
可以改变方向，to left top，或者 20deg 角度（顺时针旋转）
可以在颜色后面加像素如rgb(228, 160, 255) 50px，表示在这个方向上这条线一定是这个颜色，颜色与颜色之间则为渐变色，两边空白处由其附近的颜色纯色填充。
- 径向渐变
radial-gradient(at 100px 50px,rgb(228, 160, 255),rgb(189, 212, 255));
- 第一个at表示圆心位置，默认中心。
- 也可以只写100px 100px 设置圆半径
同时写时半径在前坐标在后不加逗号
radial-gradient(50px 50px at 100px 100px,rgb(228, 160, 255),rgb(83, 143, 255));
- 重复渐变 :repeating- 将前缀加在上面两个前面
重复渐变定义：在没有渐变的区域重新渐变
2D变换
- 位移 以自身为参考x，y进行移动
transform: translateX(50px) translateY(50px);
-
缩放，scale()无单位，
-
旋转，rotate() 单位为deg角度，顺时针旋转
-
扭曲，skew() 单位为deg角度.
-
设置原点，transform-origin，可以改变旋转的原点
3D变换
首先要找到父元素开启3D空间
transform-style: preserve-3d;
-
rotateX，rotateY可以用了，同时要开启景深
perspective才能看清楚效果，景深指观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更加立体（给父元素加）
-
perspective-origin可以改变透视点（观察者）的位置
其它不重要与2D差不多~~~~
过渡！！！
-
transition-property，需要过度的属性
-
transition-duration，过渡的时间
-
transition-delay，过渡延迟时间
-
transition-timing-function 过渡方式，ease（慢快慢），linear（匀速），ease-in（慢快），ease-out（快慢）等等等等。。。
最重要的是贝塞尔曲线
cubic-bezier()，打开自定义过渡状态
https://cubic-bezier.com/
这些代表需要过度的属性，写在元素内，不能写在伪类选择器里。伪类选择器内写过渡后的形状。
动画
完整定义
@keyframes 动画名{
0%{ 属性 } /* 初始 */
57%{ 属性 }
100%{ 属性 } /* 结尾 */
}
然后在需要动画的元素加animation-name 其余还有持续时间，延迟时间等与过渡相同关键词
animation-iteration-count:infinite;表示一直播放，可以改播放次数- direction，动画进行的方向改变之类
animation-play-state改变动画播放状态，配合伪类食用较佳
多列布局
非常实用方便（写在容器里）
- column-count，自动布局
- column-gap 列之间间距
- column-rule 列之间边框
- column-span (跨列的元素里写) 表示占几列
如果插入图片，直接将宽设置100%，为那一列的宽度100% 图片也适用！！！！
伸缩盒模型（非常会“利用”空间）
display: flex; // inline-flex是行伸缩
在容器内必写，元素变为伸缩盒模型，只有子元素为伸缩项目。
-
改主轴方向：flex-direction 比如row-reverse让其相反，column-reverse列相反
-
让伸缩项目换行：flex-wrap: wrap;
-
主轴（副轴）调整方式：justify-content （align-content）
（似乎用处不大？）（evenly平均分配！！好用）
-
伸：flex-grow，将 剩余空间 除以 所有的flex-grow值的相加，分配剩余空间
-
缩：flex-shrink，将 减少的外空间 乘以 收缩比（每个容器**flex-shrink*值除减少的外空间的比例）
-
排序：order，值为整数默认为0，负向前，正向后
媒体
媒体类型
- @media print只有在打印或者打印预览时才会应用的样式，正常在里面写CSS样式，要写在后面
- @media screen 只在屏幕上显示的样式
- @media all 应用所有设备
媒体属性
@media (min-width:900px){
.out{
background-color: #944444;
}
}/* 表示浏览器宽度900px以上时为这个颜色， */
同样遵从从上到下运行，写在上面会被顶掉
@media (min-width:900px) and (max-width:910px){
.out{
background-color: #944444;
}
}/*在之间变色*/
还有or only ’ , ’ …等
BFC（特异功能）
如何去开启BFC:
BFC能解决的东西：
小函数：vh是视口的高度（viewport height）可以用**calc()**函数进行数学运算，
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
