欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

知了堂教你几招CSS使用小技巧-知了汇智

知了堂教你几招CSS使用小技巧

  1、使用伪类:not()去除导航上某个不需要的边框或者添加

li:not(:last-child){border-right:1px solid #ccc;}//给你指定的某个元素添加右边框

  2、为body添加行高,这样就不需要分别为每一个p,h*等元素添加行高,因为文本元素会从body继承;

body{line-height:1;}

  3、垂直居中任何元素(注意:IE11上flexbox的一些缺陷行为)

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


知了堂教你几招CSS使用小技巧

  4、逗号分离的列表

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

  5、使用负nth-child选择元素

在CSS使用负nth-child选择1到n的元素。
li {display: none;}
li:nth-child(-n+3) {display: block;}//选择1到3的元素并显示 
伪类 :not()方法:
li:not(:nth-child(-n+3)){display: none;}//选择1到3的元素并显示 
 
使用SVG图标:
.logo {background: url("logo.svg");}
SVG对所有分辨率类型具有良好的伸缩性,IE9以上的所有浏览器都支持。
所以放弃.png,.jpg或gif-jif等任何文件。
注意:如果你使用SVG图标按钮,同时SVG加载失败,下面能帮助你保持可访问性:
.no-svg .icon-only:after {content: attr(aria-label);}

  6、在纯CSS实现的内容化快上使用max-height(同时设置overflow:hidden)

.ul ul{max-height:0;overflow:hidden;}
.ul:hover ul{max-height:1000px;transition: .3s ease; 
/* animate to max-height */}

  7、继承box-sizing(让插件或使用其他行为的组件能很容易改变box-sizing)

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

  8、表格单元格等宽

table-layout:fixed;

  9、使用Flexbox拜托边界Hack(当使用列约束时,可以抛弃nth-,first- 和last-child的hacks,使用flexbox的space-between属性)

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

  浏览器支持:当前版本的Chrome,Firefox, Safari, 以及Edge, 和IE11

       版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习

132 2811 3191
预约免费试学
点击咨询
预约试学