css -- 有用的css

1、纯CSS的导航栏Tab切换方案

:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素

方案一、
#content1,
#content2{
    display:none;
}

#content1:target,
#content2:target{
    display:block;
}
#content1:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}

#content2:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}
<ul class='nav'>
    <li><a href="#content1">列表1</a></li>
    <li><a href="#content2">列表2</a></li>
</ul>
<div id="content1">列表1内容:123456</div>
<div id="content2">列表2内容:abcdefgkijkl</div>

方案二、
.box{
    height:100px;
    overflow:hidden;
}
.list{
    width:200px;
    height:100px;
    line-height:100px;
}

<div class="box">
    <div class="list" id="one">1</div>
    <div class="list" id="two">2</div>
    <div class="list" id="three">3</div>
    <div class="list" id="four">4</div>
</div>
<div class="anchor">
    <a class="click" href="#one">1</a>
    <a class="click" href="#two">2</a>
    <a class="click" href="#three">3</a>
    <a class="click" href="#four">4</a>
</div>

2、CSS 变量（CSS Variable）

用法

// 声明一个变量：
:root{//页面根元素
  --bgColor:#000;
}
.main{
  background:var(--bgColor);
}

作用域

局部变量会在作用范围内覆盖全局

:root{
  --mainColor:red;
}

div{
  --mainColor:blue;
  color:var(--mainColor);
}
上面示例中最终生效的变量是 --mainColor:blue

另外值得注意的是 CSS 变量并不支持 !important 声明

CSS 变量的组合

<div></div>
:root{
  --word:"this";
  --word-second:"is";
  --word-third:"CSS Variable";
}

div::before{
  content:var(--word)' 'var(--word-second)' 'var(--word-third);
}

//结果 <div>this is CSS Variable</div>

CSS 变量与计算属性 calc( )

:root{
  --margin: 10px;
}

div{
  text-indent: calc(var(--margin)*10)
}
最终结果是 text-indent:100px 

CSS 变量的用途

精简代码，减少冗余，响应式媒体查询的好帮手

:root { 
  --mainWidth:1000px;
  --leftMargin:100px;
}

.main {
  width: var(--mainWidth);
  margin-left: var(--leftMargin);
}

@media screen and (min-width:1480px) {
    :root { 
      --mainWidth:800px;
      --leftMargin:50px;
    }
}

方便的从 JS 中读/写，统一修改

:root{
  --testMargin:75px;
}

//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable = root.getPropertyValue('--testMargin').trim();

console.log(cssVariable); // '75px'

// 写入
document.documentElement.style.setProperty('--testMargin', '100px');

3、css命名规范

• 布局：以 g 为命名空间，例如：g-wrap 、g-header、g-content
• 状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：s-current、s-selected
• 工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis
• 组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu
• 钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open

BEM 命名规范 – 块（block）、元素（element）、修饰符（modifier）

• 这个 Block 并非 inline-block 里的 block，而是所有东西都划分为一个独立的模块，block 是可以相互嵌套的
• 「元素」是块中的一部分，具有某种功能
• 「修饰符」则表示块或元素的一些状态，如 hover、active 和 disabled 等

类似于：

.block{}
.block__element{}
.block--modifier{}

4、vw and vh

1vw 等于1/100的视口宽度 （Viewport Width）
1vh 等于1/100的视口高度 （Viewport Height）

综上，一个页面而言，它的视窗的高度就是 100vh，宽度就是 100vw 。

5、利用 CSS 的 content 属性 attr 抓取资料

div:hover:after{
    content:attr(data-msg);
    border:1px solid green;
}
<div data-msg="我显示出来喽">鼠标悬浮</div>

6、利用 :valid 和 :invalid 来做表单即时校验

• :required 伪类指定具有required 属性的表单元素
• :valid 伪类指定一个通过匹配正确的所要求的表单元素
• :invalid 伪类指定一个不匹配指定要求的表单元素

input:valid{
    background: #666;
}
input:invalid {
        background: #999;  
}

<input type="email" required placeholder="请输入邮箱">

7、让文字竖着显示

{
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}

8、鼠标悬浮，内容自动撑开

.bd {
  max-height:0;
  overflow:hidden;
  transition: all 1s ease-out;
}
li:hover .bd {
  max-height: 600px;
  transition-timing-function: ease-in;
}
<ul>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
</ul>

9、实现文字两端对齐

div{
    width:100px;
    text-align-last: justify;
}

10、移动web页面支持弹性滚动

需求：在IOS机型中，非body元素的滚动条会非常不流畅，又不想用JS模拟滚动条

body{
    -webkit-overflow-scrolling: touch; /* ios5+ */
}
ele{
    overflow:auto;
}
-webkit-overflow-scrolling属性具有继承效果，所以在 body 上设置即可，这样局部滚动条就非常的流畅了。

11、改变浏览器radio自带的图标

//radio
    .radio-icon {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid green;
        vertical-align: middle;
        margin: 0 5px 0 15px;
        border-radius: 50%;
    }

    input[type="radio"]:checked+.radio-icon {
        box-shadow: 0 0 7px green;
        padding: 2px;
        background-color: green;
        background-clip: content-box;
    }
<div class="radio-choose">
    <label>
        <input type="radio" name="radioName" id="one" hidden/>
        <label for="one" class="radio-icon"></label>
        <span class="radio-name">前端工程师</span>
    </label>
    <label>
        <input type="radio" name="radioName" id="two" hidden/>
        <label for="two" class="radio-icon"></label>
        <span class="radio-name">后端工程师</span>
    </label>
</div>

//checkbox
.checkbox-choose {
    font-size: 0;
}
.checkbox-name {
    vertical-align: middle;
    font-size: 16px;
}
.checkbox-icon {
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border: 1px solid green;
    display: inline-block;
    margin: 0 3px 0 15px;
    vertical-align: middle;
}
input[type="checkbox"]:checked+.checkbox-icon::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: green!important;
}

<div class="checkbox-choose">
    <input type="checkbox" name="checkboxName" id="one" hidden/>
    <label for="one" class="checkbox-icon"></label>
    <span class="checkbox-name">苹果</span>

    <input type="checkbox" name="checkboxName" id="two" hidden />
    <label for="two" class="checkbox-icon"></label>
    <span class="checkbox-name">香蕉</span>
</div>

12、改变 input 焦点光标的颜色

<input value="This field uses a default caret." />
<input class="custom" value="I have a custom caret color!" />

input.custom {
  caret-color: red;
}

此文借鉴了CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

13、页面顶部阴影

 body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}

14、图片变成黑白色

 img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
 }