devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css爆炸式操作_document.documentelement.style.setproperty('--them

作者：花生_TL007 | 2024-02-15 13:09:30

赞

踩

document.documentelement.style.setproperty('--theme-background-color--', 're

本文介绍有关css的一些技巧以及一些比较另类的用法，有些情景完全可以避开使用Javascript，单纯的css就可以完美实现

更新日志

2018-08-10

  1. 修改基础的 9.禁用鼠标事件、移动端禁止图片长按保存功能
  2. 新增基础的 20.横竖屏匹配
  3. 新增基础的 21.硬件加速
  4. 新增基础的 22.移动端屏幕旋转时，字体大小不改变
  5. 新增基础的 23.Animation动画结束时，保持该状态不变
  6. 新增伪类、伪元素的 20.移动端Android设备上去掉语音输入按钮
  7. 新增伪类、伪元素的 21.去掉input，type为search时自带的清空按钮

一、基础

1. 复位
推荐大家使用reset.css

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }

2. 重置表单样式
移除各个浏览器之间的差异性，然后自定义样式

  1. input, button, select, textarea {
  2.   appearance: none;
  3.   -webkit-appearance: none;
  4.   -moz-appearance: none;
  5.   outline: none;
  6.   border: none;
  7. }

3. 变量

  1. /* 将变量声明到全局 */
  2. :root {
  3.   --theme_color: red
  4. }
  5.  
  6. /* 使用变量，参数2为当未找到变量--theme_color时所使用的值 */
  7. body {
  8.   color: var(--theme-color, '#000')
  9. }
  10.  
  11. /* 将变量声明到局部, 只能在elem的子节点中使用*/
  12. .selector {
  13.   --color: black
  14. }
  15.  
  16. .selector span {
  17.   color: var(--color)
  18. }

// 4. 题外话，Javascript如何操作css变量

  1. // 操作全局变量
  2. document.documentElement.style.setProperty('--theme_color', 'blue');
  3.  
  4. // 操作局部变量，如果有两个selector，那么现在只设置了第一个的selector，不影响第二个selector的变量
  5. document.querySelectorAll(selector)[0].style.setProperty('--color', 'blue');

5. 边距盒子

使盒子的width，height包括内容、边框、内边距，不包括边距，经常遇到宽度100%，但是有padding的时候会溢出

  1. .border-box {
  2.   box-sizing: border-box
  3. }

6. 计算函数
注意，减号、加号运算符首尾必须要有空格

  1. .selector {
  2.   width: calc(100% / 3 * 2 - 5px + 10px)
  3. }

6. 为body设置行高，不必为其他元素设置，文本元素很容易继承body样式

  1. body {
  2.   line-height: 1.5
  3. }

7. 使用SVG图标
SVG的好处就不多说了吧

  1. .logo {
  2.   background: url('logo.svg')
  3. }

8. 字体大小根据不同视口进行调整

不用写Javascript了

  1. :root {
  2.   font-size: calc(2vw + 1vh)
  3. }
  4.  
  5. body {
  6.   font-size: 1rem
  7. }

9. 禁用鼠标事件、移动端禁止图片长按保存功能

  1. /* PC、移动端都禁止点击事件 */
  2. .no-events {
  3.   pointer-events: none
  4. }
  5.  
  6. /* 移动端禁止长按呼出菜单 */
  7. .no-callout {
  8.   -webkit-touch-callout: none
  9. }

10. 移动端禁止用户长按文字选择功能

  1. .unselect {
  2.   -webkit-touch-callout:none;
  3.   -webkit-user-select:none;
  4.   -khtml-user-select:none;
  5.   -moz-user-select:none;
  6.   -ms-user-select:none;
  7.   user-select:none
  8. }

11. 文字模糊

  1. .blur {
  2.   color: transparent;
  3.   text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
  4. }

12. 文字渐变

  1. .text-gradient {
  2.   background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(63, 52, 219)), to(rgb(233, 86, 86)));
  3.   -webkit-background-clip: text;
  4.   -webkit-text-fill-color: transparent
  5. }

13. 背景渐变兼容性写法

  1. .gradient {
  2.   background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  3.   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  4.   background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  5.   background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  6.   background: -o-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  7.   background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0)))
  8. }

14. 为手持设备定制特殊样式

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

15. 不换行、自动换行、强制换行
不换行一般用再溢出时显示省略号，强制换行一般用在有特殊字符、英文单词的时候

  1. p {
  2.   /* 不换行 */
  3.   white-space: nowrap;
  4.  
  5.   /* 自动换行 */
  6.   word-wrap: break-word;
  7.   word-break: normal;
  8.  
  9.   /* 强制换行 */
  10.   word-break: break-all;
  11. }

16. 超出N行显示省略号

  1. .hide-text-n {
  2.   display: -webkit-box;
  3.   -webkit-box-orient: vertical;
  4.   -webkit-line-clamp: n;
  5.   overflow: hidden
  6. }

17. 移动端顺畅滚动

  1. .scroll-touch {
  2.   -webkit-overflow-scrolling: touch
  3. }

18. 多张背景图

  1. body {
  2.   background: url() no-repeat left center / 1rem, url() no-repeat right center / 1rem
  3. }

19. Iphone相册标题吸顶

html

  1. <ul class="sticky-list">
  2.   <!-- n个sticky-item -->
  3.   <li class="sticky-item">
  4.     <div class="title">2018年8月1日</div>
  5.     <ul class="photo-list">
  6.       <!-- n个photo-item -->
  7.       <li class="photo-item">
  8.         <img src="timg.jpg">
  9.       </li>
  10.     </ul>
  11.   </li>
  12. </ul>

scss

  1. .sticky-list {
  2.   .sticky-item {
  3.     .title {
  4.       position: -webkit-sticky;
  5.       position: sticky;
  6.       top: 0;
  7.       padding: .5rem;
  8.       background-color: #fff;
  9.     }
  10.   }
  11.   .photo-list {
  12.     display: flex;
  13.     flex-wrap: wrap;
  14.     padding: .5rem;
  15.     padding-bottom: 0;
  16.     .photo-item {
  17.       flex-basis: 19%;
  18.       margin-right: 1%;
  19.       margin-bottom: 1%;
  20.       &:last-child {
  21.         margin-right: 0;
  22.       }
  23.       img {
  24.         display: block;
  25.         width: 100%;
  26.       }
  27.     }
  28.   }
  29. }

20. 横竖屏匹配

  1. /* 竖屏时样式 */
  2. @media all and (orientation:portrait) {
  3.   body::after {
  4.       content: '竖屏'
  5.     }
  6. }
  7.  
  8. /* 横屏时样式 */
  9. @media all and (orientation:landscape) {
  10.     body::after {
  11.       content: '横屏'
  12.     }
  13. }

21. 硬件加速
写transition、animation时，请用transform代替left、top等属性，从而使动画更流畅

  1. .cube {
  2.   -webkit-transform: translateZ(0);
  3.   -moz-transform: translateZ(0);
  4.   -ms-transform: translateZ(0);
  5.   -o-transform: translateZ(0);
  6.   transform: translateZ(0)
  7. }

22.移动端屏幕旋转时，字体大小不改变

  1. html, body, form, p, div, h1, h2, h3, h4, h5, h6 {
  2.  -webkit-text-size-adjust: 100%;
  3.  -ms-text-size-adjust: 100%;
  4.  text-size-adjust: 100%
  5. }

23.Animation动画结束时，保持该状态不变

animation-fill-mode: forwards;

二、伪类、伪元素

1. 当a标签没有文本内容，但有 href 属性的时候，显示它的 href 属性

  1.  /* href为标签上的property，可以换成任何一个 */
  2. a[href^='http']:empty::after {
  3.   content: attr(href)
  4. }
  5.  
  6.  /* 字符串拼接 */
  7. a:empty::after {
  8.   content: "("attr(href)")"
  9. }

2. 用户点击反馈

 

 

  1. .btn:active {
  2.   opacity: .7;
  3.   /* background-color: #f1f1f1 */
  4. }

3. 移动端pointer型元素(a,button或者手动cursor: pointer的元素)点击去除高光

  1. * {
  2.   -webkit-tap-highlight-color: transparent
  3. }

4. 清除浮动

  1. .clearfix::after {
  2.   content: '';
  3.   display: block;
  4.   height: 0;
  5.   visibility: hidden;
  6.   clear: both
  7. }

5. 最后一个元素不需要边框、边距等

  1. ul > li:not(:last-child) {
  2.   border-bottom: 1px solid #c5b7b7
  3. }

6. 基数项、偶数项、倍数分组项

  1. /* 基数 */
  2. .selector:nth-child(2n-1) {}
  3.  
  4. /* 偶数 */
  5. .selector:nth-child(2n) {}
  6.  
  7. /* 倍数分组项 */
  8. .selector:nth-child(3n+1) {} /* 匹配第1、4、7、10... */
  9. .selector:nth-child(3n+5) {} /* 匹配第5、8、11、14... */
  10. .selector:nth-child(5n-1) {} /* 匹配第4、9、13、17... */

5. 逗号分隔列表

  1. ul > li:not(:last-child)::after {
  2.   content: ','
  3. }

6. 表单元素各种状态的设置

 

 

  1. /* Input、textarea设置placeholder文字的颜色（这里的placeholder是个伪元素，并不是伪类） */
  2. .selector::placeholder {
  3.   color: #666
  4. }
  5.  
  6. /* 设置表单元素获取焦点时的样式 */
  7. .selector:focus {
  8.   border: 1px solid #ebebeb
  9. }
  10.  
  11. /* 设置表单元素被禁止时的样式 */
  12. .selector:disabled {
  13.   background-color: #f1f1f1
  14. }
  15.  
  16. /* 设置checkbox、radio被选中时的样式 */
  17. .selector:checked {
  18.   background-color: #f1f1f1
  19. }

7. 将checkbox改造成switch组件（利用伪类checked状态）

checkbox:checked + ::after伪元素轻松实现

html

<input class='switch-component' type='checkbox'>

css

  1. /* 背景层 */
  2. .switch-component {
  3.   position: relative;
  4.   width: 60px;
  5.   height: 30px;
  6.   background-color: #dadada;
  7.   border-radius: 30px;
  8.   border: none;
  9.   outline: none;
  10.   -webkit-appearance: none;
  11.   transition: all .2s ease;
  12. }
  13.  
  14. /* 按钮 */
  15. .switch-component::after {
  16.   content: '';
  17.   position: absolute;
  18.   top: 0;
  19.   left: 0;
  20.   width: 50%;
  21.   height: 100%;
  22.   background-color: #fff;
  23.   border-radius: 50%;
  24.   transition: all .2s ease;
  25. }
  26.  
  27. /* 选中状态时，背景色切换 */
  28. .switch-component:checked {
  29.   background-color: #86c0fa;
  30.  }
  31.  
  32. /* 选中状态时，按钮的位置移动 */
  33. .switch-component:checked::after {
  34.   left: 50%;
  35. }

8. 美化破碎图像
每个浏览器效果都不一样，可以忽略

  1. img {
  2.   position: relative;
  3.   display: block;
  4.   width: 100%;
  5.   height: auto;
  6.   font-family: Helvetica, Arial, sans-serif;
  7.   font-weight: 300;
  8.   text-align: center;
  9.   line-height: 2
  10. }
  11.  
  12. /* 提示语 */
  13. img:before {  
  14.   content: "We're sorry, the image below is broken :(";
  15.   display: block;
  16.   margin-bottom: 10px
  17. }
  18.  
  19.  /* 显示图片url引用 */
  20. img:after {  
  21.   content: "(url: " attr(src) ")";
  22.   display: block;
  23.   font-size: 12px
  24. }

9. 隐藏没有静音、自动播放的影片

  1. video[autoplay]:not([muted]) {
  2.   display: none
  3. }

10. 首字、首行放大

 

  1. /* 首字放大 */
  2. p:first-letter {
  3.   font-size: 2rem
  4. }
  5.  
  6. /* 首行放大 */
  7. p:first-line {
  8.   font-size: 2rem
  9. }

11. a标签伪类设置顺序LVHA

  1. a:link {}
  2. a:visited {}
  3. a:hover {}
  4. a:active {}

12. 增强用户体验，使用伪元素实现增大点击热区

  1. .btn {
  2.   position: relative
  3. }
  4.  
  5. .btn::befoer{
  6.   content: "";
  7.   position: absolute;
  8.   top: -1rem;
  9.   right: -1rem;
  10.   bottom: -1rem;
  11.   left: -1rem
  12. }

13. 伪元素实现换行，替代换行标签

  1. .br::after{
  2.   content: "A";
  3.   white-space: pre
  4. }

14. 夜间模式

此方法是checkbox:checked + ~选择器 + css变量啦，此处的变量为局部变量，非常酷，大家可以自己加一些其他的变量，如文字的颜色

html

  1. <input class='switch-component' type='checkbox'>
  2. <div class="theme-container"></div>

css

  1. body,
  2. html {
  3.   margin: 0;
  4.   padding: 0;
  5.   height: 100%
  6. }
  7.  
  8. /* 省略switch-component的样式 */
  9.  
  10. .theme-container {
  11.   --theme_color: #fff; /* 主题色 */
  12.   width: 100%;
  13.   height: 100%;
  14.   background-color: var(--theme_color);
  15.   transition: background-color .2s ease
  16. }
  17.  
  18. .switch-component:checked + .theme-container {
  19.   --theme_color: #313131 /* 重置变量 */
  20. }

15. 感应用户聚焦区域

foucs-within表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点，上图则是.form-wrapper的候代元素input获得了焦点

  1. .form-wrapper:focus-within {
  2.   transition: all .2s ease;
  3.   transform: translateY(-1rem);
  4.   background-color: #f1f1f1;
  5. }

16. Tab切换

此方法为radio:checked + label + ~选择器，还有:foucs-within、:target方法，不过这两种方法实现起来比较复杂，而且还有一些Bug，本文不示范

html

  1. <!-- 默认选中第一个Tab -->
  2. <div class="container">
  3.   <input class="nav1" id="li1" type="radio" name="nav" checked>
  4.   <input class="nav2" id="li2" type="radio" name="nav">
  5.   <ul class='nav'>
  6.     <li>
  7.       <label for="li1">Tab1</label>
  8.     </li>
  9.     <li>
  10.       <label for="li2">Tab2</label>
  11.     </li>
  12.   </ul>
  13.   <ul class="content">
  14.     <li>Content1</li>
  15.     <li>Content2</li>
  16.   </ul>
  17. </div>

css

  1. input {
  2.   display: none
  3. }
  4.  
  5. .nav>li {
  6.   display: inline-block
  7.  }
  8.  
  9. /* tab按钮的默认样式 */
  10. .nav>li>label {
  11.   display: block;
  12.   padding: 1rem 2rem;
  13.   cursor: pointer
  14. }
  15.  
  16. /* content内容的默认样式 */
  17. .content>li {
  18.   display: none;
  19.   padding: 1rem;
  20.   animation: fade-out .5s cubic-bezier(0.075, 0.82, 0.165, 1)
  21. }
  22.  
  23. /* tab按钮选中的样式 */
  24. .nav1:checked~.nav li:first-child,
  25. .nav2:checked~.nav li:last-child {
  26.   background-color: #bf8963;
  27.   color: #fff
  28.  }
  29.  
  30. /* content显示的样式 */
  31. .nav1:checked~.content>li:first-child,
  32. .nav2:checked~.content>li:last-child {
  33.   display: block
  34. }
  35.  
  36. /* 调皮一下，写个动画 */
  37. @keyframes fade-out {
  38.   from {
  39.     transform: translateX(2rem);
  40.     opacity: 0
  41.   }
  42.   to {
  43.     transform: translateX(0);
  44.     opacity: 1
  45.   }
  46.  }

17. 当输入框的value的长度不为0时，显示搜索按钮

这里用到placeholder-shown伪类，简单来说就是当input标签有了placeholder属性并且内容不为空时，会触发该状态，但是当input标签有了value值之后，就会消除该状态，所以这里也要配合:not选择器

html

  1. <div class="input-line">
  2.   <input type="text" placeholder="请输入关键字进行搜索">
  3.   <button type="button" class="search-btn">搜索</button>
  4. </div>

css

  1. .search-btn {
  2.   opacity: 0;
  3.   transition: all .5s ease-in-out
  4. }
  5.  
  6.  input:not(:placeholder-shown)~.search-btn {
  7.   opacity: 1
  8.  }

18. input获取焦点时，上浮效果

  1. input {
  2.   appearance: none;
  3.   outline: none;
  4.   border: none;
  5.   padding: 1rem;
  6.   border-bottom: 1px solid #ebebeb;
  7.   transition: all .2s ease-in-out;
  8.  }
  9.  
  10. input:focus {
  11.   box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .1);
  12.   transform: translateY(-.5rem)
  13.  }

19. 菜单栏的弹性伸缩

跟夜间模式几乎一样，所以说，只要脑洞够大，什么效果都可以做的出来
html

  1. <div class="index">
  2.   <input type="checkbox" id="btn">
  3.   <label for="btn"></label>
  4.   <div class="menu"></div>
  5.   <div class="content">
  6.     <p>我是内容</p>
  7.   </div>
  8. </div>

css

  1. body,
  2. html {
  3.   height: 100%;
  4.   overflow-x: hidden;
  5. }
  6.  
  7. .index {
  8.   height: 100%;
  9. }
  10.  
  11. /* 菜单栏的初始样式 */
  12. .menu {
  13.   position: fixed;
  14.   top: 0;
  15.   left: 0;
  16.   width: 10rem;
  17.   height: 100%;
  18.   background-color: darkgrey;
  19.   transform: translateX(-10rem);
  20.   z-index: 1;
  21.   transition: all .2s ease-in;
  22. }
  23.  
  24.  /* 内容区的初始样式 */
  25.  .content {
  26.   display: flex;
  27.   justify-content: center;
  28.   align-items: center;
  29.   width: 100%;
  30.   height: 100%;
  31.   background-color: cornsilk;
  32.   transform: translateX(0);
  33.   transition: all .3s ease-in;
  34.  }
  35.  
  36.  input {
  37.   display: none;
  38. }
  39.  
  40.  /* 切换按钮的初始样式 */
  41.  label {
  42.   position: fixed;
  43.   top: 1rem;
  44.   left: 1rem;
  45.   z-index: 2;
  46.   transition: all .2s ease-in;
  47. }
  48.  
  49.  /* 切换按钮选中的样式 */
  50. input:checked~label {
  51.   left: 12rem;
  52. }
  53.  
  54. /* 切换按钮文字的切换样式 */
  55. input:not(:checked)~label::after {
  56.   content: '拉出'
  57. }
  58.  
  59. input:checked~label::after {
  60.   content: '收起'
  61. }
  62.  
  63. /* 菜单栏显示的样式 */
  64. input:checked~.menu {
  65.   transform: translateX(0)
  66. }
  67.  
  68.  /* 内容区显示的样式 */
  69. input:checked~.content {
  70.   transform: translateX(10rem)
  71.  }

20. 移动端Android设备上去掉语音输入按钮

  1. input::-webkit-input-speech-button {
  2.   display: none
  3. }

*21.去掉input，type为search时自带的清空按钮

  1. .search::-webkit-search-cancel-button {
  2.    display: none 
  3. }

三、布局

1. 使用FlexBox摆脱外边距的各种 hack

再也不用last-child { margin: 0 }

  1. ul {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4.   justify-content: space-between
  5. }
  6.  
  7. ul > li {
  8.   flex-basis: 23%;
  9.   height: 5rem;
  10.   background-color: #f1f1f1;
  11.   margin-bottom: 1rem
  12. }

2. 左右滑动

移动端上滑动丝滑要加-webkit-overflow-scrolling: touch

  1. .scroll-x {
  2.   display: flex;
  3.   width: auto;
  4.   overflow-x: auto;
  5.   -webkit-overflow-scrolling: touch
  6. }
  7.  
  8. .scroll-x > .scroll-x-item {
  9.   flex-shrink: 0;
  10.   margin-right: .5rem
  11. }

3. 绝对底部
内容高度不够时，元素显示在最底部，内容高度>100%时，元素撑在最底部（常用于Footer），注意这并不是Fixed定位

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6.  
  7. html {
  8.   height: 100%
  9.  }
  10.  
  11. body {
  12.   position: relative;
  13.   min-height: 100%;
  14.   padding: 0;
  15.   padding-bottom: 5rem
  16. }
  17.  
  18. .footer {
  19.   position: absolute;
  20.   bottom: 0
  21. }

不一定要以body为父元素，只要确保父元素的最小高度为100%就行

4. 左边固定，右边自适应
当然还有浮动的方法，这里介绍flexbox

  1. .flex {
  2.   display: flex
  3. }
  4.  
  5. .flex > .left {
  6.   width: 100px
  7.  }
  8.  
  9. .flex > .right {
  10.   flex: 1
  11.   }

5. 子元素高度auto时，使其全屏居中
一般用在dialog、toast...

  1. .all-center {
  2.   position: fixed;
  3.   display: flex;
  4.   width: 100%;
  5.   height: 100%;
  6.   justify-content: center;
  7.   align-items: center
  8. }


作者：白色风车kai
链接：http://www.imooc.com/article/51405
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/84738
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号