• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

你未必知道的10个CSS技巧_css

css 搞代码 7年前 (2018-06-11) 124次浏览 已收录 0个评论
  1. font的简写
    css很多元素都有简写,font要特别和严格一些,font-sizefont-family是必须的,而且要按照这个顺序。因为font用到的地方比较多,所以他可能特别提到。简写能有效减小你的CSS文件的体积。
  2. class属性叠加
    其实在class中可以同时加入多个属性,属性用空格隔开。例如:<p class="text side">...</p>这样<p>就继承了.text.side的有效属性(冲突的地方会自动被排斥)。随便提一下kubrick主题中也有一个地方使用了这个方法。该文章回复的用户提到IE在处理多属性时可能存在问题。
  3. border的缺省值
    当你使用border简写时没有指定border-widthborder-color时,border是有缺省值的,宽度为medium(大概3到4个象素),颜色为框内文本的颜色。
  4. !important不理会IE
    在CSS规则中,!important会使该规则额外优先,而IE却听不懂这条规则,那么在某些时候这个技巧会非常有用。
  5. 图片移魂大法
    你先看看原文的叙述,我谈谈我的经历。哈哈,我最早在zeldman的Blog上发现了这个技巧,注意他的导航条,鼠标悬停时空心字图片会变为实心,而实际上这是一张图片。呵呵,你再去分析一下他的CSS就知道了。
  6. 盒模式的另类hack法
    IE6以前的版本都有对盒模式的错误理解。以前都是看用CSS的声音属性来处理IE6以下版本的效果,这次你可以看看另外一种方法,看上去更简单方便。
  7. 块元素居中
    我们一般都使用指定块宽度再把左右margin设置为auto来居中。殊不知有时会在IE6之前的版本出现问题。去看看解决技巧,有CSS示例。
  8. 垂直居中
    CSS对垂直居中比较弱,没有表格那么灵活。而且vertical-align这个属性你就是用了也是不起作用的。方法就在于用行高来解决,把行高设置为整个box的高度。
  9. 子容器的定位
    CSS的奇妙除了可以让对象随处定位外,还可以让子容器也做得到。这个用处也很多。比如Binary Bonsai的导航条。
  10. 控制屏幕底部的背景色
    这个请看原文的详细讲解了。

欢迎大家阅读《你未必知道的10个CSS技巧_css,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:你未必知道的10个CSS技巧_css
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址