<body>
<!--TODO块元素 -->
<!-- 用于一大部分内容 -->
<!-- 用于一块内容 -->
<!-- 用于一个段落 -->
<!-- 写标题 -->
<!-- 无序标签、有序标签 -->
<!-- 主要内容或主体部分 -->
<!-- 写页脚 -->
<!-- TODO行内元素 -->
<!-- 加粗 -->
<!-- 倾斜 -->
<!-- 链接 -->
<!-- 字体 -->
<!-- 删除 -->
<!-- TODO自闭元素 -->
<!-- 图片 -->
<!-- 换行 -->
<!-- 划线 -->
<!-- TODO符号 -->
<!-- 大于 -->
<!-- 小于 -->
<!-- 空格 -->
<!-- TODO表单 -->
<!-- 定义表单,index.html提交地址,post提交方式 -->
<!-- 定义文本输入框 -->
<!-- 定义密码输入框 -->
<!-- 定义单选框 -->
<!-- 定义提交按钮(两种方式) -->
<!-- 定义复选框 -->
<!-- 定义上传文件 -->
<!-- 定义下拉框 -->
<!-- TODO表格-->
<style>
.ziti {}
</style>
<div class="ziti">字体样式</div>
<!-- 字体 细、粗、正常字体、倾斜、不倾斜、尺寸 -->
<style>
.touying {}
</style>
<div class="touying" style="width: 150px;height: 50px;">盒子投影</div>
<!-- 文字投影 过后盒子左边上边阴影 -->
<style>
.align {}
</style>
<div class="align" style="width: 500px;">体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策</div>
<!-- 首行缩进、垂直对齐、行高、文字间距、文字局左中右、两端对齐、最后一行两端对齐 -->
<style>
.position {}
</style>
<div class="position">sss</div>
<!-- 相对定位、绝对定位、固定定位、默认 -->
<style>
.overflow {}
</style>
<div class="overflow" style="width:300px;height: 100px; ">体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策体迅飞凫自己了解自我才为上策</div>
<!-- 影藏盒子超出内容、生成xy轴滚动条(注:英文无法自动换行) -->
<style>
.display {}
</style>
<div class="display">隐藏元素</div>
<!-- 转化块元素、转化行内元素、转化行内块、隐藏元素 -->
<style>
.af::before {}
.af::after {}
</style>
<div class="af">伪类</div>
<!-- 使用伪类器在盒子前面和后面添加清楚浮动 -->
<style>
.clear {}
</style>
<div style="clear: both;"></div>
<div class="clear">qqq</div>
<!-- 解决高度的几种方法 -->
<style>
.mayi {}
</style>
<div class="mayi">蚂蚁线</div>
<!-- 上线、中线、下线、不线 -->
<style>
.bacgroud {}
</style>
<div class="bacgroud" style="width: 100px;height: 100px;">qqqq</div>
<!-- 背景图、平铺方式(默认，不平铺，横向平铺、纵向平铺) 图片尺寸 扣取精灵图 背景半透明 渐变色-->
<style>
.boder {}
</style>
<div class="boder"></div>
<!-- 设置线型号 设置颜色 设置下边框宽 画圆(想一下长方形画圆px和%区别) 左上角画圆 -->
<style>
.max {}
</style>
<div class="max"></div>
<!-- 屏幕适配 最大宽最小宽 -->
<style>
.sizing {}
</style>
<div class="sizing">装箱尺寸</div>
<!-- 标准盒子模型、IE盒子模型 -->
<style>
</style>
<a class="shub">鼠标形状</a>
<!-- 未访问状态、悬停、点击过、点击时 -->
<style>
</style>
<div class="openg">选择器</div>
<!-- 选择偶数、选择奇数、选择第一个、选择最后一个(思考什么时候失效) -->
<style>
.text {}
</style>
<div class="text" style="background-color: aqua;width: 300px;height: 20px;line-height: 20px;">图片裁剪</div>
<!--图片裁剪 同元素选择器只能控制子集 -->
<style>
.text{}
</style>
<div class="text" style="width: 100px;border: 1px solid;">文本超出溢出文本超出溢出文本超出溢出文本超出溢出</div>
<!-- 超出文本省略 -->
<style>
.flex {}
</style>
<div class="flex" style="width: 200px;height: 200px;border: 1px solid;">Flex布局</div>
<!-- 设置为弹性盒子 靠右分布 居中 两端分布 靠下 垂直居中 靠上 不被压缩 自增长 换行-->
<style>
</style>
<!-- 媒体查询 -->
<style>
.transform {}
</style>
<div class="transform">变换</div>
<!-- 设置元素基点位置 设置三维结构 原位置位移 旋转 放大 -->
<style>
.transition {}
</style>
<div class="transition">过度</div>
<!-- 过度3秒 匀速 缓冲 步数 延时2秒 停留最后位置 -->
<style>
.animation {}
</style>
<div class="animation"></div>
<!-- 动画帧的语法 -->
</body>
版权声明：本文为m0_57048774原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。