html笔记

head

做网页思路

7.html
1、做网页需要在网站根目录（存放网页的第一层文件夹）分成几个文件夹和文件，一般包含html文件夹、css文件夹、固定素材图片images文件夹、非固定素材图片uploads文件夹、首页index.thlml文件夹
2、网页布局思路：先整体再局部，从外到内，从上到下，从左到右
3、css实现思路：先画盒子、调整盒子范围、宽高背景色；调整盒子位置、flex布局、内外边距；控制图片、文字样式

seo三大标签

<!--网页制作先要写头部三大seo标签-->
<!--描述-->
<meta name="description" content="这是一个学习作品">
<!--关键字-->
<meta name="keywords" content="学习 练习">
<!--标题-->
<title>标题</title>

引入文件

<!--引入外部样式，media用于不同视口宽度使用不同样式-->
<link rel="stylesheet" href="./css/0.css" type="text/css" media="all" />
<!--一般common这个css文件放每个页面都要用到的头尾样式-->
<link rel="stylesheet" href="./css/common.css" type="text/css" media="all" />
        
<!--14.html-->
<!--媒体查询还可以通过引用的方式进行判断使用，直接在link链接里加media属性在根据需求填值就可以了，那么达到media的条件就执行本条引用里面的css-->
<link rel="stylesheet" href="./css/14.css" type="text/css" media="(max-width:768px)" />
 <!--响应式布局框架 一般引用的bootstrap.min.css文件（压缩了，所有多余的换行空格等都省略了，文件小适合实际使用），也可以引用bootstrap.css文件（没压缩，有空格换行适合查看代码）-->
<link rel="stylesheet" href="./css/bootstrap/css/bootstrap.min.css" type="text/css" media="all" />
        
        
<!--添加favicon图标 浏览器标题的图片展示 图片后缀和一般图片的默认名字 favicon.ico-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

html内嵌css

<style type="text/css" media="all"> </style>

body

常用标签

<h1>一级标题</h1>
<p>p标签</p>
换行前的标签<br />换行后的标签
<hr />横线
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<ins>下划线</ins>
<u>下划线</u>
<del>删除线</del>
<s>删除线</s>
<img src="./img/1.png" alt="显示错误是的描述" />
<img src="../itlike/img/x1.png" />
相对路径：
./一个点代表从当前网页所在的文件夹开始找文件，
../两个点表示从上一级的文件开始找文件，上个文件的的上个文件夹找就再用一个../以此类推

绝对路径:
win系统：从盘符开始进入：比如c:\img\1.png 
mac系统：从更目录开始进入比如/img/1.png 
网络引用：用图片的网址
因为除了win系统默认是用的\来进入文件，二其他的平台都是用的/进入的，虽然两个都可以用但是统一用/来进入文件<strong>注意整个路径可以统一用\或者/，但是不能混用</strong><br />
如果调到本地文件可以用相对路径
<a href="https://xuanju.team/xuexi/html/hm/1.1.html">超连接</a>
<a href="https://xuanju.team/xuexi/html/hm/1.1.html" target="_blank">新窗口跳转</a>
<a href="#">#不会跳转，但是会跳本网页的开头</a>
controls:显示播放界面 loop：循环播放 autoplay：自动播放，但是一般的浏览器会禁用本功能
<audio src="./img/金莎 - 星月神话.mp3" controls loop autoplay></audio>
muted:静音播放，和音频播放一样，视频播放如果用自动播放大部分浏览器也是禁止自动播放的，但是静音的视频会开启自动播放
<video src="./img/1.mp4" height="200px" controls muted ></video>

列表

ul里面只能包裹li标签，但是li标签里可以包裹其他标签
<ul>
<li>无序列表条目1</li>
<li>列表条目2</li>
<li>列表条目3</li>
</ul>

ol里面只能包裹li标签，但是li标签里可以包裹其他标签
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>

dl里面只能包裹dt和dd标签，但是dt和dd标签里可以包裹其他标签
<dl>
<dt>定义列表标题</dt>
<dd>定义列表描述</dd>
<dd>定义列表描述</dd>
</dl>

表格

<!-- 设置表格的边框为1px  -->
    <table border="1">
<tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
</tr>
<tr>
    <td>哈哈</td>
    <td>99</td>
    <td>66</td>
</tr>
    </table>
    <br />
    <table border="1">
<tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
</tr>
<tr>
rowspan：向下合并，数值填1表示合并一个，但是本单元格也算一个那么实际不会有效果，填2才会往下合并一个，以此类推
  
这里的合并说是占用多少个单元格更合适，比如用 rowspan="2"下一行就必须要少一个单元格，不然就会向后多一个单元格 
    <td rowspan="2">内容1</td>
    <td>内容2</td>
    <td>内容3</td>
</tr>
 <tr>
    <!--<td>内容1</td>-->
colspan：向右合并，数值填1表示合并一个，但是本单元格也算一个那么实际不会有效果，填2才会往下合并一个，以此类推 
    <td colspan="2">内容2</td>
    <!--<td>内容3</td>-->
</tr>
    </table>

表单

文本框： <input type="text" placeholder="请输入" /><br />
上传文件：<input type="file"/><br />
多文件上传文件：<input type="file" multiple/><br />
密码：<input type="password" placeholder="请输入密码"/><br />
单选：<input type="radio" name="1" /><br />
单选：<input type="radio" name="1" checked/><br />
多选：<input type="checkbox"/><br />
多选：<input type="checkbox"/><br />
下拉菜单：<select >
<option >下拉1</option>
<option >下拉2</option>
<option selected>下拉3</option>
</select> <br />
<form >

文本域

文本域：<textarea>请输入</textarea> <br />
<label for="x">单选：</label><input type="radio" name="1" id="x"/><br />
<label >单选：<input type="radio" name="1" checked/></label><br />
<button type="submit">提交</button>
<button type="erset">重置</button>
<button type="button">普通按钮</button>
from:是用来给重置按钮重置用from标签包裹的输入框内的内容的
</form>
<div>
无语义标签，独占一行
</div>
<span>无语义标签，不换行</span>

字符实体

空格： 一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二三 <br />
大小与符合：&lt; p &gt;
<!--3.html-->
<!--行内样式-->
<div style="color:#ffeb3b;">
继续体验
</div>

选择器

<!--多个类选择用空格隔开-->
<div class="daxiao yangse">
使用类选择器
</div>
<div id="ynagse">
使用ID选择器
</div>
<div id="ynagse">
使用ID选择器
</div>

字体图标

<!--8.html-->
<i  class="iconfont icon-xihuan"></i>

bootstrap框

<!--14.html-->
<!--使用bootstrap框 添加响应式版心布局 -->
<div class="container">
<!-- 栅格系统 添加flex布局等内容 -->
<div class="row">
<!-- 每个弹性盒子一定视口宽度下占几份 -->
<!-- 在bootstrap框架下flex布局分为12份，col-视口范围-每个盒子占12份的多少份 -->
<!-- 视口像素分为六个，分别是:
  xs<576px(没效果)、sm>=576px、md>=768px、lg>=992px、xl>=1200px、xxl>=1400px
如果不填视口像素这个属性会变成大于0px就执行，当然这个是最先执行的 -->
<div class="col-xl-3 col-6">1</div>
<div class="col-xl-3 col-6">1</div>
<div class="col-xl-3 col-6">1</div>
<div class="col-xl-3 col-6">1</div>
</div>
</div>
<!-- 引入框架的js 如果页面用到了动态效果就还需要引入js -->
<script src="../css/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>

css

选择器 基础样式

/*3.html*/
/*属性名和属性值是成对出现的，叫做键值对*/
/*标签选择器，直接用标签做选择器*/
p {
/*文字颜色 可以用英文单词，rgb(r,g,b) rgba(r,g,b,a)a代表透明度0-1十个级别 #rrggbb*/
color: red;
/*字号*/
font-size: 30px;
/*文字加粗 写法700或者bold加粗，400或者normal去掉加粗，注意这里写数值后面不要加px*/
font-weight: 700;
/*文字倾斜 写法italic加倾斜，normal去掉倾斜*/
font-style: italic;
/*行高 写法数字加px直接两行字相隔的像素大小，只写数字文字的像素乘数字，也就是字体大小的数字倍数为行高*/
/*每行字会显示在每一行的中间，如果行高小于字体大小那么两行字会有重叠*/
/*如果要测试行高，从一行文字的最顶到下一行文字的最顶就行 */
line-height: 15px;
/*文字字体 可以同时写多个字体，每个字体用逗号隔开，系统会从左往右依次查找，有就使用没有继续往后查找，如果所写字体都没有就按默认字体显示*/
font-family: 楷体;
/*字体首行缩进 数值加em表示按当前字体大小的倍速缩进，也就是缩进多少个字，数值加px表示按像素进行缩进，因为像素缩进是不会随着字体大小而变化的，如果只是用来缩进多少个字一百用em*/
/*文本修饰线 none无 underline下划线 line-through删除线 overline上划线*/
text-decoration: none;
}

字体对齐方式

text-indent: 2em;
/*文字对齐方式 left 左对齐 center居中 right右对齐 本样式可以对图片也有用，但是对盒子没用*/
text-align: center;

选择器

/*类选择器*/
.daxiao {
/*盒子高*/
height: 100px;
/*盒子宽 标签如果没有内容，值只设定宽高的一种样式，将不会体现*/
width: 100px;
/*背景颜色*/
background-color: red;
}
            
/*ID选择器,一个页面中同一个id选择器只能使用一次*/
#ynagse {
color: #CDDC39;
}

/*通配符选择器，默认所有标签都使用本样式*/
* {
color: red;
}

/*4.html*/
/*后代选择器 两个选择器用空格隔开，前面选择器内所有是后面选择器的内容改变样式*/
div span {
color: #999;
}

/*子代选择器 两个选择器用大于>符号隔开，前面选择器内第一层选择器是后面选择器的内容改变样式*/
/*如果第二层才是那么不会生效*/
.zidai1>.zidai2 {
color: red;
}

/*并集选择器 多个选择器之间用逗号（，）隔开，所有选择器的内容样式改变*/
bingji1,bingji2,bingji3 {
 color: #ffc107;
}

/*交集选择器 两个选择器不用任何符号隔开，直接写在一起，一个标签内同时有这两个选择器才会改变样式*/
/*写交集选择器时标签选择器必须写在签名*/
p.jiaoji{
color: #ffc107;
}

/*伪类选择器 两个选择器用冒号（:）隔开，前面的选择器可以是任何基础选择器，冒号后面放的事具体状态，比如hover就是鼠标悬停状态，下面代码表示使用weilei选择的内容鼠标悬停时会改变样式*/
/*伪类表示元素的状态，选中元素的摸个状态设置样式*/
/*超链接的四种伪类状态 link访问前 visited访问后 hover鼠标悬停 active点击时 如果要写这四种，需要按顺序写*/
.weilei:visited {
color: #2196f3;
}

/*继承性 子级默认集成父级的样式，如果子级有样式则不继承父级样式*/
 /*层叠性 相同属性后面覆盖前面的，不同的属性会都生效*/
/*优先级 选中的标签的范围越大，优先级越低，（!important优先级最高,放在具体的样式属性值后面，下面是演示）*/
/*复合选择优先级 看复合选择器的基础优先级高低，相同级别的基础选择器看同级别选择器的个数，数量多的优先级高*/
a:hover {
color: red !important;
font-size: 300px;
/*背景图平铺方式 默认平铺用no-repeat表示不平铺*/
background-repeat: no-repeat;
/*背景图位置 有两个值 先水平后垂直，可以用像素表示也可以用英文关键字，两个位置只写一个表示另一个为居中状态，如果用关键字可以不按顺序写，图片超出盒子的内容不显示*/
background-position: 50px 50px;
/*背景图片大小 可以用英文关键字或者百分比，也可以用像素*/
/*contain缩放到盒子大小 背景图宽高最大一方和盒子相等就停止缩放*/
/*cover缩放到盒子大小 背景图宽高最小一方和盒子相等就停止缩放*/
/*百分比100% 的缩放效果和cover一样*/
background-size: cover;
/*背景图不随着内容的滚动而变化*/
background-attachment: fixed;

/*块级元素 独占一行，宽度默认是父级的百分之百，可以添加宽高属性*/
/*行内元素 一行可以共存多个，尺寸由内容撑开，不能添加宽高属性*/
/*行内块元素 一行可以共存多个，尺寸由内容撑开，可以添加宽高属性*/
/*转换显示模式 block块级 inline-block行内块 inline行内*/
display: block;
}
         
/*5.thml*/
/*结构伪类选择器 first-child选择第一个 last-child选择最后一个 nth-child(x)选择第x个*/
.jiegou li:first-child {
background-color: red;
}
.jiegou li:last-child {
background-color: red;
}
.jiegou li:nth-child(5) {
background-color: red;
}

/*任意选择 括号里除了可以填具体的数字，还可以用公式，2n表示2的倍数也就是偶数值被选中，2n+1表示奇数被选中，n+5表示第五个及以后的标签被选中，-n+5表示第五个及以前的标签被选中*/
 .jiegou li:nth-child(-n+2) {
color: #ffeb3b;
}
/*伪元素选择器 用::两个冒号隔开，before在选中标签内容的前面加内容，after在选中标签内容的后面加内容*/
/*伪元素选择器必须包含content内容不然不生效，是行内元素，优先级和标签选择器一样*/
.weiyuansu::before {
content: "老鼠";
color: red;
}
.weiyuansu::after {
content: "大米";
}

内外边距

.bianju {
/*内边距*/
padding: 20px;
/*内边距可以指定方向*/
padding-top: 10px;
/*内边距（外边距的规则和内边距一样）可以多个方向一起写，从上顺时针写值，如果那一边的值没有就以对面的值为准，比如下面所示只写了上和右，但是下和左对应的上和右有值就按对面的值生效*/
padding: 15px 30px;
/*边框线 线宽度，线的类型 solid实线 dashed虚线 dotted点线，线的颜色*/
border: 1px solid #000;
/*边框线可以指定方向*/
border-left: 1px solid #000;
/*外边距 如果左右用aoto那么盒子会基于父级居中，如果需要居中盒子需要有宽度*/
/*两个盒子的外边距如果相邻（靠外边距撑开距离）取较大值的外边距生效*/
/*父子级盒子，子级加上外边距会产生塌陷，也就是子级的外边距除了把自己往内顶还会连同父级一起往内顶，解决办法不设置子级的外边距，父级设置内边距达到效果，父级加 overflow: hidden;隐藏溢出和border-top: 1px solid #000;边框线也可以实现不塌陷问题*/
margin: 10px auto ;

盒子尺寸

 /*盒子尺寸=内容尺寸+border尺寸+内边距尺寸 可以用以下内减模式，这样border和内边距的大小没有超过盒子内容大小时就不会影响盒子的大小了，如果超过以超过的为准显示*/
box-sizing: border-box;

元素隐藏

/*元素隐藏 hidden盒子内容溢出隐藏，scroll溢出滚动（不溢出也显示滚动条），auto溢出滚动*/
overflow: hidden;

圆角

/*盒子圆角效果  可以用像素或者百分比来取值，它们表示的事圆角的半径*/
/*写具体每个角的值从左上角顺时针写值，没有的取对角的值，一个值表示所有角的值*/
/*盒子是正方形50%的值是正圆，长方形的50%是椭圆，长方形用高的一半值（px）为胶囊形状*/
border-radius: 20px 30px;

阴影

/*盒子阴影 属性值分别是 x偏移量，y偏移量，模糊半径，扩散半径，颜色，内外阴影（默认外阴影,取值inset就会变成内阴影）*/
box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
}

清除默认样式

/*清除标签默认内外边距 */
* {
padding: 0;
margin: 0;
/*加启用内减模式 给盒⼦设置border或padding时，盒⼦会被撑⼤，如果不想盒⼦被撑⼤可用手动减去设置的边框和内边距，也可以用用本代码自动减，实现盒子不被撑大*/
box-sizing: border-box;
/*去掉li标签的项目符合*/
list-style: none;
}

浮动

/*6.html*/
.div1 {
/*浮动模式 顶对齐，局别行内块模式特点，浮动的盒子脱离标准流，可以看做浮动的盒子漂浮在标准盒子的上方*/
float: left;
/*清除浮动*/
clear: both;
/*使用溢出隐藏，超出父级盒子范围的内容隐藏，因为浏览器按功能检查时会检测父级盒子的宽高就会让盒子按浮动盒子的高来显示，达到清除浮动的效果*/
overflow: hidden;

flex

/*flex布局 在父级设置属性，子级不设置高宽值会自动挤压或拉伸到父级大小，不会脱标（脱离标准流），实现一行显示多个盒子*/
/*添加flex布局后，父级变成里弹性容器，子级变成里弹性盒子，弹性盒子分主轴（默认水平方向，从左到右）和侧轴（默认垂直方向，从上到下）*/
/*默认主轴方向的弹性盒子是挤压效果，容器大于盒子大小时靠内容撑开 小于挤压到一起，侧轴是拉伸效果*/
display: flex;
/*弹性盒子从终点开始依次排列排列*/
justify-content: flex-end;
/*flex默认排列方式，从起点开始依次排列排列*/
justify-content: flex-start;
/*居中排列*/
justify-content: center;
/*主轴方向的弹性盒子的空白间距均匀分布在弹性盒子中间（最外的边不分布空间）*/
justify-content: space-between;
/*主轴方向的弹性盒子的空白间距均匀分布在每个弹性盒子两侧（最外的边也平均分布空间，但是相对两个盒子的中间空间会小一半，因为包含里两个盒子一边的空间）*/
justify-content: space-around;
 /*主轴方向的弹性盒子的空白间距均匀分布在每个弹性盒子和容器之间（最外的边和两个弹性盒子中间的空间大小一样）*/
justify-content: space-evenly;
/*侧轴方向的弹性盒子对齐方式，属性值和主轴（justify-content）对齐排列方式一样，效果也一样只不过是按侧轴方向对齐的*/
align-content: ;
/*align-items只能用在容器上 弹性盒子按侧轴方向拉伸到容器的宽度（没有给弹性盒子单独尺寸才生效）*/
align-items: stretch;
/*侧轴居中排列*/
align-items: center;
/*侧轴起点开始排列（默认值）*/
align-items: flex-start;
/*侧轴终点排列*/
align-items: flex-end;
/*主轴和侧轴掉换*/
flex-direction: column;
/*主轴方向不挤压，弹性盒子大小大于容器时换行*/
flex-wrap: wrap;
               
/*align-self所用的属性和align-items一样是跳转侧轴的对齐方式，但是只能用在弹性盒子上，所以这个只针对具体的弹性盒子生效*/
align-self: center;
/*主轴弹性盒子剩余的空间分成按属性值的份数给当前盒子,如果给所有弹性盒子分配一样的份数那么所有盒子的主轴宽度平均分即使有盒子设置里尺寸（总分数按当前容器内的和来计算）*/
/*用在弹性盒子上*/
flex: 1;
}

双伪元素

/*双伪元素添加清除浮动 before标签的前面添加，after标签的后面添加*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}

定位

/*8.html*/
.yd {

/*定位模式 relative相对定位 通过top等方向关键词移动位置，移动的方向是相对于原来位置关键字的反方向（关键字给出值相当于参考位置和要移动的盒子加边距 所有定位模式一样的）*/
/*相对定位不脱标，盒子移动后的位置是脱标的但是原先的位置还是占位的，显示模式对于使用该盒子不变*/
position: relative;

/*根据位置关键词来移动位置*/
top: 100px;
/*绝对定位 脱离标准流，显示模式变成里行内块显示模式的特点，不占位置；移动位置找最近的有定位属性的祖先盒子来做参考位置，如果没有就相对浏览器的可视区域来定位*/
position: absolute;
/*找到位置后根据关键字反方向移动*/
bottom: 200px;
/*让盒子水平和垂直反方向移动本盒子大小的一半距离，用来配合绝对定位的居中效果*/
transform: translate(-50%,-50%);
/*固定定位 脱离标准流，显示模式变成里行内块显示模式的特点，不占位置；移动位置的参照物为浏览器的可是区域*/
position: fixed;
/*定位覆盖 默认后面盖在前面的盒子上，也可以用z-index来改变，取值越大越在上面*/
z-index: 1;
/*添加背景图片 按路径引用图片，也可以应用网络图*/
background-image: url('./img/cssjl.png');
/*根据背景图片比创建的盒子大不显示超出盒子的部分的图片这一特性加上移动图片的属性可以实现一个小盒子可以显示大图的任何位置*/
/*这个方法称为css精灵，可以减轻服务器请求压力也可以提供图片的显示速度*/
background-position: -180px -113px;
}

字体图标

/*字体图标 展示的事图片本质是字体（可以通过修改字体属性来修改图标），体积小渲染块，兼容大部分浏览器，一般纯色小图用图标*/
/*使用需要先应用对应的css样式，再在需要使用的盒子标签内使用类名就可以里比如在i标签内使用<i  class="iconfont icon-xihuan"></i>，使用后就和正常改变字体样式一样*/
/*注意因为iconfont标签有默认样式，一般改变图标的样式可以直接调用iconfont，如果用其他比如i标签来改变样式，会因为优先级问题而不生效*/
i {
display: block;
font-size: 50px;
color: pink;
}

图和字对齐

.dq img {
/*图和字的对齐方式 如果图片放在行内元素里，那么图片也默认是文字，文字除了本身的大小，最下方还以有一段小的间距（间距以上为基线），而默认图片和字的对齐是方式是按基线来的，导致图片和文字不会居中对齐，这是可以用以下属性来调整文字和图片的居中（排序方式）*/
/*调整居中需要属性加在大的一方，这是图片下方的空出来的一小段间距也回消失*/
/*如果只是让图片下方的空间消失可以给图片在转显示模式为块级*/
vertical-align: middle;

隐藏盒子

/*显示模式隐藏 用none会把这个标签不显示*/
display: none;
/*隐藏后改为不隐藏只需要改成block或者其的另两个显示模式都可以再次显示*/
display: block;

过度动画

/*过度动画 前一个属性动画方式，后一个属性过度需要的时间*/
transition: all 1s;

背景和图片透明

/*背景和图片透明*/
opacity: 0.7;

改变鼠标指针样式

/*改变鼠标指针样式，pointer变成小手图标，text变成工字型，move变成十字光标*/
cursor: move;
}

flex

/*9.html*/
.cs div {
/*flex布局如果用flex的属性给弹性盒子分配宽度，对应弹性盒子有默认宽度会优先生效默认宽度，而导致flex分配的宽度失效，这是只要加width宽度零就可以里*/
width: 50px;
}

平面转化

/*10.html*/
.py:hover {
/*平面转化 translate平移x（水平）y（垂直）轴移动,两个轴可以只写一个(一个值生效的是x轴)，也可以用数值可以是像素和百分比（参照盒子自身结算结果）*/
/*要产生转化效果需要有动作比如用hover，直接写在盒子上刷新就到里移动后的效果了*/
transform: translate(100px);
/*也可以直接指定x和y轴的移动*/
transform:translatex(500px);
 /*旋转角度 数值为deg（角度值）,默认旋转轴是盒子的中心点，旋转属性对于行内元素不生效 */
transform: rotate(180deg);
/*改变旋转轴 属性值为方向英文单词，像素，百分比（基于本盒子）*/
transform-origin: right bottom;
/*复合属性会以一种属性坐标轴为准，旋转会改变坐标轴*/
transform: translate(360px) rotate(180deg);
/*缩放 属性值直接填数字，大于1放大，小于1缩小，数值表示缩放的倍数，负数则是小缩小在放大*/
transform: scale(2);
/*倾斜 属性值角度 */
transform: skew(15deg);
/*渐变 线性渐变，属性值先填方向（默认垂直，可以写to加方向单词，角度值），样色加终点位置（位置默认本盒子内所有位置均分，也可以填百分比或像素值）*/
/*渐变颜色可以加多个*/
background-image: linear-gradient(to left,#fff 15%,#000);
/*渐变 径向渐变（中心到四周），属性值半径大小at圆心位置(默认中心，可以写at加方向单词，像素值) ，样色加终点位置（使用方法和线性渐变一样）*/
background-image:radial-gradient(30px 20px at center center,red,pink)
}

空间转换

/*11.html*/
.sd {
/*视距 默认视距为零所以z轴移动不会生效(所有3d效果的空间转换都需要添加本属性)，添加视距后也就是观察者和盒子有距离了这时就可以看到物体的近大远小了*/
/*近大远小的效果根据视距距离而定，但是z轴移动的正向距离不能等于或大于视距的距离不然不会直接不显示*/
/*视距只能加在z轴移动的父级，其他级别的包括自己加都不生效*/
perspective: 1000px;
/*3d盒子 加上本属性的盒子的子级就变成了盒子的四个面，但是默认的每个面都是正面并且都在盒子的中心位置，旋转的时候是基于盒子的中心点旋转的，需要给子级加基于空间的平移和旋转来确定每个子级对应本盒子的每个面*/
/*如果需要旋转盒子，旋转属性需要加在本盒子上，而不是子级上，加在子级上变成里盒子的某一个面的旋转了*/
/*如果加了本属性就不用再加视距属性了*/
transform-style: preserve-3d;
/*body的高默认为零，body的父级html的高度也默认是零，如果需要body的高占满屏幕除了在body设置高为100%还要设置html的高也设置100%*/
}
.sd1 {
/*空间转换 平移三轴平移和两轴平移差不多一样可以像素和百分比，只是多了一条z轴，分别是x（水平移动）、y（垂直移动）、z（前后移动，人面对屏幕的前后）*/
/*三轴平移如果用复合属性填写需要三轴的值都写不然不会生效,默认z轴平移不生效*/
transform: translate3d(100px,220px,-300px);
transform: translateZ(300px);
}
.sd:hover {
/*空间转换 旋转，只添加rotate默认是按z轴旋转同rotatez效果一样*/
transform: rotateY(180deg);

动画

 /*动画 使用动画，在需要使用的动画的盒子里加animation属性就可以了
动画名称：是添加动作时自定义的，如果定义里多个动作，那么这里写那个动作的名称调用的就是那个动作

动画时长：取值为秒，动画需要的时间s秒为单位

速度曲线：默认先快后慢，linear匀速，steps(3)分布动画括号里填整数几整改动画就分几次完成，每次都有停顿，一般配合精灵图实现动画效果

延迟时间：取值为秒，填多少秒动画就延迟多少秒再启动；注意如果加里延迟属性值那么第一个时间为动画时长，第二个时间为延迟时间

重复次数：取值为整数，如果需要一直重复那么使用infinite单词,如果加里动画返回效果那么返回也算一次重复次数

动画方向：默认动画从开始到结束播完要播第二遍直接从结束的状态调到开始的状态再开始播，如果需要从结束到开始也有延续性就加alternate单词

执行完毕时状态：默认动画播放完毕会回到没加动画时的状态的状态，加forwards单词动画结束会停留在结束时的状态，如果动画时一直重复的这个属性值就不生效
取值不分先后，但属性值必须要动画名称和时长*/
animation: dz 1s steps(3) 3s 3 alternate forwards;
animation: dz 1s 10;
            
/*同一个盒子还可以使用多组动画，每组之间用逗号隔开，最后一组不用逗号*/
animation: 
dz 1s steps(3) 3s 3 alternate forwards,
dz 1s steps(3) 3s 3 alternate forwards
;

/*动画暂停 本属性是animation复合属性的单个属性值写法，属性值paused为暂停，一般配合鼠标悬停元素使用*/
animation-play-state: paused;
}
            
/*动画 添加动画动作（变化）如果只是两个动作就用from和to，如果用多个动作就用百分比*/
/*如果使用百分比，百分比是动画时长的百分比*/
@keyframes dz {
from {
/*开始动作的状态和盒子本身的状态一样时可以省略开始的这个动作，只写结束的动作*/
width: 10px;
}
to {
width: 200px;
}
}

媒体查询

/*12.html*/
/*媒体查询 查询视口html分辨率是不是指定的条件，符合条件执行media内写的css样式*/
/*rem布局方案中，html字号一般为视口宽度的十分之一*/
@media (width=390px) {
html {
font-size: 30px;
}
}

rem

.yd {
/*rem是相对单位，相对于html的字号计算结果，1rem等于1html字号大小*/
/*如果根据设计稿的px计算rem，用html字号除px就等于里rem尺寸*/
width: 10rem;
height: 6rem;
background-color: pink;
}
/*如果用rem布局移动端，每次计算rem值就需要用到less插件里，次插件需要在写代码的工具里添加，添加后直接在.less文件些css，这是时就可以些一些运算了，但是浏览器不能直接识别less文件，而是每次保存代码工具会自动生成生成一个css文件，这是浏览器就能正常识别了*/
/*如下所示，但此代码因为是直接写html文件内所以不会生效，甚至报错*/
.cs-less {
/*表达式一般后面的写单位，这样计算结果就带单位，如果前后都写单位计算结果则是用的前一个的单位*/
width: 36*13rem;
/*除法需要加括号*/
height: (360/200px);
/*或者用./ 写法，一般推荐用括号的方式*/
/*height: 360./200px;*/

less

/*// 在less内写嵌套的方式些的单个选择器，会自动在css内生成后代选择器*/
/*注意：less内单行注释不会生成到css文件内*/
.cs1 {
background-color: pink;
.cs2 {
background-size: 180px;
/*&符号表示连接，比如在a选择器内写&接着写一个b选择器表示这个b不是a的后代选择器而是ab选择器了*/
/*一般配合hover这样的伪类选择器或者结构伪类选择器使用*/
&:hover{
height: 10px;
        }
    }
}

/*定义变量，用@加自定会的名称加属性*/
@DingYi:pink;
.cs {
/*使用自定义变量,这时就可以，相当于属性值是pink*/
background-color: @DingYi;
}
/*// 导入样式，如果导入的事less可以不写后缀*/
 @import "./0.css";
/*导出less为css用一下代码，但是必须要写在less文件的第一行，生成其它文件名就写文件名的css，生成和less文件名一样的就用直接/斜杠到具体文件夹*/
//out:css1.css
/*需要到其它路径，和css写路径的方法一样,所写的路径和文件名没有就新建有就进入对应的路径并覆盖对应文件*/
//out:./cs/
/*不需要导出到css就用一下代码,本代码只能写在less文件的第一行*/
//out:false
}

vw vh

/*13.html*/
div {
/*1vw视口宽度的百分之一，1wh视口高度的百分之一*/
/*像素转vw/vh单位计算方式，像素大小除百分之一视口大小*/
/*vw和wh使用效果一样（一般用vw），但不能两个混用，现在的手机长宽比不一样，混用会导致盒子变形*/
height: 10vw;
width: 10vw;
background-color: pink;
background-size: ;
/*本属性用于缩放img图片的大小，属性值和背景图片的background-size的属性值一样有cover（最小的一面缩放到盒子大小，这里超出盒子大小以中心点等比例放大，多出的不显示，而背景图是以顶点放大）和contain（最大的一面缩放到盒子大小）、百分比和像素*/
object-fit: cover;
}
            
            
            
/*14.html*/
/*min-width:1200px等同于width>=1200px*/
@media(width>=1200px) {
.cs {
    height: 600px;
    width: 1200px;
    background-color: yellow;
}
}
/*max-width:1200px等同于width<=1200px,如果max和min的条件相同时，执行最下方的条件（按先后顺序，后执行的覆盖相同先执行的代码原理）*/
@media(width<=1200px) {
.cs {
    height: 500px;
    width: 100px;
    background-color: pink;
}
}
/*如果用同一个属性不同的值min那么就要按大到小的顺序写，max要按小到到写，不然执行会出问题（按先后顺序，后执行的覆盖相同先执行的代码原理）*/
@media(width<=600px) {
.cs {
    height: 500px;
    width: 100px;
    background-color: red;
}
}