Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

2013 > css > Flashcards

css Flashcards

1
Q

inline and inline-block?

A

inline无法控制宽高，无论如何设置都是auto*auto；而inline-block可以手动设置宽高。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

为什么有时候文字会偏上（设置色块背景时）？

A

因为mac就是有这个bug，在pc下是好的。解决方法：在mac下给html加个class，然后单独设置。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

uppercase?

A

text-transform: uppercase;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

斜体？

A

font-style: italic;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

控制选中部分的颜色?

A

::selection{ color: xxx;}::-moz-selection{ color: xxx;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

如何让两个div一左一右？

A

text-align: justify;但是最后一行不会有这种效果，所以要加一个after，并且inline-block作为最后一行。content: ““;ie8 不支持justify，除非再加一行text-justify:inter-ideograph;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

ie9 doesn’t support?

A
  • animation, transition * img默认会有border，要加none * Translate3d (could use translate2d instead)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

ie8 doesn’t support?

A
  • opacity, rgba, shadow, radius * background-size, 只能弄一张大图 * png 不能加 filter，有黑色烧焦的感觉 * iframe不支持透明，要加 allowtransparency=”allowtransparency”, frameborder=”0” * text-align: justify. 需要再加一行 text-justify:inter-ideograph;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

problem with translate 3d?

A

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);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

html addClass “no-touch”, how to write less

A

只能加在html上，因为less压缩的时候会把前面一串都带上。.info{ xx: xx; .no-touch &{ xx: xxx; }]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

list style type?

A

如果在util里reset： * ul,ol,li{list-style:none;} li的样式也会被覆盖，实际上list-style应该只在ul、ol上设置。所以这样设置： * ul,ol{list-style-type:none;} 需要用的时候，就ul{list-style-type: disc;}就可以了。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

在css transition中用贝赛尔曲线，what does it look like?

A

.transition(1.3s all cubic-bezier(.3, .02, 0, 1));

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

CSS: 文字环绕效果？

A

p一定要在img的下面

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

CSS: 没有padding、margin，却有一条缝

A

是因为其中一个设置了inline-block。这时候在inline-block的div上设置vertical-align: top就可以了。inline-block的默认四周都会有缝隙。 * 左右的缝隙可以通过font-size/letter-spacing解决； * 下面的缝隙可以通过vertical-align: top; 来解决。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

关于背景图片不要超过边框的问题

A
  • background-size: cover; * background-size: contain;这两个是正好相反的。还是要多看文档~好东西不用可惜了。
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

为什么有的时候图片有一条线无法对齐？

A

因为是display: inline-block的，改成block就好了。

17
Q

what’s the problem with 50% + 50% width inline-block?

A

安卓：不支持font-size: 0;所以不能用inline-block来居中。如果两个都是50%，就会挤下去。ps，不要忘了letter-spacing: 0;

18
Q

absolute全屏的参照是什么？

A

position: absolute;top/left/right/bottom: 0;bottom: 200px;会按照屏幕来定位。但是body设置个position: relative，就会按照body来定位。所有上级都要height: 100%。注意：不能设置高度百分百。否则会撑下去。但是如果需要宽度，就宽度100%.

19
Q

视频用哪个库？

A

videojs横的音量mediaelements竖着的音量视频不能用 translate3d(0,0,0)减少闪动，否则全屏会歪掉。

20
Q

IE8 文字锯齿：

A

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)‘

21
Q

iframe静置一段时间mediaquery失效问题

A

设置只有在mobile（has touch）下才有media query，这样就不会跳到那儿了。

22
Q

为什么上下margin会合并？

A

display: block会这样。上面div： * margin-bottom: 20px;下面div： * margin-top: 10px;最终显示出来效果是20px。

23
Q

解决页面闪动：

A

解决页面闪动：-webkit-transform: translate3d(0,0,0) * 不能嵌入flash、视频 * 所有osx字体变细-webkit-bakface-visibility: invisible; * 通常用这个-webkit-transform-style: preserved-3d; * 这个会被覆盖……总之也一般不用

24
Q

字体

A

通常用偶数，不会被切边。除了15px。

25
Q

vertical align only works in two occasions:

A
  • inline-block* table-cell
26
Q

CSS: stacking order

A

从底层到最上层，stacking顺序为： 1. 基层（seabed） 2. positioned，z-index: 0（seagull）Analogies： 1. once an element is positioned, it stands out. 就好像education的barrier。社会地位不是那么好跨越的，有依靠就是牛了。 2. 站着说话就是牛气，不嫌腰疼。 3. 踩着冲浪板，就可以比自由游泳的人站得更高。虽然两个都是在水上随波逐流。 4. 所以小孩可以显示在它的父母下面。只要它的父母不是seabed就好。So opacity creates new stack. But apparently that doesn’t work in ie9/10. 5. ie stubbonly refuse to go according to w3c rule when it comes to anything. especially where it needs to make things disappear/more opaque.

27
Q

CSS: nth-child ie不支持的问题

A
  • first-child是支持的 * last-child是不支持的（ie8） * nth-child不支持only the prime child gets pass ie. others will be forgotten. because ie, when doing i.e… always forget what to take as examples after the first. old man that is.
28
Q

CSS：background-position

A

background-position-xbackground-position-y在ie、火狐下都不管用。只能用background-position，最朴素的。background-position is a poor guy who gets locked up in a cell. he stays in the background and can’t stretch either upwards or sideways (x/y) because ie and firefox are there.

29
Q

CSS：iPhone/iPad高清两倍图写法

A

background-image: url(../images/mobile/logo_1x.png);background-image: -webkit-image-set(url(../images/mobile/logo_1x.png) 1x, url(../images/mobile/logo_2x.png) 2x);

30
Q

在mac下，chrome的字体背景padding会比较显小，firefox和safari会显大？

A

就是因为载入了不同的字体。一般来说，eot必须放在前面，为ie考虑。svg一般字体比较细。

31
Q

sometimes the border of something wouldn’t change color on hover

A

could because the “right” animation hindered the background transition. use margin-right instead. sometimes they just get in each other’s way.

32
Q

webfont svg 防抖……

A

不能写在同一层里！否则防抖就不起效了

33
Q

border-radius for ie8?

A

.border-radius(@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; behavior: url(vendors/css3pie/PIE.htc);}and box-shadow as well.but better not use them together. might hinder each other. （比如hover不消失）

34
Q

border-radius for ie8?

A

.border-radius(@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; behavior: url(vendors/css3pie/PIE.htc);}

2013 (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions