这一篇是接着上一篇末尾的css知识点来的
开始
css规则:
单位值:px 像素单位
1)字体规则:
font-size 字体大小
faont-weight 字体粗细 normal/bold(加粗)/bolder(比当前继承的值大一些)/100-900
font-family 字体族
font-style 风格
line-height 行高 使用绝对单位，可以进行垂直居中
速写： font:[font-weight][font-style] font-size/line-height font-family
2)网络字体（字体图标库）
iconfont【阿里巴巴的字体图标库】
1. 选取自己想要图标
2. 生成项目
3. 按照说明进行使用(在图标库中有使用说明，3种使用方式)
3)文本
text-align 文本对齐方式 left/center/right
text-indent 文本缩进
text-decoration 文本样式
line-through 删除线
overline 上划线
underline 下划线
none
text-transform 字体大小写转换 uppercase/lowercase
…
4)列表
list-style:none 删除列表样式
5)css盒子模型
所有的html元素都能当作一个盒子，它是CSS技术所使用的一种思维模型。
包含属性：margin(外边距)、padding(内边距)、border(边框)、content(内容)
vertical-align 用于在一个盒子中，有多个行内元素，但是多个行内元素高度不一致，通过这个属性可以调整多个元素的垂直位置，一般用于一行既有文本，也有图片/边框,用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
6)背景
background-color
background-clip 背景覆盖区域
background-origin 背景图铺设起点
background-image
background-repeat 背景图重复方式
background-size
background-position
速写 background
*4.css布局：浮动布局、定位布局
布局是为了解决多个块元素在一行中显示的问题
默认文档流:块元素默认从上往下排列
1)浮动布局
float:left 向左浮动
clear:left 当前元素左侧不允许有浮动元素，换行
display:block 将一个元素设置为块元素
特点：
1.宽高默认由内容决定(一般要给浮动元素指定宽度)
2.脱离文档流，在默认文档流中不会占据空间
3.在同一层次中，所有的浮动元素会在一行显示；当一行中无法容纳这些元素时，就会自动换行
4.浮动元素会失去对父元素的支撑 当one two three都进行了浮动，那么他们就无法支撑父元素container的高度，高度为0
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
浮动元素的父元素没有高度的问题：
方法1.所有子元素浮动，通过添加伪元素对父元素进行支持
方法2.保留一个子元素不浮动，用于支撑父元素，为了让他显示出来，可以添加外边距margin
2)定位布局
添加定位规则后才能使用如下规则：left/right/top/bottom
position:relative 相对定位，要配合绝对定位进行移动
特点：
1.相对于当前元素所在位置
2.当前元素不会脱离文档流
position:absolute 绝对定位
特点：
1.相对于距离它最近的父定位元素，如果它的父元素没有定位元素，那就相对于浏览器视口
2.脱离文档流(不占据默认文档流空间，块元素宽度不再为100%)
position:fixed 固定定位
特点：
1. 相对于浏览器视口
2. 脱离文档流（不占据默认文档流的空间；块元素的宽度不再为100%）
3. 不会随着屏幕的移动而移动，固定于浏览器视口某个位置
position:static 默认，没有定位
position:sticky 粘滞定位
5.伸缩盒布局
语法：
【声明在父元素上的规则】
display:flex; 该规则应用到父元素上，表示当前元素为伸缩盒。默认情况下，主轴在x轴上，交叉轴在y轴上
flex-direction: row/column
默认情况下，为row (主轴在x轴上)
flex-wrap:no-wrap/wrap
默认情况下，为no-wrap，表示当容器中的子元素宽度和超过了容器宽，不换行
justify-content
对主轴上剩余空间的排列设置（不要使用flex-grow对剩余空间进行分配了！）
flex-start
flex-end
center
space-around
space-between
align-items 交叉轴上的显示
flex-start 交叉轴的开始排列
flex-end 交叉轴结束排列
center 交叉轴的中间排列
【声明在子元素上的规则】
flex-basis: 指定子元素的宽度基准【固定，相对，相当于width】
flex-grow: 1; 对容器剩余空间的分配，1表示当前元素占据剩余空间的一份
flex-shrink:1; 对于亏损空间的垫付，1表示栈亏损空间的一份
flex: flex-grow flex-shrink flex-basis; 速写
6.媒体查询（响应式布局，栅格系统）
一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
结构：
@media(媒体查询条件) {
选择器 {
规则
}
}
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
媒体查询应用位置：
1)直接应用在规则内部
<style>
html{
font-size:20px
}
@media screen and (max-width:1500px){
//操作
}
</style>
2)应用在link标签中
<link rel="stylesheet" href="./css/screen_small.css" media="(max-width: 1380px)">
<link rel="stylesheet" href="./css/screen_middle.css" media="(min-width: 1380px) and (max-width: 1500px)">
<link rel="stylesheet" href="./css/screen_large.css" media="(min-width: 1500px) and (max-width: 1780px)">
3)应用在style标签中
<style media="screen and (max-width: 1380px)">
.wrapper {
width: 1105px;
}
html {
font-size: 20px;
}
</style>
7.选择器的优先级
Importance：特权
!important
Specificity ：权重（积分机制） 例如：
1000 style属性中
100 id选择器
10 类选择器，伪类过滤器，属性过滤器
1 元素选择器，伪元素选择器
Source order ：顺序
8.表格和表单:
表格和表单一般应用在后台管理系统中，其他标签应用在前台页面显示中
1)表格:
与列表类似，用于展现一些数据，一般不用于布局
结构：
table 表格容器
caption 表格标题
thead 表格的表头
tr > th > *
tbody 表格的主体
tr > td > *
tfoot 表格底部
tr > td > *
样式添加：
align:center;
colspan 跨列/合并列
rowspan 跨行/合并行
2)表单:
获取用户输入的数据，是用户与我们程序之间一个数据桥梁。在开发中，一般不直接使用这些表单，因为表单元素在不同浏览器中显示效果是不同的。
提交方式：
同步：form表单的直接提交就是同步操作
异步：form表单通过ajax提交
form属性：
action: url(相对路径、绝对路径)
method: get/post
enctype 【只有在method=post考虑，如果是get方式，参数将会被直接编码为查询字符串，无法更改】
application/x-www-form-urlencoded
默认值 保存或更新品牌数据【字符，photo,name,introduce】
查询字符串：username=terry&password=123321&department=1
规则：
属性名与属性值之间通过=分割
键值对之间通过&分割
属性值中如果有特殊字符，会将这个特殊字符转换为百分比格式【这也是为什么二进制不能使用这种编码】
multipart/form-data 附件上传【二进制图片】 如果表单中出现了二进制文件，<input type='file" name=“file”/>,就无法使用查询字符串，只能用这种协议
application/json 【以JSON格式数据传输，目前在同步请求中不支持，但是在ajax中是支持的】
表单元素：
<form>
<input type="text"/> 单行文本框
<input type="password"/> 单行密码框
<input type="file"/> 文件选择按钮，encotype必须为multipart/form-data
<input type="radio"/> 单选按钮
单选按钮一般会同时出现多个，多个按钮的name值必须相等才能达到互斥的要求
value必须有，这样当勾选某个单选按钮的时候会提交该按钮上的value值
<input type="checkbox"/> 复选按钮
<input type="reset"/> 将表单内容恢复默认
<input type="submit"/> 提交表单
<input type="button/> 普通按钮
...【h5新增】
<input type="search" placeholde="请输入关键字"/> 搜索框
<input type="date" /> 日期框
<select name="department">
<option value="1">JavaEE</option>
<option value="2">WebUI</option> 当用户选择WebUI的时候，department的值为2
<option value="3">BigData</option>
</select>
<textarea name="introduce rows="" cols="">提示...</textarea>
</form>
9.动画、过渡、变形
动画： animation
1)关键帧定义
随着时间移动定义的css规则
@keyframes move{
0% {
width:100px
}
50% {
width:300px
}
100%{
width:150px;
}
}
2)动画定义
.ani{
animation-name: move; 指定关键帧名称
animation-duration: 2000ms; 设置动画持续时间（from-to）
animation-timing-function: linear; 时间曲线
animation-fill-mode:backwards; 动画完成后保持的规则（from/to）
animation-delay: 1000ms; 持续时间
animation-iteration-count: infinite; 重复次数
animation-direction:alternate-reverse; 动画运行的方向
animation: 以上的速写形式
}
3) 应用
<div class="ani"></div>
开源组件库
自定义组件库
4) animation.css（css3 animation动画轮子）
1. 导入animation.css
2. 调用class
过渡：transition
一般表示在元素状态切换的时候的过渡效果
transition-property
规则名
规则名1,规则名2[,...]
all
指明在状态切换的时候，哪些属性添加过渡效果
transition-duration 持续时间 ms/s
transition-timing-function
linear
steps
transition-delay 延迟 ms/s
transition速写：
transition-property transition-duration [transition-delay][transition-timing-function]
变形：transform
1)旋转
rotate(deg) 旋转度数
rotateX(deg)
rotateY(deg)
rotateZ(deg)
2) 平移
translate(长度)
translateX(长度)
translateY(长度)
translateZ(长度)
3) 放大
scale()
scaleX()
scaleY()
4) 拉伸
skew(deg)
skewX(deg)
skewY(deg)
transform-origin 指定变形的原点
10. at规则 （ @ ）
a. @font-face 网络字体
b. @keyframes 动画
c. @media 媒体查询
d. @import
e. @import url
f. @import url list-of-media-queries;
g. @charset 指定当前css文件的编码格式（说明当前文件是使用xx编码）
哎呀妈！搞定，这个整理起来着实有点累。
有不对的地方欢迎各位好汉评论指教，感谢
2041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
