css 小知识点

1.width:auto或者不设width 与 width:100% 区别

width:auto或者不设：子元素会默认撑满父元素content区域，如果子元素有margin、border、padding的话，content区域会自动减去margin、border、padding，这样子元素一定不会超出父元素

width:100%：子元素会默认撑满父元素content区域，如果子元素有margin、border、padding的话，content区域不会减去margin、border、padding，这样子元素就会超出父元素

所以：无宽度！尽量利用元素流特性来撑满

 

2. white-space

white-space属性	源码空格	源码换行	<br>换行	容器边界换行
normal	合并	忽略	换行	换行
nowrap	合并	忽略	换行	不换行
pre	保留	换行	换行	不换行
pre-wrap	保留	换行	换行	换行
pre-line	合并	换行	换行	换行

 

3. @keyframes 关键帧

语法：@keyframes animationname {keyframes-selector {css-styles;}}
参数解析：
　　1.animationname:声明动画的名称。
　　2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
　　"from" 和 "to"的形式等价于 0% 和 100%。
　　建议始终使用百分比形式。
eg: @keyframes width{
　　0%{width:0px;}
   100%{width:200px;}
}
通过animation调用： animation: keyFramesName duration timing-function delay iteration-count direction;

4.background-color:currentColor;   background-clip 裁剪背景图片

currentColor是css3中的新属性，意思是设置颜色为当前字体的颜色

background-clip可以设置的值： border-box   裁剪到边框盒子

　　　　　　　　　　　　　　 padding-box  裁剪到内边距盒子

　　　　　　　　　　　　　　content-box    裁剪到内容盒子

5. margin 可以为负值

margin-left、margin-right

>元素本身没有宽度会增加宽度

>元素有宽度会产生位移

margin-top: 产生向上的位移

margin-bottom: 不会产生位移，会减少自身供css读取的高度

6. clip 属性针对绝对定位元素用于裁剪出一个矩形，超出了这个矩形的部分按照overflow的值来处理