作为一枚web前端开发工程师 这些CSS 小技巧你值得掌握

    1. http://web.jobbole.com/85142/
    2. 使用:not()去除导航上不需要的边框
    3. 为body添加行高
    4. 垂直居中任何元素
    5. 逗号分离的列表
    6. 使用负nth-child选择元素
    7. 使用SVG图标
    8. 文本显示优化
    9. 在纯CSS幻灯片上使用max-height
    10. 继承box-sizing
    11. 表格单元格等宽
    12. 使用Flexbox摆脱边界Hack
    13. 使用属性选择器选择空链接

    使用:not()添加/去除导航上不需要的边框

    添加边框…

    CSS

    1

    2

    3

    4

    5

    /* 添加边框 */

    .nav li {

    border-right: 1px solid #666;

    }

    …然后去除最后一个元素的边框…

    CSS

    1

    2

    3

    4

    5

    /* 移除边框 */

    .nav li:last-child {

    border-right: none;

    }

    …使用伪类 :not() 将样式只应用到你需要的元素上：

    CSS

    1

    2

    3

    .nav li:not(:last-child) {

    border-right: 1px solid #666;

    }

    当然，你可以使用.nav li + li 或者 .nav li:first-child ~ li， 但是使用 :not() 的意图特别清晰，CSS选择器按照人类描述它的方式定义边框。

    为body添加行高

    你不需要分别为每一个 <p>, <h*> 等元素添加行高，而是为body添加:

    CSS

    1

    2

    3

    body {

    line-height: 1;

    }

    这种方式下,文本元素可以很容易从body继承。

    垂直居中任何元素

    不，这不是黑魔法，你的确可以垂直居中任何元素：

    CSS

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    html, body {

    height: 100%;

    margin: 0;

    }

    body {

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    display: -webkit-flex;

    display: flex;

    }

    想让其他元素居中？垂直，水平…任何东西，任何时间，任何位置？CSS-Tricks上有 一个不错的文章 来做到这一切。

    注意：IE11上flexbox的一些 缺陷行为。

    逗号分离的列表

    让列表看起来更像一个真正的逗号分离列表：

    CSS

    1

    2

    3

    ul > li:not(:last-child)::after {

    content: ",";

    }

    使用伪类:not() ，这样最后一个元素不会被添加逗号。

    使用负 nth-child 选择元素

    在CSS使用负nth-child选择1到n的元素。

    CSS

    1

    2

    3

    4

    5

    6

    7

    8

    9

    li {

    display: none;

    }

    /* 选择1到3的元素并显示 */

    li:nth-child(-n+3) {

    display: block;

    }

    或者，你已经学习了一些关于 使用 :not()，尝试：

    CSS

    1

    2

    3

    4

    5

    6

    7

    /* select items 1 through 3 and display them */

    /* 选择1到3的元素并显示 */

    li:not(:nth-child(-n+3)){

    display: none;

    }

    这很简单。

    使用SVG图标

    没有理由不使用SVG图标：

    CSS

    1

    2

    3

    .logo {

    background: url("logo.svg");

    }

    SVG对所有分辨率类型具有良好的伸缩性，IE9以上的所有浏览器都支持。所以放弃.png，.jpg或gif-jif等任何文件。

    注意：如果你使用SVG图标按钮，同时SVG加载失败，下面能帮助你保持可访问性：

    CSS

    1

    2

    3

    .no-svg .icon-only:after {

    content: attr(aria-label);

    }

    文本显示优化

    有些字体在所有的设备上并不是最优显示，因此让设备浏览器来帮忙：

    CSS

    1

    2

    3

    4

    5

    html {

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    }

    注意：请使用optimizeLegibility。同时，IE/Edge不支持text-rendering。

    在纯CSS实现的内容滑块上使用max-height

    在纯CSS实现的内容滑块上使用max-height，同时设置overflow hidden：

    CSS

    1

    2

    3

    4

    5

    6

    7

    8

    9

    .slider ul {

    max-height: 0;

    overlow: hidden;

    }

    .slider:hover ul {

    max-height: 1000px;

    transition: .3s ease; /* animate to max-height */

    }

    继承box-sizing

    从html继承box-sizing：

    CSS

    1

    2

    3

    4

    5

    6

    7

    html {

    box-sizing: border-box;

    }

    , :before, *:after {

    box-sizing: inherit;

    }

    这让插件或使用其他行为的组件能很容易地改变box-sizing。

    表格单元格等宽

    使用表格会很痛苦，因此使用table-layout：fixed来保持单元格相同的宽度：

    CSS

    1

    2

    3

    .calendar {

    table-layout: fixed;

    }

    无痛表格布局。

    使用Flexbox摆脱边界Hack

    当使用列约束时，可以抛弃nth-，first- 和 last-child的hacks，而使用flexbox的space-between属性：

    CSS

    1

    2

    3

    4

    5

    6

    7

    8

    .list {

    display: flex;

    justify-content: space-between;

    }

    .list .person {

    flex-basis: 23%;

    }

    现在列约束总是等间隔出现。

    使用属性选择器选择空链接

    显示没有文本值但是 href 属性具有链接的 a 元素的链接：

    CSS

    1

    2

    3

    a[href^="http"]:empty::before {

    content: attr(href);

    }

    这样做很方便。

    浏览器支持

    这些技巧在当前版本的Chrome，Firefox， Safari， 以及Edge， 和IE11可以工作。

时间： 2024-08-03 08:54:33

作为一枚web前端开发工程师 这些CSS 小技巧你值得掌握的相关文章

听说优秀的Web前端开发工程师都会用这几个工具！

Web前端入行门槛低.薪资待遇高.市场需求大,是很多人进入IT行业的首选语言.工欲善其身必先利器,作为初学前端行业的小白,如果知道一些好用的软件工具可以帮助他们更好的工作.下面,就给大家分享Web前端开发工程师常用的工具. 1.Bootstrap Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式.表单.buttons.表格.网格系统等等. 2.Foundation Foundation是一个易用.强

腾讯web前端开发工程师笔试题及答案

1. 如何实现事件委托? 首先要知道什么是事件委托. 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><ti

我也想成为一名出色的web前端开发工程师

随着互联网的发展,正式的前端工程师角色被行业认可,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要,前端领域的技术发展也越来越快,各种新的思想.设计模式.工具和平台都快速发展,对前端工程师的技能要求也越来越高. 何为前端工程师?前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性.组件

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

细数Web前端开发工程师 应掌握的技能

Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于通过技术改善用户体验. 第一阶段:页面制作基础 从这一基础阶段开始,正式学习Web前端开发需要的编程语言HTML,CSS和JavaScript.HTML和CSS用于Web静态内容的展示,JavaScrip

Web前端开发工程师需要掌握哪些核心技能？

Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢? 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新.有些人认为前端开发要掌握的技能简单,不就是制作网页 嘛,其实不然,web前端需要掌握的核心语言xHTML+CSS+JavaScript,JavaScript作为最难的语言之一,许多编程高手也不敢妄 自菲薄自封精通.由于JavaScript与html的差异性,以及静动态分开处理的一些好处.

Web前端开发工程师养成计划【转载】

Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国日渐成熟才解放了一直以来姥姥不疼舅舅不爱的前端开发工程师们. 有没有发现从09年下半年到现在全中国的互联网公司都在招聘前端开发工程师?如果你注意到了,那么恭喜你,你已经拥有那么一点点预测互联网职场动向的能力. 可能令你感到遗憾的是你从没从事过前端开发工作,不过没关系,只要你肯努力,一切都是可以学会的

Web前端开发工程师的就业前景

Web前端开发工程师是一个全新的职业,在IT行业真正受到重视的时间不超过5年.因此,大家越来越关心web前端工程师前景怎么样?web前端工程师就业如何?Web前端开发是从美工演变而来的,名称上有很明显的时代特征.现在越来越多的IT企业对用户体验更加注重,因此对web前端人员的需求也越来越大! 为适应人们快速获取信息和不断提高的审美要求,大到国际组织和政府部门,小到公司企业.个人主页等等,无不将网站作为自己向外界展示气质形象.传达信息的窗口,而网页如同一个人的脸蛋,其是否美观漂亮,直接关系到该网站

Web前端开发工程师

Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web前端开发,致力于通过技术改善用户体验. 第一阶段:页面制作基础 从这一基础阶段开始,正式学习Web前端开发需要的编程语言HTML,CSS和JavaScript.HTML和CSS用于Web静态内容的展示,JavaScrip