CSS+Vue應(yīng)用

CSS

微軟雅黑寫(xiě)法

“微軟雅黑”使用英文“Microsoft YaHei”

div{font-family:”Microsoft YaHei”}
內(nèi)部陰影 css3 -- box-shadow
  • box-shadow: h-shadow v-shadow blur spread color inset;
    | h-shadow | 必需。水平陰影的位置。允許負(fù)值。
    | v-shadow | 必需。垂直陰影的位置。允許負(fù)值。
    | blur | 可選。模糊距離。
    | spread | 可選。陰影的尺寸。
    | color | 可選。陰影的顏色。請(qǐng)參閱 CSS 顏色值。
    | inset | 可選。將外部陰影 (outset) 改為內(nèi)部陰影。 |
div
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px 30px 20px pink inset;
}
* 單側(cè)陰影
box-shadow:0 -1px 0 0 #FFF inset;

image.png

http://www.divcss5.com/css3-style/c727.shtml

偽元素（::after）
p::before{
    content: '';
    color: blue;
}

https://www.cnblogs.com/keyi/p/5943133.html
http://www.w3school.com.cn/tiy/t.asp?f=css3_image_gallery

滾動(dòng)條
隱藏滾動(dòng)條同時(shí)又可以滾動(dòng)
::-webkit-scrollbar {display:none}

https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html

  定義滾動(dòng)條軌道
  ::-webkit-scrollbar-track {
    background-color: #141935;
  }
  定義滾動(dòng)條滑塊
  ::-webkit-scrollbar-thumb {
    background-color: #141935;
  }

 例:
 .menus_list ::-webkit-scrollbar-thumb {
   background-color: rgba(0, 154, 255, .8);
 }

參考：https://www.cnblogs.com/vicky-li/p/css.html

border透明度（HSLA）
  • HSLA(H,S,L,A)
    H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。取值為：0 - 360
    S：Saturation(飽和度)。取值為：0.0% - 100.0%
    L：Lightness(亮度)。取值為：0.0% - 100.0%
    A：Alpha透明度。取值0~1之間。
    兼容性：不支持IE8及以下版本
例:
border-bottom:1px solid hsla(0,0%,100%,.3);

https://blog.csdn.net/It_rod/article/details/80615557

占位和不占位隱藏元素
不占位隱藏
display:none;   
占位隱藏
visibility:hidden;

參考：https://blog.csdn.net/BuquTianya/article/details/50771986

CSS換行和不換行
文字超出自動(dòng)換行
word-wrap: break-word; 
word-break: normal; 
強(qiáng)制不換行
white-space:nowrap;
強(qiáng)制英文單詞斷行
word-break:break-all;

https://blog.csdn.net/liuyan19891230/article/details/50969393

選取第幾個(gè)標(biāo)簽元素 （nth-child、first-child、last-child）
最后一個(gè)標(biāo)簽元素樣式
li:last-child{background:#090}

https://blog.csdn.net/zsg88/article/details/64165993/

指定父元素的最后一個(gè) p 元素
p:last-of-type {
  background:#ff0000;
}

http://www.w3school.com.cn/cssref/selector_last-of-type.asp

css鼠標(biāo)樣式cursor
<span style="cursor:pointer">Pointer</span>

https://blog.csdn.net/wangshiting/article/details/75661146

li 去掉小圓點(diǎn)及相關(guān)屬性
ul {list-style-type:none;}

https://blog.csdn.net/business122/article/details/7973638

頁(yè)面高度自適應(yīng) height:100%;
html,body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;  /*這里是關(guān)鍵*/
}

https://www.cnblogs.com/liaojie970/p/7260039.html

css3設(shè)置背景圖片的大小
/* 將背景圖片等比縮放填滿整個(gè)容器 */
 background-size:cover;

https://www.cnblogs.com/imguo/p/5772668.html

ipad橫豎屏切換，頁(yè)面適配方法
@media screen and (orientation: portrait) {
    /*豎屏 css*/
 }
@media screen and (orientation: landscape) {
    /*橫屏 css*/
}

https://blog.csdn.net/wangle_style/article/details/81101161

如何實(shí)現(xiàn)隱藏input的光標(biāo)（隱藏光標(biāo)，可正常輸入）
<style>
input{
  color:transparent;
  text-shadow:0 0 0 red;
}
</style>

https://blog.csdn.net/u010730897/article/details/72721960

input 選中狀態(tài) 樣式
input:focus { 
    color: #fff;
}
flex一系列屬性詳解

https://www.cnblogs.com/xianxianxxx/p/8086554.html

修改原生js 復(fù)選框的樣式
.export_custom input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 14px;position: relative;top: -1px;border-radius: 50%;}
.export_custom input[type="checkbox"]::before{content: "\2713";position: absolute;top: -2px;left: -2px;background: #cabdbd;color: #fff;width: 14px;height: 14px;border: none;border-radius: 50%;}
.export_custom input[type="checkbox"]:checked::before{content: "\2713";background-color: #F5A400;position: absolute;top: -2px;left: -2px;width:14px;height: 14px;border: none;color:#fff;font-size: 13px;border-radius: 50%;}

http://www.cnblogs.com/cloud-k/archive/2018/03/15/8572438.html

CSS 寬高度百分比數(shù)減去固定像素值的辦法（例：100%-20px）
height:calc(100% - 20px);
圖片在div中垂直居中
 img { vertical-align: middle; }

https://blog.csdn.net/qq_38071635/article/details/81068694

border影響元素寬高（box-sizing）
.item{
    width: 200px;
    height: 400px;
    border: 2px solid red;
    box-sizing: border-box;
}

https://blog.csdn.net/TalonZhang/article/details/84945411

CSS應(yīng)用

谷歌瀏覽器字體如何改到12px以下

解決辦法：利用css3的transform屬性

span {
         font-size: 12px;
         -webkit-transform-origin-x: 0; // 縮小后文字位置不變
         -webkit-transform: scale(0.90); // 縮小元素（文字隨之縮小）
}

https://blog.csdn.net/im_dogg/article/details/93891050h
https://blog.csdn.net/wkw1598727534/article/details/90692146

設(shè)置無(wú)效
原因：所在元素未設(shè)置寬高，無(wú)法縮放
解決辦法：給元素加寬高

span {
         display: inline-block;
         width: 100px;
         height: 20px;
         font-size: 12px;
         -webkit-transform-origin-x: 0;
         -webkit-transform: scale(0.90);
}
問(wèn)題：display: flex; 導(dǎo)致子元素寬度被壓縮

解決辦法：

width: 120px;
flex-shrink: 0; /* 用數(shù)值來(lái)收縮比例 默認(rèn)值為1 */

https://www.cnblogs.com/jisi2012/p/14521951.html

css中超出變?yōu)槭÷蕴?hào)：
超出一行顯示省略號(hào)
<style>
     div{
         width:100%;
         overflow: hidden;
         white-space:nowrap;
         text-overflow:ellipsis;
     }
</style>

超出多行顯示省略號(hào) （-webkit-line-clamp即為幾行）
<style>
    div {
      overflow:hidden; 
      text-overflow:ellipsis;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;  
    }
</style>

https://blog.csdn.net/Yiright/article/details/53230760

  • 不生效可能是高度問(wèn)題，解決辦法：
max-height: 60px;
white-space: normal;

https://www.php.cn/faq/509103.html

背景使用opacity設(shè)置透明度時(shí)，導(dǎo)致字體也出現(xiàn)透明的問(wèn)題解決
background-color：rgba(0, 0, 0, .7);

https://blog.csdn.net/gll77/article/details/79713082

鼠標(biāo)移入移出時(shí)改變樣式
  • CSS :hover 同級(jí)元素
#home:hover +.sign_out {
   display: block !important;
}

https://blog.csdn.net/shengjon/article/details/78050413

css 彈框遮罩層 (蒙版)

https://blog.csdn.net/Dzq_Boyka/article/details/80592346
https://blog.csdn.net/yunsiwl5/article/details/80365956

清除浮動(dòng)（子元素設(shè)置了float屬性后父元素高度為0）
<style type="text/css"> 
   .left{float:left;}
   .right{float:right;}
   /*給父元素設(shè)置  清除浮動(dòng)代碼*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
</style> 
<body>
  <div class="clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
  </div>
</body>

https://www.cnblogs.com/nxl0908/p/7245460.html

css使用精靈圖
span {
   width: 20px;
   height: 20px;
   background-image: url(icno.png);  //引用精靈圖
   background-size: 60px 40px;
   background-position: -20px -20px;
}

https://www.cnblogs.com/liaojie970/p/7260039.html

修改 <input type=file> 的樣式

input {opacity:0;}
隱藏input元素，點(diǎn)擊圖片時(shí)，調(diào)用input方法

https://blog.csdn.net/qq_32623363/article/details/80878408

css3 定時(shí)移動(dòng)
let leftnumber = 100
      let time = setInterval(function () {
        leftnumber -= 10
        $('#moveTable').css({left: leftnumber + '%'})
        if (leftnumber <= 0) {
          console.log(leftnumber)
          clearInterval(time)
        }
      }, 40)

https://blog.csdn.net/qq471011042/article/details/79339691

css實(shí)現(xiàn)自定義虛線邊框
#post .post_content .el-table td {
      border-bottom: 1px dashed transparent;
      background: linear-gradient(white,white) padding-box,
      repeating-linear-gradient(-45deg,#FFD786 0,#FFD786 0.2em,white 0,white 0.4em);
  }

https://www.cnblogs.com/libin-1/p/7096926.html

保證圖片在div中自適應(yīng)顯示，不變形
  • 解決方法：同時(shí)設(shè)置圖片的最大寬高為100%
max-width:100%;
max-height:100%;

https://blog.csdn.net/weixin_41863239/article/details/87713884

html中，td的寬度無(wú)法設(shè)置
  • 解決辦法：為td中的div設(shè)置寬度
<td><div>aaaa</div></td>
td div { width: 100px;}

https://www.jb51.net/web/166296.html

給移動(dòng)端頁(yè)面設(shè)置背景顏色后，整個(gè)屏幕填充背景色
html,body{
    margin:0;
    padding:0;
    outline:none;
    list-style:none;
    width:100%;
    height: 100%;
    background: #012145;
    font-family:"微軟雅黑";
}

https://blog.csdn.net/qq_32849999/article/details/82864255

網(wǎng)頁(yè)移動(dòng)端適配動(dòng)態(tài)修改頁(yè)面font-size

http://www.itdecent.cn/p/19c71db5fc9f
根據(jù)屏幕大小設(shè)置字體大小
https://www.cnblogs.com/syh119/p/9109572.html

使用writing-mode讓文字豎向排版

https://blog.csdn.net/clschen/article/details/51221371

移動(dòng)端最小最大寬度

在移動(dòng)端最小寬度是320px;在不考慮橫屏的情況下，就是414px。
https://www.cnblogs.com/zlj123/p/6257506.html

css背景圖充滿整個(gè)屏幕
.login{
  background-size:cover;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url("../../assets/login.png")no-repeat center center;
}
<div class="login"></div>

https://www.cnblogs.com/IT123/p/10882819.html

flex布局下的float
使用 ：margin-left: auto;（可以不用float了）

http://www.itdecent.cn/p/792aec32039f

css背景圖片自適應(yīng)
.login {
    background-image:url("../../assets/images/login/login.png");
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
  }
  • 瀏覽器支持：
    Firefox 3.6+ , Chrome 1.0+ , Opera 9.63+, IE9 +

https://zhidao.baidu.com/question/2080394442897317548.html

如何讓td內(nèi)容高度自適應(yīng)，與tr同高
<table>
    <tr>
        <td>
            aaaaaaaaaa<br />
            aaaaaaaaaa<br />
            aaaaaaaaaa<br />
            aaaaaaaaaa<br />
        </td>
        <td style="width: 200px; height: 0px;">
            <div style="background-color: #f00; width: 100%; height: 100%;"></div>
        </td>
    </tr>
</table>
  • td高度為0，里面的div高度為100%

https://bbs.csdn.net/topics/392566943

css處理瀏覽器輸入框記住賬號(hào)密碼后的背景色
input:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效時(shí)長(zhǎng)  過(guò)渡效果  啟用時(shí)延遲的時(shí)間
    }

https://blog.csdn.net/u011752272/article/details/66973367

CSS實(shí)現(xiàn)寬度自適應(yīng)100%，寬高16:9的比例的圖片或者矩形

https://www.cnblogs.com/yf-html/p/9626000.html

img 圖片在div里的垂直居中
  • 方法1：transform
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);

https://blog.csdn.net/qikule/article/details/83087729

  • 方法2：position
div {
    width: 200px;
    height: 200px;
    position: relative; 
}
img {
   width:80px;
　 height:50px;
   position:absolute;
　　top:0;
　　left:0;
　　right:0;
　　bottom:0;
　　margin:auto;//使其垂直居中
}

http://www.divcss5.com/css3-style/c56620.shtml

css3 calc()自適應(yīng)布局屬性 ---瀏覽器版本兼容性的問(wèn)題
height:calc(100% - 20px);
* 減號(hào)兩邊一定要打空格，不然會(huì)失效

https://blog.csdn.net/u011630575/article/details/49097205/
https://blog.csdn.net/qq_35771141/article/details/90598813

標(biāo)簽中識(shí)別空格
<div v-html="data" style="white-space:pre"></div>
  • 會(huì)根據(jù)代碼中的換行，展示對(duì)應(yīng)的樣式

https://blog.csdn.net/qq_36370731/article/details/78069056

在css中white-space屬性用來(lái)控制容器的文本中帶有空白符、制表符、換行符等的顯示，取值有：

  • normal：默認(rèn)，忽略文本中所有的空白、換行符；只有文本存在
    或文本達(dá)到框的約束時(shí)，文本才會(huì)換行
  • nowrap：和normal類似，忽略文本中所有的空白、換行符；遇到框的寬度約束時(shí)不會(huì)自動(dòng)換行，文本只有在有 br 時(shí)才會(huì)換行
  • pre：保留文本中的空白、換行符；遇到框的寬度約束時(shí)不會(huì)自動(dòng)換行，文本存在
    或文本中有換行符時(shí)，文本才會(huì)換行
  • pre-wrap：和pre類似，保留文本中的空白、換行符；文本存在
    或文本中有換行符時(shí)，或者遇到框的寬度約束時(shí)，文本都才會(huì)換行
  • pre-line：會(huì)略文本中的空白符；文本存在
    或文本中有換行符時(shí)，或者遇到框的寬度約束時(shí)，文本都才會(huì)換行
    https://blog.csdn.net/liuxiao723846/article/details/118994673
去掉textarea小三角，禁止調(diào)整大小
resize: none;

https://blog.csdn.net/qianqian901108_/article/details/52299634

實(shí)現(xiàn)圖片翻轉(zhuǎn)
transform:rotateY(180deg);

http://www.jq22.com/webqd1996

div禁用，不可點(diǎn)擊（只是樣式，實(shí)際操作，可以在點(diǎn)擊事件里加判斷）
<div :class="versionPage == 1?'notclick':''"></div>  

.notclick {
     cursor:not-allowed;
     opacity: 0.6;
}

https://blog.csdn.net/wyh_mwk/article/details/81777270
https://blog.csdn.net/Devio_001/article/details/90291984

輸入框的高度寬度，根據(jù)輸入內(nèi)容自適應(yīng)
 <div id="textarea_div1" contenteditable="true" v-html="form.make_demand" style="white-space: pre;">
  • 1、contenteditable="true" 將div寫(xiě)成可編輯，可輸入內(nèi)容
  • 2、直接綁定輸入值，v-html綁定值，可以獲取到回車等格式，設(shè)置為white-space: pre;可以按回車后的格式展示，寬高不定，可以設(shè)置最大寬度，也可以不設(shè)置，高度自適應(yīng)
  • 3、獲取值：this.form.make_demand = $('#textarea_div1').html()，存的數(shù)據(jù)為帶有樣式的字符串
    https://www.cnblogs.com/chenbeibei520/p/9802545.html
css3 動(dòng)畫(huà)平移效果
@keyframes changDeg{
      0%{
        transform:translate(0, 0);
      }
      50% {
        transform:translate(50px, -50px);
      }
      100%{
        transform:translate(0, 0);
      }
    }
    img {
        width: 100%;
        position: absolute;
        left: 0;
        animation:changDeg 30s linear 0s infinite;
    }

https://blog.csdn.net/wangzhneg123/article/details/87894305

父元素的寬度不定，隨子元素變化（讓父元素適應(yīng)子元素的寬高）
@media 響應(yīng)式媒體查詢
 /*屏幕大于1200排序（大屏幕電腦）*/
 @media screen and (min-width: 1200px){} 
/*屏幕在1024px到1199之間（中屏幕電腦）*/
 @media screen and (min-width: 1024px) and (max-width: 1199px){} 
/*屏幕在768px到1023之間（小屏幕-pad）*/
 @media screen and (min-width: 768px) and (max-width:1023px){}
 /*屏幕在480px到768之間（主要是手機(jī)屏幕）*/ 
@media screen and (max-width: 768px){}

https://www.mybj123.com/2975.html

button的四種狀態(tài)

1.普通狀態(tài)2，鼠標(biāo)hover狀態(tài) 3.active 點(diǎn)擊狀態(tài) 4.focus 取得焦點(diǎn)狀態(tài)

      .btn:hover {
            background-color: #ff0000;
        }
        /*active 要在后面 否則會(huì)被hover覆蓋*/
        .btn:focus {
            background-color: #00ff00;
        }
        .btn:active {
            background-color: #000000;
        }

https://blog.csdn.net/isaisai/article/details/41944033

鼠標(biāo)：不可點(diǎn)擊
鼠標(biāo)不可點(diǎn)擊主要是兩種表現(xiàn)：
1.鼠標(biāo)不可點(diǎn)擊時(shí)的顯示狀態(tài)
cursor: not-allowed
2.鼠標(biāo)原有的事件不能實(shí)現(xiàn)
pointer-events:none

https://blog.csdn.net/weixin_42322501/article/details/81941443

vue中應(yīng)用

:style用法（多個(gè)樣式用逗號(hào)隔開(kāi)）
<p :style="{color:(tabIndex==0?red:‘#fff‘)}">樣式</p>

http://www.mamicode.com/info-detail-2179823.html

:class 用法
  <p :class="{'active':tabIndex==0}">樣式</p>
  <p :class="{'active':tabIndex==0, 'active2': flag}">樣式</p>
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
  // classA 是固定不變的，classB與classC 是根據(jù)條件來(lái)判斷是否加入

http://www.itdecent.cn/p/e4248eb7c92a

  • :class 多個(gè)樣式
:class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"

https://blog.csdn.net/zhq_zvik/article/details/86692280

css 小圓點(diǎn)
    .circle {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 10px;
        background: #f5a400;
    }

https://blog.csdn.net/wangzongyang1025_/article/details/87869381

純css三角形
向上的三角形
<div class="triangle_border_up">
   <span></span>
</div>
<style>
.triangle_border_up{
   width:0;
   height:0;
   border-width:0 30px 30px;
   border-style:solid;
   border-color:transparent transparent #333;/*透明 透明  灰*/
   margin:40px auto;
   position:relative;
}
</style>

https://www.cnblogs.com/blosaa/p/3823695.html

帶文字的三角形
image.png
<template>
  <!-- 右側(cè)三角形的圖片 -->
  <div class="triangle-image">
    <div
      class="triangle-image_bg"
      :style="{
        borderBottomColor: bgColor ? bgColor : ''
      }"
    ></div>
    <div class="triangle-image_text">{{ titleText }}</div>
  </div>
</template>

<script>
export default {
  name: 'TriangleImage',
  props: {
    bgColor: {
      type: String,
      default: '#BD3124' // 默認(rèn)紅色
    },
    titleText: {
      type: String,
      default: '遲到'
    }
  }
}
</script>

<style lang="less" scoped>
.triangle-image {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  width: 28px;
  height: 28px;
  &_bg {
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-right: 28px solid transparent;
    border-left: 28px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: -4px;
    right: -18px;
  }
  &_text {
    font-size: 12px;
    color: #ffffff;
    transform: rotate(45deg);
    position: relative;
    top: 0;
    right: 0;
  }
}
</style>

https://blog.csdn.net/c347087870/article/details/109648115

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,160評(píng)論 25贊 708
  • 在此特此聲明：一下所有鏈接均來(lái)自互聯(lián)網(wǎng)，在此記錄下我的查閱學(xué)習(xí)歷程，感謝各位原創(chuàng)作者的無(wú)私奉獻(xiàn) ！ 技術(shù)一點(diǎn)一點(diǎn)積...
    遠(yuǎn)航的移動(dòng)開(kāi)發(fā)歷程閱讀 11,547評(píng)論 12贊 197
  • 世家咋地你咬我 程諾這句玩笑話倒是讓康博認(rèn)真思考了起來(lái)，想了想說(shuō)道：“你說(shuō)的倒也不錯(cuò)，如果我們這一門(mén)一直不得勢(shì)，像...
    諾陽(yáng)閣閱讀 316評(píng)論 0贊 0
  • 簡(jiǎn)書(shū)應(yīng)用下載了有快一個(gè)月的時(shí)間了吧，然后好像這是第二次打開(kāi)應(yīng)用，，，剛開(kāi)始看到廣告君說(shuō)的可以自己發(fā)一些文章或是感想...
    ec3a0f50d5e2閱讀 270評(píng)論 0贊 1
  • 星期五上午，Y小姐坐在書(shū)桌前學(xué)習(xí)一門(mén)網(wǎng)絡(luò)課程——“更無(wú)用的寫(xiě)作課”。窗外剛下過(guò)雨，空氣濕漉漉的，花園里的植物綠得發(fā)...
    隨機(jī)漫步的傻妞閱讀 332評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容