欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

提高您CSS开发能力的技巧集_html/css_WEB-ITnose

程序员文章站 2022-05-18 13:54:45
...
0. 目录

  • 目录
  • 引言
  • 正文
  • 1 使用not给导航条添加间隔线
  • 2 给body元素增加Line-Height属性
  • 3 任意元素垂直居中
  • 4 逗号分隔的列表
  • 5 在nth-child中使用负数
  • 6 使用svg图标
  • 7 文本显示优化
  • 8 在Pure CSS Sliders中使用max-height
  • 9 初始化box-sizing
  • 10 表格单元格等宽
  • 11 使用Flexbox摆脱各种Margin Hacks
  • 12 给空连接使用属性选择符
  • 声明
  • 1. 引言

    原文:github的A collection of useful CSS protips
    译者:爱前端乐分享的FedFun,意译为主不当之处,欢迎指正!
    译言:提高您CSS开发能力的技巧集,希望对大家有所帮助。

    2. 正文

    2.1 使用:not()给导航条添加间隔线

    我们通常使用如下代码给导航条增加间隔线

    /* add border */.nav li { border-right: 1px solid #666;}/* remove border */.nav li:last-child { border-right: none;}

    现在,我们可以使用:not()选择符简化操作,代码简洁易读,不错吧。

    .nav li:not(:last-child) { border-right: 1px solid #666;}

    或者,我们增加左边框。

    .nav li:first-child ~ li { border-left: 1px solid #666;}

    2.2 给body元素增加Line-Height属性

    我们不需要给每个p、h1元素设置line-height,只需要给body元素设置,其他文本元素会自动继承body的特性。

    body { line-height: 1;}

    2.3 任意元素垂直居中

    不是黑魔法,确实可以让任意元素垂直居中。

    html, body { height: 100%; margin: 0;}body { -webkit-align-items: center;  -ms-flex-align: center;  align-items: center; display: -webkit-flex; display: flex;}

    2.4 逗号分隔的列表

    让html列表貌似现实中逗号分隔的列表

    ul > li:not(:last-child)::after { content: ",";}

    2.5 在nth-child中使用负数

    在css的nth-child中使用负数选择1~n条记录。

    li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}

    2.6 使用svg图标

    没有理由不使用svg图标,在大多数分辨率和浏览器里能够实现缩放,甚至兼容到IE9,所以不用再用.png、.gif等等。

    .logo { background: url("logo.svg");}

    2.7 文本显示优化

    一些字体不能再所有设备中最优展示,所以需要设置。

    html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

    注意optimizeLegibility属性值的使用问题,同时IE/Edge不支持text-rendering。

    2.8 在Pure CSS Sliders中使用max-height

    使用max-height实现隐藏、显示的动画。

    .slider ul { max-height: 0; overlow: hidden;}.slider:hover ul { max-height: 1000px; transition: .3s ease;}

    参见本博《Auto值的CSS3 Transition解决方案》

    2.9 初始化box-sizing

    从html中继承box-sizing属性,这样的话,后期维护比较方便。

    html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}

    2.10 表格单元格等宽

    .calendar { table-layout: fixed;}

    2.11 使用Flexbox摆脱各种Margin Hacks

    在实现侧栏时,我们不再需要各种nth-、first-和last-child等设置margin,可以使用Flexbox轻松实现均匀分布。

    .list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}

    2.12 给空连接使用属性选择符

    对于那些拥有href属性但是内容为空的a,自动添加内容。

    a[href^="http"]:empty::before { content: attr(href);}

    非常方便,是吧。

    3. 声明