首页 > 开发 > CSS > 正文

CSS 高级技巧总结(必看)

2024-07-11 08:32:51
字体:
来源:转载
供稿:网友

在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个《CSS 高级技巧汇总让你的代码简洁高效》。大家务必掌握这些小技巧,会让你非常高效率的写出网页的。

css

◆使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

CSS Code复制内容到剪贴板
  1. /* add border */   .nav li {   
  2.      border-right: 1px solid #666;    }  

……然后再除去最后一个元素……

CSS Code复制内容到剪贴板
  1. //* remove border */   .nav li:last-child {   
  2.      border-right: none;    }  

……可以直接使用 :not() 伪类来应用元素:

CSS Code复制内容到剪贴板
  1. .nav li:not(:last-child) {         border-right: 1px solid #666;   
  2. }  

这样代码就干净,易读,易于理解了。

当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

CSS Code复制内容到剪贴板
  1. ..nav li:first-child ~ li {         border-left: 1px solid #666;   
  2. }  

◆给 body添加行高

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

CSS Code复制内容到剪贴板
  1. body {       line-height: 1;   
  2. }  

这样文本元素就可以很容易地从 body 继承。

◆所有一切都垂直居中

要将所有元素垂直居中,太简单了:

CSS Code复制内容到剪贴板
  1. html, body {       height: 100%;   
  2.    margin: 0;    }   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表