css Flashcards
(34 cards)
inline and inline-block?
inline无法控制宽高，无论如何设置都是auto*auto；而inline-block可以手动设置宽高。
为什么有时候文字会偏上（设置色块背景时）？
因为mac就是有这个bug，在pc下是好的。解决方法：在mac下给html加个class，然后单独设置。
uppercase?
text-transform: uppercase;
斜体？
font-style: italic;
控制选中部分的颜色?
::selection{ color: xxx;}::-moz-selection{ color: xxx;}
如何让两个div一左一右？
text-align: justify;但是最后一行不会有这种效果，所以要加一个after，并且inline-block作为最后一行。content: ““;ie8 不支持justify，除非再加一行text-justify:inter-ideograph;
ie9 doesn’t support?
- animation, transition * img默认会有border，要加none * Translate3d (could use translate2d instead)
ie8 doesn’t support?
- opacity, rgba, shadow, radius * background-size, 只能弄一张大图 * png 不能加 filter，有黑色烧焦的感觉 * iframe不支持透明，要加 allowtransparency=”allowtransparency”, frameborder=”0” * text-align: justify. 需要再加一行 text-justify:inter-ideograph;
problem with translate 3d?
ie9 doesn’t support 3d, but could use 2d:不支持！3d -webkit-transform: translate3d(@x,@y,@z); -moz-transform: translate3d(@x,@y,@z); -ms-transform: translate3d(@x,@y,@z); transform: translate3d(@x,@y,@z); 所以，用：2d -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px);
html addClass “no-touch”, how to write less
只能加在html上，因为less压缩的时候会把前面一串都带上。.info{ xx: xx; .no-touch &{ xx: xxx; }]
list style type?
如果在util里reset： * ul,ol,li{list-style:none;} li的样式也会被覆盖，实际上list-style应该只在ul、ol上设置。所以这样设置： * ul,ol{list-style-type:none;} 需要用的时候，就ul{list-style-type: disc;}就可以了。
在css transition中用贝赛尔曲线，what does it look like?
.transition(1.3s all cubic-bezier(.3, .02, 0, 1));
CSS: 文字环绕效果？
p一定要在img的下面
CSS: 没有padding、margin，却有一条缝
是因为其中一个设置了inline-block。这时候在inline-block的div上设置vertical-align: top就可以了。inline-block的默认四周都会有缝隙。 * 左右的缝隙可以通过font-size/letter-spacing解决； * 下面的缝隙可以通过vertical-align: top; 来解决。
关于背景图片不要超过边框的问题
- background-size: cover; * background-size: contain;这两个是正好相反的。还是要多看文档~好东西不用可惜了。
为什么有的时候图片有一条线无法对齐？
因为是display: inline-block的，改成block就好了。
what’s the problem with 50% + 50% width inline-block?
安卓：不支持font-size: 0;所以不能用inline-block来居中。如果两个都是50%，就会挤下去。ps，不要忘了letter-spacing: 0;
absolute全屏的参照是什么？
position: absolute;top/left/right/bottom: 0;bottom: 200px;会按照屏幕来定位。但是body设置个position: relative，就会按照body来定位。所有上级都要height: 100%。注意：不能设置高度百分百。否则会撑下去。但是如果需要宽度，就宽度100%.
视频用哪个库？
videojs横的音量mediaelements竖着的音量视频不能用 translate3d(0,0,0)减少闪动，否则全屏会歪掉。
IE8 文字锯齿：
IE8 文字锯齿：-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/hIEfix.png,sizingMethod=crop);”;有时候文件相对地址会改变，最好用这个，而且下面这个解析起来快。-ms-filter:’progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC’,sizingMethod=crop)‘
iframe静置一段时间mediaquery失效问题
设置只有在mobile（has touch）下才有media query，这样就不会跳到那儿了。
为什么上下margin会合并？
display: block会这样。上面div： * margin-bottom: 20px;下面div： * margin-top: 10px;最终显示出来效果是20px。
解决页面闪动：
解决页面闪动：-webkit-transform: translate3d(0,0,0) * 不能嵌入flash、视频 * 所有osx字体变细-webkit-bakface-visibility: invisible; * 通常用这个-webkit-transform-style: preserved-3d; * 这个会被覆盖……总之也一般不用
字体
通常用偶数，不会被切边。除了15px。
