欢迎光临我的个人博客网站!

我的个人博客网站

关注互联网发展和网站优化的个人网站

您当前的位置:主页 > 网站技术 >

前端开发人员一定要知道的CSS技巧小知识

发布时间: 2018-02-09 编辑:admin 点击:183次

前端开发人员一定要知道的CSS技巧小知识

2017年初,前端开发迎来了一次大热潮,看了前程无忧和智联上的招聘信息后,发现前端工资比以往都高了许多,有的甚至和后端持平,当然前提是我们的技术要过关,还有我们的沟通能力,这一点在面试的时候尤为重要。前端开发的基础就是html、css、JavaScript这三大利器,虽然说js水平是决定工资的关键,但是css也不容忽略。下面就看一下前端开发人员需要知道的一些CSS技巧小知识



前端CSS技巧小知识一

使用CSS reset

像normalize.css这样的CSS重置库非常受欢迎,它为您的站点样式提供了一个清爽的选择,能确保浏览器之间更好的一致性。而实际上并不是每个项目都需要这些库中包含的所有规则,我们可以通过一些简单的css规则就能规避浏览器之间的差异。请看下面的盒模型代码:

* {    
  box-sizing: border-box;   
  margin: 0;    
  padding: 0;  
}

前端CSS技巧小知识二

继承 box-sizing

让 box-sizing 继承 html:

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

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

使用Flexbox摆脱外边距的各种 hack

当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

前端CSS技巧小知识三

使用 :not() 定义菜单边框

我们要定义菜单列表的边框,然后去掉最后一个菜单的边框,通常做法是:

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

而我们现在可以直接使用 :not() 伪类来应用元素,让代码就干净,易读,易于理解了。

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

前端CSS技巧小知识四

4.给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

body {
  line-height: 1.5;
}

前端CSS技巧小知识五

5.垂直居中

要将所有元素垂直居中,使用以下代码:

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

前端CSS技巧小知识六

等宽的表格单元格

表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:

.calendar {
  table-layout: fixed;
}

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

当a元素没有文本值,但 href 属性有链接的时候显示链接:

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

前端CSS技巧小知识七

图片不存在的替代样式

由于某种原因导致图片加载失败,这时我们使用css来友好的告诉用户图片除状况了。

img {    
    display: block;    
    font-family: Helvetica, Arial, sans-serif;    
    font-weight: 300;    
    height: auto;    
    line-height: 2;    
    position: relative;    
    text-align: center;    
    width: 100%;  
}
img:before {    
    content: "We're sorry, the image below is missing :(";    
    display: block;    
    margin-bottom: 10px;  
}    
img:after {    
    content: "(url: " attr(src) ")";   
    display: block;    
    font-size: 12px;  
}

前端CSS技巧小知识八

在表单元素上设置font-size

为了避免移动浏览器(iOS Safari等)在点击<select>下拉菜单时放大HTML表单元素,请将font-size添加到输入样式中:

input[type="text"],  
input[type="number"],  
select,  
textarea {    
    font-size: 16px;  
}

前端CSS技巧小知识九

使用calc()做算术

让我们来说说calc()功能。这个函数能让你执行简单的算术计算,可以说在实际项目中是比较重要的。例如计算元素的长宽,这样免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算,包括加减乘除。
 
比方说,你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处:
 
.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }
 
    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }
让html元素居中 父元素的宽度(可以是100%)除以要居中元素的宽度的一半就可以了 我们可以越来越清楚的发现,CSS已经成熟到在某些方法可以替代javascript,极大的简化了web开发人员的工作。尤其css3许多其它的功能,都代替了js的一些代码。掌握了这些前端开发css技术小知识后,大大提高了页面开发的速度。其它更多技巧知识百度一下我们也能找到许多,这需要在工作当中不断积累,希望大家工作顺利。
  • 上一篇:没有了
  • 下一篇:css技巧让DIV水平和垂直居中的几种方法