语义化的外标签：一般都带有默认边框；
合适的标签做合适的事情
bace:所有的a标签都跳转到外部base：target“_blank”
表格
table
·tr 行 ·td 单元格 ·th 表头 ·caption 表格标题
border 表格边框
cellspacing 单元格与单元格之间的间距
cellpadding 单元格与文本之间的间距
width height align=“center”
rowspan 跨行合并
colspan 跨列合并
表单
text 输入框
password 密码框
radio 单选框
checkbox 复选框
button 按钮
value 默认值
checked=“checked”单选复选默认选中
submit 提交
file 文件
image 图片
reset 重置
绑定元素
<label for="id名称">提示文本</label>
<input id="id名称">
文本域 textarea 下拉框按钮 select option selected=“selected”
表单域
form action="url地址" method="提交方式/get/post" name="表单名称"> ++++++ 各种控件 ++++++
</form>
字体样式
font-weight:400;(不加粗)/700;(加粗)
font-size: (字体大小)
color: (字体颜色)
font-family:"Microsoft Yahei",\5FAE\8F6F\96C5\9ED1 "宋体"，\5B8B\4F53
font-style: normal(不倾斜) /italic(字体倾斜)
font:font-style font-weight font-size/line-height font-family中间用空格分开
font-size/font-family不能省略
text-align:center; 文本水平居中，对齐
text-indent:2em; 首行缩进两个汉字的宽度
text-decoration:none; 取消下划线 underline 下划线
line-height 行高
调试窗口
F12打开调试窗口 ctrl+0恢复浏览器字体
三种元素
块元素（block）
h1，p，div，br，hr，ul，ol，li，
p标签里面不能包含div标签
p h dt 尽量不要放块元素
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
行内元素（inline）
a，span，strong，b，em，i，del，s，ins，u
行内元素只能容纳文本，或者其他行内元素
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
img，input，td
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。
元素之间的转换
行内元素转块元素：display:block;
块元素转行内元素：display:inline;
转换为行内块元素：display:inline-block
选择器
~*后代选择器 空格
子代选择器 >
交集选择器 p.red 不能有空格
~*并集选择器 逗号
伪类选择器 link visited hover active任何标签都有hover
背景
backgroung-color:red;/Transparent
background-image: url(images/111.png)
backgroung-repeat:repeat/no-repeat/repeat-x/repeat-y/（平铺）
background-position:left right/40px 100px;(背景位置，可以混用)
background-attachment:scroll/fixed (滚动/固定)背景附着，默认滚动
background:rgba(0,0,0,0.3) 背景透明
opacity:03; 让整个盒子 字体背景颜色都透明
背景简写
backgroung:背景颜色，背景图片，背景平铺，背景滚动，背景位置
盒子border
border-style:solid(实线)/dashed(虚线)/dotted(点线)
border:1px solid red;(简写)粗细/样式/颜色
如果块元素盒子没有宽度（width），则padding不会撑开盒子
块级盒子水平居中对齐
1.必须有宽度，
2.给左右外边距（margin）设置为auto，
margin-left:auto; margin-right:auto;/ margin:0 auto;
背景图片只能通过background-position移动位置
插入图片只能通过盒子模型padding/margin移动位置
行内元素不能设置上下的padding/margin，无效
嵌套元素塌陷：
1.父元素设置上边框 border-top
2.父元素设置上padding-top
3.父元素添加 overflow:hidden;
4.绝对定位和固定定位
5.浮动
鼠标点击事件
-
a:link /* 未访问的链接 */
-
a:visited /* 已访问的链接 */
-
a:hover /* 鼠标移动到链接上 */
-
a:active /* 选定的链接 */
CSS布局
普通流/浮动/定位
普通流
从左到右（行内元素），从上到下（块元素）
浮动
浮动不会盖住文字，会盖住背景色
浮动贴着最低的盒子进行排列
浮动之后，会生成一个块级框，把任何元素改成行内块，但是没有空隙。
多个浮动的盒子，不会超过父元素
浮动只会影响当前的或者后面的标准流盒子不会影响前面的标准流。
清除浮动
1.父亲没有高度 2.子盒子浮动了 3.影响下面布 局
①
（额外标签法）clear：both; 清楚两侧浮动
在浮动的最后一个元素后面放一个空标签。定义一个类，类里面写clear:both;
②
给父级元素的类里面添加overflow:hidden;
③
在css里面首先进行声明：
.cleanfix:after {
content: "";
display: block;
height: 0;
visitbility: hidden;
clear: both;
}
.cleanfix {
*zoom: 1; （ie6 7 为了清除浮动的专门代码）
}
最后在父级元素中进行调用。
④
在css里面首先进行声明：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
最后在父级元素中进行调用。
定位
定位模式（static/相对定位relative/绝对定位absolute/fixed）+边偏移(left/right/top/bottom)
1.相对定位relative
①相对于原来自己标准留的位置移动盒子
②原来在标准流的位置继续占有，后面的盒子以标准流的方式对待他
2.绝对定位absolute
①以最近的父亲盒子定位543为准，父亲没有找爷爷，进行移动，如果全没有，以浏览器为准、没有任何样式、
②绝对定位不占位置，完全脱标、
水平居中：
left: 50%; 走父亲宽度的一半
margin-left: -自身宽度的一半; 往左走自己宽度的一半 --
3.固定定位fixed
特殊的绝对定位
只认浏览器的可视窗口
左边固定定位
left: 50%; 浏览器的宽度一半
margin-left: -（版心的一半+自身的宽度+偏移的宽度）
css属性书写顺序:
-
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
-
自身属性：width / height / margin / padding / border / background
-
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
css高级技巧
1.鼠标点击样式 cursor
default 默认小白/pointer 小手/move 移动/text 文本/crosshair 十字架/not-allowed 禁止
2.轮廓线outline
outline: none;
3.防止用户拖拽文本域
resize: none;
4.盒子的隐藏与显示、
1.display: none/block 隐藏之后，不保留位置
2.visibility: hidden/visible 隐藏之后，继续保留位置
3.overflow: hidden; 超出隐藏
5.去除图片底上空隙（对图片进行操作）
1.vertical-align: top/middle/bottom 默认基线对齐baseline
2.display: block
3.font-size: 0;
4.浮动，清除浮动
6.溢出文字省略号显示
1.white-space: nowrap;
2.overflow: hidden;
3.text-overflow: ellipsis;
transition：过渡动画
transition：要过渡的属性、花费时间、运动曲线、何时开始
多组属性用逗号隔开//也可是使用all所有的属性都一样变化
这句话写在属性本身上，不能放在hover里面，
transform
scale 放大
进度条
progress
<progress value="0.6"></progress>
字体图标
当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
推荐网站： http://icomoon.io
-
icomoon字库
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
-
阿里icon font字库
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！
<link rel="shortcut icon" href="<favicon.ico>" type="image/x-icon" />网页上面图表
来源：https://blog.csdn.net/qq_36893984/article/details/98757766