css技巧总结
嵐烨
目前是web前端开发工程师,本人自认为是菜鸟阶段,希望跟各位技术同行交流学习可以不断提升自身功力。
展开
-
实用css技巧——清除浮动方法总结
相信不少跟我一样的前端新手在利用float浮动来进行页面的布局和定位时都会遇到这样的问题:一旦当前浮动元素的父级div不设置固定的高度height时,浮动的元素无法将父级div的内容撑开。导致整个页面的布局都乱了。究其原因竟是因为没有“清除浮动”。因为之前在实际项目开发中就遇到过这个问题,给自己造成了不少的困扰。现在想把自己用到的清除浮动的方法跟大家分享下,菜鸟学飞,总结得不全面还请各位大牛多多指原创 2016-06-01 08:31:38 · 927 阅读 · 0 评论 -
css(css3)实现垂直水平居中的那些事
都说“金三银四求职季”,本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:“说说垂直水平居中都有哪些实现方式吧?” 面试过程巴拉巴拉一大堆,现在终于有时间把这些知识点总结归纳起来,希望能帮自己巩固下,也希望可以帮到有需要的小伙伴~大神路过求轻喷求包涵。 言归正传,既然说到垂直水平居中,那现在咱们就来好好归纳下:“水平居中原创 2017-03-03 20:10:02 · 2880 阅读 · 0 评论 -
字体抗锯齿属性-webkit-font-smoothing
字体抗锯齿属性:-webkit-font-smoothing,有需要的朋友可以参考下。对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。但是,我们可以用以下两种定义进行抗锯齿渲染-webkit-font-smoot转载 2016-09-22 23:26:01 · 13855 阅读 · 0 评论 -
before用双冒号与单冒号的区别
:before和::before的区别在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别?这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号的区别,简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。W3C关于CSS3选择器的规范中有一段描述:转载 2016-09-22 23:23:02 · 10410 阅读 · 0 评论 -
css 样式重置另一种角度
前言:可能是个人强迫症的关系,对于一个概念一定要深挖到自己觉得以自己目前的能力来说可以掌握为止,不然不明不白的,只知其一不知其二,真让人难受!最近在复习html重构这个专题上就css重置样式这块,还真的发现了点新东西,想跟大家分享下。关于css重置样式表,之前常用的就是reset css,但是除了这个其实还有normlize.css这个相较reset css更加人性化更加现代化更加适合H5开发转载 2016-08-07 12:07:03 · 1213 阅读 · 1 评论 -
css 重置样式表
前言: 关于css样式重置 ,相信对于接触过前端的人都知道在开始编写属于自己的代码之前都需要完成这一步。不过,我还是想说说自己对css重置的理解。希望可以利人利己(哈哈,对,就素介么任性!)首先,我觉得像我一样对于理解概念无感,容易混淆的前端小白要清楚什么是css重置样式,就要弄清楚两个概念:CSS Reset以及css重置(其实概念很相近,但是还是有所区别的),不然傻傻只知道css样式要原创 2016-08-07 11:06:15 · 28837 阅读 · 3 评论 -
css 伪类选择器 :nth-child(n) 与:nth-of-type(n)的区别
这个文章标题似乎太长了。但是不点明又不大好。哈哈,暂且不要在意这些细节了,说说今天的主角CSS的伪类选择器:nth-child,至于为什么还需要配角:nth-of-type,是因为我个人觉得这两个选择器的功能有点相近,估计也有初学者像我一样“粗心大意”,不注意区分它们之间的不同。再者说,两个有了对比也可以加深印象。先看下两者的定义与用法:nth-child(n)选择器匹配属于其父元原创 2016-06-13 22:57:49 · 4023 阅读 · 2 评论 -
浅说css的绝对定位跟相对定位
前言:接触html跟css也有段时间了,但是每次要用div+css布局时,心里还是有点虚,尤其是对于position这个属性的运用,之前都是囫囵吞枣。大致了解个概念,对他们也不够重视,这让我在用到这个属性布局时吃了不少亏,都说在“哪里跌倒就在哪里爬起来!”,对于这个自己埋下的坑,最近终于可以静下心来好好把这个坑填上了,原创 2016-06-03 09:38:44 · 611 阅读 · 0 评论 -
文字、字母以及数字的换行不换行问题总结
实现页面的文字、字母的展示效果的时候,相信大家都会遇到过一些这样的要求:“文字不能换行,要强制文字一行展示”或者是“字母不会自动换行,需要实现可以自动换行断句”等等诸如此类的要求,现在就这个文字、字母换不换行的问题,说说这三个css属性的巧妙运用:white-space、word-wrap、word-break首先,先来看下这三个属性在W3C上给出的释义:(具体这三个属性各自有哪些属性值需要大原创 2017-03-03 20:47:10 · 10933 阅读 · 2 评论