以后地位:首页 > 建站常识 > 列表

12 个 CSS 高等技能汇总

点击: 次时辰:2016/2/2关头词:CSS
上面这些CSS高等技能,普通人我可不告知他哦。利用:not() 在菜单上利用/打消利用边框给body增加行高统统统统都垂直居中逗号分开的列表利用负的nth-child挑选名目对图标利用SVG优化显现文本对纯CSS滑块利用max-height担当box-sizi

上面这些CSS高等技能,普通人我可不告知他哦。

  • 利用 :not() 在菜单上利用/打消利用边框
  • 给body增加行高
  • 统统统统都垂直居中
  • 逗号分开的列表
  • 利用负的 nth-child 挑选名目
  • 对图标利用SVG
  • 优化显现文本
  • 对纯CSS滑块利用 max-height
  • 担当 box-sizing
  • 表格单位格等宽
  • 用Flexbox挣脱外边距的各类hack
  • 利用属性挑选器用于空链接

 利用 :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;}

 给 body增加行高

  你不须要别离增加 line-height 到每一个 

等。只需增加到 body 便可:

body { line-height: 1;}

  如许文本元素便能够够很轻易地从 body 担当。

 统统统统都垂直居中

  要将统统元素垂直居中,太简略了:

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。

 逗号分开的列表

  让HTML列表项看上去像一个真实的,用逗号分开的列表:

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

  对最初一个列表项利用 :not() 伪类。

 利用负的 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;}

  便是这么轻易。

 对图标利用SVG

  咱们不来由错误图标利用SVG:

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

  SVG对统统的分辩率范例都具备杰出的扩大性,并撑持统统阅读器都回归到IE9。如许能够避开.png、.jpg或.gif文件了。

 优化显现文本

  偶然,字体并不能在统统装备上都到达最好的显现,以是能够让装备阅读器来赞助你:

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

  注:请负义务地利用 optimizeLegibility。另外,IE /Edge不 text-rendering 撑持。

 对纯CSS滑块利用 max-height

  利用 max-height 和溢出埋没来完成只要CSS的滑块:

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

 担当 box-sizing

  让 box-sizing 担当 html:

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

  如许在插件或杠杆其余行动的其余组件中便能够更轻易地转变 box-sizing 了。

 表格单位格等宽

  表格任务起来很费事,以是务必尽可能利用 table-layout: fixed 来坚持单位格的等宽:

.calendar { table-layout: fixed;}

 用Flexbox挣脱外边距的各类hack

  当须要用到列分开符时,经由过程flexbox的 space-between 属性,你便能够够挣脱nth-,first-,和 last-child 的hack了:

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

  此刻,列表分开符就会在平均距离的地位呈现。

 利用属性挑选器用于空链接

  当  元素不文本值,但 href 属性有链接的时辰显现链接:

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

  相称便利。

预定建站
收费供给网站优化
支付关头词