tama_test个人页面-阿里云开发者社区

给container加上

dislay:flex;
align-items: center;
justify-content: space-between;

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

id选择器

（1）display:none：元素被隐藏之后，不占用原来的位置
（2）visibility:hidden：元素隐藏之后，占原来的位置

color

（1）display:none：元素被隐藏之后，不占用原来的位置
（2）visibility:hidden：元素隐藏之后，占原来的位置

:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个

元素的第一个字母
:first-line p:first-line 选择每个

元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的

元素
:before p:before 在每个

元素之前插入内容
:after p:after 在每个

元素之后插入内容
:lang(language) p:lang(it) 为

元素的lang属性选择一个开始值

Media所有参数汇总
以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：

width:浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

orientation:检测设备目前处于横向还是纵向状态。

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例。

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

color-index:检查设备颜色索引表中的颜色，他的值不能是负数。

monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）

resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

grid：检测输出的设备是网格的还是位图设备。

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

u标签：
text-decoration:none(取消字体下划线样式css)
a标签：
a{text-decoration:none}
a:hover{text-decoration:underline}

在CSS中，可以设置行间距，格式如下：
标签名{line-height:参数}

根据参数不同有3种方法：
1.用数字参数设置：
行间距＝字号×参数
2.用单位参数设置：
行间距＝参数
3.用比例参数设置：
行间距＝字号×参数

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset。

部分css reset内容如下：

html {color:#000;background:#FFF;}t5

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select {*font-size:100%;}
legend {color:#000;}

1.字体大小设置
    字体大小设置，常见的有四种不同的方法：
    body中的大小设置14px，表示字体的高度是14个像素；
    h1中的大小设置百分比，是表示相对大小，相对于body的150%倍；
    h2中的大小设置em，是表示相对大小，想对于body的1.2倍大小；
    h3中的大小直接是关键字。常用的有small,medium,large;
2.字体设置
    字体设置需要用到font-family设置：
3.字体粗细
    字体粗细设置需要用到属性font-weight设置：
  bold表示粗体，还有normal、bolder,lighter。也可以用数值表示。
4.字体样式
   字体样式用font-style属性设置：
  均是使字体产生倾斜效果。

参考文档啊：http://www.w3school.com.cn/cssref/pr_transform.asp

.rotate:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.rotateX:hover .fill {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}

.rotateY:hover .fill {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}

.rotateZ:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.scale:hover .fill {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}

.scaleX:hover .fill {
-webkit-transform: scaleX(2);
transform: scaleX(2);
}

.scaleY:hover .fill {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}

.skew:hover .fill {
-webkit-transform: skew(45deg, 45deg);
transform: skew(45deg, 45deg);
}

.skewX:hover .fill {
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}

.skewY:hover .fill {
-webkit-transform: skewY(45deg);
transform: skewY(45deg);
}

.translate:hover .fill {
-webkit-transform: translate(45px, 1em);
transform: translate(45px, 1em);
}

.translateX:hover .fill {
-webkit-transform: translateX(45px);
transform: translateX(45px);
}

.translateY:hover .fill {
-webkit-transform: translateY(45px);
transform: translateY(45px);
}

.matrix:hover .fill {
-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
transform: matrix(2, 2, 0, 2, 45, 0);
}

line-height

1、直接在div中使用css样式制作div+css网页
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推荐此方法

使用文字竖排writing-mode属性
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左

找个简单的框架例如VUE，先看教程例如：http://www.runoob.com/w3cnote/vue2-start-coding.html
然后在找些小项目连续，多实践

利用弹性盒子（flex） 将父级元素设置为弹性容器，在其子元素中设置margin:auto;即可实现居中。

ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondragleave 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
event.setDataTransfer.effectAllowed 属性：就是拖拽的效果。
evetn.setDataTransfer.setDragImage() 方法：指定图片或者文档元素做拖动时的视觉效果。