您现在的位置是:首页 > 文章详情

CSS相关知识点

日期:2018-04-13点击:397

1、高和行高也可以撑开盒子,背景图不行。

2、文字若不设置行高,是包含文字的盒子的行高。

4、如果给了定位,但是没有给left,top等值,默认会腾出行内元素、padding的位置,有的时候我们可以使用这些特性,有的时候我们不熟悉的话可能产生bug。

5、较少功能使用较少代码(a代替ui>li>a)

6、如果盒子都是左对齐的话,最后一个盒子在右边的位置不够的话,会掉下来,如果第一个盒子A比第二个盒子B高,那么最后一个盒子C掉下来后跟第二个盒子B左对齐,而不是跟第一个盒子A左对齐。如果最后一个盒子C后面还有一个盒子D的话,D盒子的顶端跟C对齐。(下图 JD logo 是 A 盒子, 搜索框是 B 盒子, 周杰伦的歌是 C 盒子,我的购物车是 D 盒子。)

7、标准流中的文字不会被浮动的盒子盖住。所以一个大盒子中的小盒子要么都浮动要么都不浮动。

 

8、父盒子高度为0 ,子盒子如果是浮动的话不占位置,下面的标准流盒子将会跑到子盒子下面。

或者使用了定位,父盒子高度为0,然后子绝父相,下面的标准流盒子依然会跑到子盒子下面。

(这个可以做类似京东的侧边栏,如果侧边栏挡住了跑上来的标准流盒子,那么把包含标准流的整个大盒子定位:position: relative ,因为定位的层级高,所以就可以显示标准流的所有内容了。)

 

 

 

9、想要盒子随着界面变大变小,而盒子随着界面的中线能够移动的时候(类似定位/脱标的盒子居中对齐),不要加版心(margin: 0 auto;)

10、父盒子有高度,但是子盒子太高,父盒子会被撑破;如果父盒子没有高度,那么父盒子会被撑开,是所有子盒子最高的高度。撑开的盒子可能会产生影响。(不要让浮动的盒子超出父盒子)

11、浮动盒子的相互影响,不管是否在一个大盒子里面(蓝盒子是包含在粉红盒子里面的,紫盒子和粉红盒子是并列的)。

 

 

12、谷歌浏览器不支持12号以下字体大小。

13、子盒子不占位置,父盒子高度为0,会导致下面的盒子顶上来了。(清除浮动)

14、 curser: pointer;  模拟鼠标小手样式。

15、 <a href=""></a> 

如果 href 值为空,刷新页面。

如果 href 值为#,跳转到页面顶端,不刷新页面。

如果 href 值为  javascript:;  或者  javascript:void(0)  ,不刷新页面,也不跳转。

 

16、定位的时候,left 的权限比 right 权限高,top 比 bottom 高,提高权限也没用。

17、图片半透明

opacity:0.4;   优点方便。缺点:里面的内容也会半透明。

CSS3的技术来解决半透明:

background: rgba(0,0,0,0.3);

background: rgba(0,0,0, .3);

 

18、行高可以继承。

19、如果一个大盒子装的是 li 标签,而且 li 标签是浮动的,如果 li 里面的内容超过了大盒子的话,会有 li 标签掉下来,如何使得所有的 li 标签在一行显示呢?用一个辅助盒子装下所有的 li 标签,然后大盒子只装辅助盒子,这样对于大盒子来说,所有的 li 标签都会在一行显示,即使大盒子很小。而辅助盒子可以使用 ul 来代替,给 ul 一个所有 li 加起来的宽度多一点即可,但是多的一点要少于一个 li 的宽度。

20、行内元素给了定位,不需要转block,只有static, relative定位的时候需要转 block。

21、盒子的border有重叠怎么办,可以往左上移动border的margin来覆盖。

22、background: url("spirit.png") -135px 0;

关于背景の问题:

有时候我发现background后面两个px可以调节位置,有的时候又必须使用left,top等调位置。其实后面的两个px本来就是调位置的,而且调的是整个背景的位置,当背景是整张图片的时候,调节这两个px就可以了,但是精灵图因为需要的只是背景图中的某一个区域,调节这两个px只是将选中的区域移动到定位的原点,然后再使用left,top等将选定的区域调节到定位的具体位置。

 

原文链接:https://yq.aliyun.com/articles/607309
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章