css开发技巧（部分结合sass使用）

css 开发技巧

一、css 选择器

基础选择器

选择器别名说明版本常用tag标签选择器指定类型的标签1√#idID 选择器指定 id 的标签1√.class类选择器指定类名的标签1√*通配选择器所有类型的标签2√div p后代选择器元素的所有后代元素1√div>p子代选择器所有父级是 div 元素的 p 元素2√div1+div2相邻同胞选择器div1 元素 后面相邻 的兄弟元素 div22√div~p通用同胞选择器div 元素 后面 的兄弟元素 p3√div,p并集选择器所有 div 元素和 p 元素1√div.class交集选择器指定类名的 div 元素1√

伪类选择器

选择器说明版本常用:not非指定条件的元素4√:active鼠标激活的元素1×:hover鼠标悬浮的元素1√:link未访问的链接元素1×:visited已访问的链接元素1×:valid输入合法的表单元素3√:invalid输入非法的表单元素3√:checked选项选中的表单元素3√:disabled事件禁用的表单元素3√:focus-within内部表单元素处于聚焦状态的元素4√:placeholder-shown确定元素是否显示占位符，可用于检查输入是否为空4√

input:placeholder-shown{border-color: pink;}input::placeholder{color: blue;}

<!-- 没有占位符时，可以传空字符串使样式生效 --><inputplaceholder=""/><inputplaceholder="输入框"/>

结构选择器

选择器说明版本常用p:empty无子元素(或文本节点)的 p 元素3√:nth-child(n)元素中指定顺序的兄弟元素(n 为正数是向后找)3√:nth-last-child(n)元素中指定逆序的兄弟元素(n 为负数是向前找)3×:first-child父元素中为首的子元素2√:last-child父元素中为尾的子元素3√p:only-child父元素(不包含 body)中仅有一个元素，且是元素 p3√p:nth-of-type(n)p 标签中指定顺序的兄弟元素3√p:nth-last-of-type(n)p 标签中指定逆序的兄弟元素3×p:first-of-typep 标签中为首的标签3√p:last-of-typep 标签中为尾标签3√p:only-of-type父元素(包括 body)中元素 p 是唯一的，可以有不是 p 的兄弟元素3√

<div><p>1111</p></div><div><span>3333</span><p>2222</p></div><p>444</p>

p:only-of-type{color: blue;}p:only-child{color: red;}

属性选择器

选择器说明版本常用[attr]指定属性的元素2√[attr=val]属性等于指定值的元素2√[attr*=val]属性含有指定值的元素3√[attr^=val]属性以指定值开头的元素3√[attr$=val]属性以指定值结尾的元素3√

/* [attr] 指定属性的元素 */[title]{color: blue;}/* [attr=val] 属性等于指定值的元素 */// [title=one] {//     color:red;// }/* [attr*=val] 属性含有指定值的元素*/// [title*=one] {//     color:green;// }/* [attr^=val] 属性以指定值开头的元素*/// [title^=one] {//     color:pink;// }/* [attr$=val] 属性以指定值结尾的元素*/// [title$=one] {//     color:orange;// }

<div><ptitle="one">111111</p><ptitle="tow one">22222</p><ptitle="oneeenn">33333</p><ptitle="eeeoneen">44444</p><ptitle="rrwwone">55555</p><ptitle="two">66666</p></div>

伪元素选择器

选择器说明版本常用::before在元素前插入的内容2√::after在元素后插入的内容2√::placeholder表单元素的占位4√
css 权重优先级：!important > 行内样式 > ID 选择器 > 类选择器(包括属性选择器、伪类) > 标签选择器 > 通配符* > 继承 > 浏览器默认属性

二、常见样式布局

居中布局

flex + margin

<divclass="center-layout"><div></div></div>

.center-layout{display: flex;width: 400px;height: 400px;background-color: #f66;div{margin: auto;width: 100px;height: 100px;background-color: #66f;}}

对齐两端文本

text-align-last 设置为 justify 实现文字两端对齐

<ulclass="justify-text"><li>账号</li><li>密码</li><li>手机号</li><li>电子邮件</li><li>通讯地址</li></ul>

.justify-text{li{padding: 0 20px;width: 100px;height: 40px;background-color: #f66;line-height: 40px;text-align-last: justify;color: #fff;& ~ li{margin-top: 10px;}}}

符号分割文字

:not()

<divdata-title="使用:not()去除无用属性"><ulclass="cleared-attr"><liclass="first-line"><span>AAA</span><span>BBB</span><span>CCC</span><span>DDD</span><span>EEE</span></li><liclass="second-line"><span>AAA</span><span>BBB</span><span>CCC</span><span>DDD</span><span>EEE</span></li></ul></div>

.cleared-attr{li{height: 40px;line-height: 40px;}span{display: inline-block;color: #66f;&:hover{text-decoration: underline;}}.first-line span:not(:last-child)::after{content:',';}.second-line span:not(:nth-child(-n + 3)){display: none;}}

左右横向布局

margin 使用 flexbox 横向布局时，最后一个元素通过 margin-left:auto 实现向右对齐

<divclass="bruce flex-ct-y"data-title="使用margin排版凸显布局"><divclass="highlight-list left"><p>Alibaba</p><p>Tencent</p><p>Baidu</p><p>Jingdong</p><p>Ant</p><p>Netease</p></div><divclass="highlight-list right"><p>Alibaba</p><p>Tencent</p><p>Baidu</p><p>Jingdong</p><p>Ant</p><p>Netease</p></div></div>

.highlight-list{display: flex;align-items: center;padding: 0 10px;width: 600px;height: 60px;background-color: #3c9;& + .highlight-list{margin-top: 10px;}p{padding: 0 10px;height: 40px;background-color: #3c9;line-height: 40px;font-size: 16px;color: #fff;}&.left p{& ~ p{margin-left: 10px;}&:last-child{margin-left: auto;}}&.right p{& ~ p{margin-left: 10px;}&:first-child{margin-right: auto;}}}

折叠面板

max-height

<divdata-title="使用max-height切换自动高度"><ulclass="auto-height"><li><h3>列表1</h3><p>内容1<br/>内容2<br/>内容3<br/>内容4</p></li><li><h3>列表2</h3><p>内容1<br/>内容2<br/>内容3<br/>内容4</p></li><li><h3>列表3</h3><p>内容1<br/>内容2<br/>内容3<br/>内容4</p></li></ul></div>

.auto-height{width: 300px;li{cursor: pointer;& ~ li{margin-top: 5px;}&:hover p{border-bottom-width: 1px;max-height: 600px;}}h3{padding: 0 20px;height: 40px;background-color: #f66;cursor: pointer;line-height: 40px;font-size: 16px;color: #fff;margin: 0;}p{overflow: hidden;padding: 0 20px;border: 1px solid #f66;border-top: none;border-bottom-width: 0px;max-height: 0;line-height: 30px;transition: all 500ms;margin: 0;}}

自定义光标颜色

通过 caret-color 根据主题颜色自定义光标颜色

<divdata-title="使用:valid和:invalid校验表单内容"><formclass="form-validation"><div><label>名字</label><inputtype="text"placeholder="请输入你的名字(1到4个中文)"pattern="^[\u4e00-\u9fa5]{1,4}$"required/></div><div><label>手机号</label><inputtype="text"placeholder="请输入你的手机号"pattern="^1[3456789]\d{9}$"required/></div><div><label>简介</label><textarea></textarea></div></form></div>

.form-validation{width: 500px;div + div{margin-top: 10px;}label{display: block;padding-bottom: 5px;font-weight: bold;font-size: 16px;}input,
  textarea{display: block;padding: 0 20px;border: 1px solid #ccc;width: 100%;height: 40px;outline: none;caret-color: #09f;transition: all 300ms;&:focus:valid{border-color: #3c9;}&:invalid{border-color: #f66;}&:required{background-color: #eee;}}textarea{height: 122px;resize: none;line-height: 30px;font-size: 16px;}}

绘制三角形

border

<divclass="triangle"></div>

.triangle{border: 50px solid transparent;border-left-color: #f66;width: 0;height: 0;}

自定义 title 提示框

attr + data-

<divclass="hover-tips"><pdata-name="中国红"></p><pdata-name="罗兰紫"></p><pdata-name="箩底橙"></p><pdata-name="姣婆蓝"></p><pdata-name="嫩叶青"></p><pdata-name="大地绿"></p></div>

$color-list: #f66 #66f #f90 #09f #9c3 #3c9;.hover-tips{margin-top: 100px;display: flex;justify-content: space-between;width: 200px;p{position: relative;padding: 2px;border: 2px solid transparent;border-radius: 100%;width: 24px;height: 24px;background-clip: content-box;cursor: pointer;transition: all 300ms;&::before,
    &::after{position: absolute;left: 50%;bottom: 100%;opacity: 0;transform:translate3d(0, -30px, 0);transition: all 300ms;}&::before{margin: 0 0 12px -35px;border-radius: 5px;width: 70px;height: 30px;background-color:rgba(#000, 0.5);line-height: 30px;text-align: center;color: #fff;content:attr(data-name);}&::after{margin-left: -6px;border: 6px solid transparent;border-top-color:rgba(#000, 0.5);width: 0;height: 0;content:'';}@each $color in $color-list{
      $index:index($color-list, $color);&:nth-child(#{$index}){background-color: $color;&:hover{border-color: $color;}}}&:hover{&::before,
      &::after{opacity: 1;transform:translate3d(0, 0, 0);}}}}

迭代计数器

counter

<divdata-title="迭代计数器"><divclass="iterative-counter"><ul><li><inputid="angular"type="checkbox"/><labelfor="angular">Angular</label></li><li><inputid="react"type="checkbox"/><labelfor="react">React</label></li><li><inputid="vue"type="checkbox"/><labelfor="vue">Vue</label></li></ul><pclass="count"data-unit="个">框架：</p><pclass="weight"data-unit="%">权重：</p></div></div>

.iterative-counter{ul{/* 定义计数器的递增量 */counter-reset: index 0 count 0 weight 0;}li{display: flex;position: relative;align-items: center;counter-increment: index 1;&::before{/* 调用计数器值 */content:counter(index)'、';}& + li{margin-top: 10px;}}input{overflow: hidden;position: absolute;width: 0;height: 0;opacity: 0;&:checked + label::before{color: #3c9;content:'\2713';}}label{display: flex;align-items: center;height: 20px;&::before{margin-right: 5px;border: 1px solid #3c9;width: 20px;height: 20px;cursor: pointer;line-height: 20px;text-align: center;color: transparent;content:'';transition: all 300ms;}}p{margin-top: 10px;&.count::after{/* 调用计数器值 */content:counter(count)attr(data-unit);}&.weight::after{/* 调用计数器值 */content:counter(weight)attr(data-unit);}}}#angular:checked{counter-increment: count 1 weight 20;}#react:checked{counter-increment: count 1 weight 50;}#vue:checked{counter-increment: count 1 weight 30;}

内容滚动进度条

calc()

<divdata-title="滚动指示器"><divclass="scroll-indicator"><div><article><h1>2019中国互联网企业100强榜单</h1><p>
          8月14日，中国互联网协会、工业和信息化部网络安全产业发展中心（工业和信息化部信息中心）在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴（中国）有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。
        </p><p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面，主要呈现出六大特点：</p><p>
          一是整体规模跨越式提升，成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元，比2018年互联网百强企业互联网业务收入增长超过1万亿元，占我国数字经济的比重达8.8%，对数字经济的贡献率达14%，带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看，有86家企业互联网业务收入实现增长。
        </p><p>
          二是研发投入强度突破10%，打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元，同比增长45.1%，平均研发强度突破10%，比我国R&D经费投入强度高出近8个百分点。从研发强度分布看，有40家企业研发强度在10%以上，4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术，互联网百强企业不断提升原始创新能力，加快推进5G、人工智能、云计算、大数据等关键核心技术突破，部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项，其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家，云计算28家，人工智能相关企业24家，运用物联网技术相关的企业3家。
        </p><p>
          三是应用场景多元化，智能+打造生活消费新模式。互联网百强企业深化消费互联网发展，已对衣、食、住、行等各方面进行了全场景覆盖，业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域，全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家；涉及互联网公共服务的共41家，主要提供信息查询、教育医疗、政务办理、公共出行等便民服务，让普通人民享受到“互联网+”带来的便利生活；21家企业涉及音乐与视频业务。同时，互联网百强企业积极发展智能产业，不断拓展“智能+”，创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景，打造未来智能生活消费新模式。
        </p><p>
          四是工业互联网入实践深耕，赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”，推动云计算、大数据、物联网等信息通信技术与实体经济深入融合，培育新产业、新业态、新模式，支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高，以服务实体经济客户为主的产业互联网领域企业数量达到60家，累计服务近4000万家企业。其中，涉及互联网数据服务41家，生产制造服务13家，科技创新和知识产权24家，B2B电商11家，互联网基础服务10家。
        </p><p>
          五是“独角兽”
          企业快速增长，国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业，同比增长38.9%，业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看，2018年，全球互联网公司市值前三十强中互联网百强企业占10家，其中，腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。
        </p><p>
          六是覆盖地域实现新扩展，网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个，在2018年基础上新增江西和山东两个省份，地域覆盖不断增加。在区域分布上，东部地区互联网百强企业数量共86家，中西部地区互联网百强企业共12家，东北地区互联网百强企业数量保持2家。其中，安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加，较去年增长1家。互联网百强企业积极践行企业社会责任，发挥互联网在助推脱贫攻坚中的作用，探索“直播+电商”等扶贫新模式，推进精准扶贫、精准脱贫。据统计，超过一半以上互联网百强企业参与网络扶贫。
        </p></article></div></div></div>

.scroll-indicator{overflow: hidden;position: relative;border: 1px solid #66f;width: 500px;height: 300px;&::after{position: absolute;left: 0;right: 5px;top: 2px;bottom: 0;background-color: #fff;content:'';}div{overflow: auto;height: 100%;&::-webkit-scrollbar{width: 5px;}&::-webkit-scrollbar-track{background-color: #f0f0f0;}&::-webkit-scrollbar-thumb{border-radius: 2px;background-color: #66f;}}article{padding: 0 20px;background:linear-gradient(to right top, #f66 50%, #f0f0f0 50%) no-repeat;background-size: 100% calc(100% - 298px + 5px);> *{position: relative;z-index: 9;}}h1{line-height: 40px;text-align: center;font-size: 20px;}p{margin-top: 20px;line-height: 20px;text-indent: 2em;}}

圆角进度条

background + border-radius

<divdata-title="圆角进度条"><divclass="fillet-progressbar"></div></div>

@mixin progress-bar($width: 100px,$height: 10px,$color: #f66,$percent:0){
  border-radius: $height /2;width: $width;height: $height;
  background-color: #ccc;
  background-image: radial-gradient(
      closest-side circle at $percent,
      $color,
      $color 100%,
      transparent
    ), linear-gradient($color, $color);
  background-repeat: no-repeat;
  background-size:100%, $percent;}.fillet-progressbar {
  @include progress-bar(500px, 10px, #66f,50%);}

加载中…

animation

<divdata-title="加载指示器"><divclass="loading-indicator">加载中<span></span></div></div>

.loading-indicator {
  font-size: 16px;color: #09f;

  span {display: inline-block;overflow: hidden;height: 1em;
    line-height:1;
    vertical-align:-0.25em;&::after {display: block;
      white-space: pre-wrap;/* \A 使content中的内容换行 */content:'...\A..\A.';/* step-start 使动画不连续*//* both：该过渡方式会使动画的变化先快后慢，再慢后快 */animation: loading 3s infinite step-start both;}}}

@keyframes loading {33%{/* translate3d(x,y,z) 分别代表要移动的轴的方向的距离 */// transform: translate3d(0, -2em, 0);transform:translateY(-2em);}66%{// transform: translate3d(0, -1em, 0);transform:translateY(-1em);}}

三、拓展

标签导航栏

input + label

<divdata-title="标签导航"><divclass="tab-navbar"><inputid="tab1"type="radio"name="tabs"hiddenchecked/><inputid="tab2"type="radio"name="tabs"hidden/><inputid="tab3"type="radio"name="tabs"hidden/><inputid="tab4"type="radio"name="tabs"hidden/><nav><labelfor="tab1">标题1</label><labelfor="tab2">标题2</label><labelfor="tab3">标题3</label><labelfor="tab4">标题4</label></nav><main><ul><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li></ul></main></div></div>

.active{background-color: #3c9;color: #fff;}.tab-navbar{display: flex;overflow: hidden;flex-direction: column-reverse;border-radius: 10px;width: 300px;height: 400px;input{&:nth-child(1):checked{& ~ nav label:nth-child(1){@extend .active;}& ~ main ul{background-color: #f66;transform:translate3d(0, 0, 0);}}&:nth-child(2):checked{& ~ nav label:nth-child(2){@extend .active;}& ~ main ul{background-color: #66f;transform:translate3d(-25%, 0, 0);}}&:nth-child(3):checked{& ~ nav label:nth-child(3){@extend .active;}& ~ main ul{background-color: #f90;transform:translate3d(-50%, 0, 0);}}&:nth-child(4):checked{& ~ nav label:nth-child(4){@extend .active;}& ~ main ul{background-color: #09f;transform:translate3d(-75%, 0, 0);}}}nav{display: flex;height: 40px;background-color: #f0f0f0;line-height: 40px;text-align: center;label{flex: 1;cursor: pointer;transition: all 300ms;}}main{flex: 1;ul{display: flex;flex-wrap: nowrap;width: 400%;height: 100%;transition: all 300ms;margin: 0;}li{display: flex;justify-content: center;align-items: center;flex: 1;font-weight: bold;font-size: 20px;color: #fff;}}}

div 元素画各种图形