织梦CMS - 轻松建站从此开始!

圣道-文化大观园

CSS的几点高级技巧

时间:2018-12-14 15:20来源:搜集整理 作者:电脑编辑 点击:
1、在CSS使用:not() 在菜单上应用/取消应用边框,先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } 然后再除去最后一个元素 //* remove border */ .nav li:last-child { borde
  1、在CSS使用: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、为body添加行高,不需要分别添加 line-height 到每个 <p>,<h*>等。只要添加到 body 即可:
body {
  line-height: 1;
}
  这样,文本元素就可以很容易地从body 继承。
  3、所有一切都垂直居中,要将所有元素垂直居中,太简单了:
html, body {
  height: 100%;
  margin: 0;
}
 
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
  请看,是不是很简单呀。
  注:在IE11中要小心flexbox。
 4、逗号分隔的列表,让HTML列表项看上去像一个真正的,用逗号分隔的列表:
ul > li:not(:last-child)::after {
  content: ",";
}
  对最后一个列表项使用 :not() 伪类。
 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;
}
  就是这么容易。
 6、对图标使用SVG
  我们没有理由不对图标使用SVG:
.logo {
  background: url("logo.svg");
}
  SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
 7、优化显示文本
  有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
  注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。
 8、对纯CSS滑块使用 max-height
  使用 max-height 和溢出隐藏来实现只有CSS的滑块:
.slider ul {
  max-height: 0;
  overlow: hidden;
}
 
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}
 9、继承 box-sizing
  让 box-sizing 继承 html:
html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
}
  这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
 10、表格单元格等宽
  表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:
.calendar {
  table-layout: fixed;
}
 11、用Flexbox摆脱外边距的各种hack
  当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 
的hack了:
.list {
  display: flex;
  justify-content: space-between;
}
 
.list .person {
  flex-basis: 23%;
}
  现在,列表分隔符就会在均匀间隔的位置出现。 (责任编辑:超越时空)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容