CSS环境变量与权重

最新推荐文章于 2025-03-31 08:00:00 发布

深海霸主丶痞老板

最新推荐文章于 2025-03-31 08:00:00 发布

阅读量444

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_38062409/article/details/90373903

版权

Life 专栏收录该内容

16 篇文章

订阅专栏

利用fixed把div浮动在底部

style="position:fixed;bottom:0;left:0;"

底部导航栏

ul{
    display: table;
    position: fixed;
    width: 100%;
    height: 108px;
    z-index: 100;
    bottom: 0px;
    background: #ffffff;
}

li{
    display: table-cell;
    text-align: center;
    width: 25%;
}

方法二：

    <div class="foot">
      <ul>
        <li>
          <a>
            <img src="#">
            <span>AAA</span>
          </a>
        </li>
        <li>
          <a>
            <img src="#">
            <span>BBB</span>
          </a>
        </li>
        <li>
          <a>
            <img src="#">
            <span>CCC</span>
          </a>
        </li>
        <li>
          <a>
            <img src="#">
            <span>DDD</span>
          </a>
        </li>
      </ul>
    </div>

  *{
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  .foot{
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    box-shadow: 1px -6px 5px 0px #dedede;
    height: 2.3rem;
    display: flex;
    justify-content:center;
    align-items:center;
  }
  ul{
    width: 100%;
    height: 43px;
    font-size: 0;
    background: #fff;
  }
  li{
    width: 25%;
    text-align: center;
    height: 43px;
    vertical-align: top;
    background: #fff;
    font-size: 0;
    float: left;
  }
  span{
    font-size: 12px;
    color: #7b7b7b;
  }
  img{
    width: 20px;
    height: 20px;
    display: block;
    margin: 3px auto 0;
  }

CSS环境变量

:root 选择器匹配文档根元素。

在 HTML 中，根元素始终是 html 元素

:root{

  --bgColor:#000;

}

变量声明就像变普通的样式声明语句一样，也可以使用内联样式

<body style="--bgColor:#000">

变量只能作为属性值，不能作为属性名

~~{ --bgColor:#000;~~ }

var()函数用来读取变量

a{

  color:var(--bgColor);
     
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--bgColor, #e5e5e5);

变量不支持!important

~~background-color:--bgColor !important;~~

如果变量值是字符串，则可以与其他字符串拼接

{
    --far:'hello';
    --foo:var(--far)',world';
}

如果是数值，则不可以拼接

{
    --far:20;
    --foo:var(--far)'px'; //无效
}

但可以通过calc()函数，将他们拼接起来

{
    --far:20;
    --foo:calc(var(--far)*1px);
}

如果变量值带单位，则不能写成字符串形式

--far:'20px';
margin-top:var(--far); //无效

--far:20px;
margin-top:var(--far); //有效

CSS 变量可以和 JS 互相交互，但只能使用getPropertyValue()和setProperty()方法，而不能使用style属性

<div id="box" style="--color:lightgreen;background-color: var(--color)">
    
</div>    
<script>　　
       var demo = document.getElementById('box');
       console.log(demo.style['--color']);  //undefined
       console.log(demo.style.getPropertyValue('--color')); //'lightgreen'

       oBtn.onclick = function(){
           oBox.style.setProperty('--color','red');
       }
</script>

权重：

权重图

优先级规则：

~~css选择规则的权值不同时，权值高的优先；~~

上述观点不完全真确：贯彻1*100>11*10思路

　　css选择规则的权值相同时，后定义的规则优先；

　　css属性后面加 !important 时，无条件绝对优先；

前端页面文字超出一行，省略超出部分，显示’…’

p{
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

文字超过三行就显示省略号

p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

图片路径可用性判断

<img :src="detection(src)" >

props:{
     src:String,
     },

methods: {
     // 图片是否可用
     detection(src){
         var ImgObj = new Image();
         ImgObj.src = src;
         if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
            return src;
         } else {
            //图片为空的操作
         }
       }
    },
},

function detection(src) {
	var ImgObj = new Image();
	ImgObj.src = src;
	if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
	   return true;
	} else {
	   return false;
	}
}