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%); }