css开发技巧（部分结合sass使用）-Toy模板网

这篇具有很好参考价值的文章主要介绍了css开发技巧（部分结合sass使用）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css 开发技巧

一、css 选择器

基础选择器

选择器	别名	说明	版本	常用
tag	标签选择器	指定类型的标签	1	√
#id	ID 选择器	指定 id 的标签	1	√
.class	类选择器	指定类名的标签	1	√
*	通配选择器	所有类型的标签	2	√
div p	后代选择器	元素的所有后代元素	1	√
div>p	子代选择器	所有父级是 div 元素的 p 元素	2	√
div1+div2	相邻同胞选择器	div1 元素后面相邻的兄弟元素 div2	2	√
div~p	通用同胞选择器	div 元素后面的兄弟元素 p	3	√
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;
}

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

结构选择器

选择器	说明	版本	常用
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)中仅有一个元素，且是元素 p	3	√
p:nth-of-type(n)	p 标签中指定顺序的兄弟元素	3	√
p:nth-last-of-type(n)	p 标签中指定逆序的兄弟元素	3	×
p:first-of-type	p 标签中为首的标签	3	√
p:last-of-type	p 标签中为尾标签	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>
  <p title="one">111111</p>
  <p title="tow one">22222</p>
  <p title="oneeenn">33333</p>
  <p title="eeeoneen">44444</p>
  <p title="rrwwone">55555</p>
  <p title="two">66666</p>
</div>

伪元素选择器

选择器	说明	版本	常用
::before	在元素前插入的内容	2	√
::after	在元素后插入的内容	2	√
::placeholder	表单元素的占位	4	√

css 权重优先级：!important > 行内样式 > ID 选择器 > 类选择器(包括属性选择器、伪类) > 标签选择器 > 通配符* > 继承 > 浏览器默认属性

二、常见样式布局

居中布局

flex + margin

<div class="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 实现文字两端对齐

<ul class="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()

<div data-title="使用:not()去除无用属性">
  <ul class="cleared-attr">
    <li class="first-line">
      <span>AAA</span>
      <span>BBB</span>
      <span>CCC</span>
      <span>DDD</span>
      <span>EEE</span>
    </li>
    <li class="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 实现向右对齐

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

<div data-title="使用max-height切换自动高度">
  <ul class="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 根据主题颜色自定义光标颜色

<div data-title="使用:valid和:invalid校验表单内容">
  <form class="form-validation">
    <div>
      <label>名字</label>
      <input
        type="text"
        placeholder="请输入你的名字(1到4个中文)"
        pattern="^[\u4e00-\u9fa5]{1,4}$"
        required
      />
    </div>
    <div>
      <label>手机号</label>
      <input type="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

<div class="triangle"></div>

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

自定义 title 提示框

attr + data-

<div class="hover-tips">
  <p data-name="中国红"></p>
  <p data-name="罗兰紫"></p>
  <p data-name="箩底橙"></p>
  <p data-name="姣婆蓝"></p>
  <p data-name="嫩叶青"></p>
  <p data-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

<div data-title="迭代计数器">
  <div class="iterative-counter">
    <ul>
      <li>
        <input id="angular" type="checkbox" />
        <label for="angular">Angular</label>
      </li>
      <li>
        <input id="react" type="checkbox" />
        <label for="react">React</label>
      </li>
      <li>
        <input id="vue" type="checkbox" />
        <label for="vue">Vue</label>
      </li>
    </ul>
    <p class="count" data-unit="个">框架：</p>
    <p class="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()

<div data-title="滚动指示器">
  <div class="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

<div data-title="圆角进度条">
  <div class="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

<div data-title="加载指示器">
  <div class="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

<div data-title="标签导航">
  <div class="tab-navbar">
    <input id="tab1" type="radio" name="tabs" hidden checked />
    <input id="tab2" type="radio" name="tabs" hidden />
    <input id="tab3" type="radio" name="tabs" hidden />
    <input id="tab4" type="radio" name="tabs" hidden />
    <nav>
      <label for="tab1">标题1</label>
      <label for="tab2">标题2</label>
      <label for="tab3">标题3</label>
      <label for="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;
    }
  }
}