黑马程序员技术交流社区

标题: 【上海校区】CSS之小技巧(2) [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-2 09:32
标题: 【上海校区】CSS之小技巧(2)

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;
  
  
• 
  
  }
  
  
  

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

---

作者: 不二晨    时间: 2018-8-2 17:36
奈斯，棒棒哒

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2