zoukankan      html  css  js  c++  java
  • 日常忽略的css

    1、calc() 函数:用于动态计算长度值。

      这个函数我没有经常使用,因为我关于宽度的计算,我一般使用百分比,但是这个函数给我一个可以在css也进行计算的功能。calc()函数支持 "+", "-", "*", "/" 运算;很实用。

      eg:  calc( 100% - 100px )

    2、@support:用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补

      这个函数我根本就没了解过,失败。这个主要主要在调试浏览器兼容性的时候用处很大

      eg: 

    支持css
    @supports (display: grid) { div { display: grid; } } 不支持css @supports not (display: grid) { div { float: right; } }

    3、@media: 针对不同的媒体类型定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面。

      这个css我以前做移动端的时候经常使用,但是好长时间不用,竟然给忘记了。不应该。

      eg:

    @media screen and (min-960px){
        body{
            background:orange;
        }
    }
    @media screen and (max- 300px) {
        body {
            background-color:lightblue;
        }
    }
    

      

  • 相关阅读:
    338. 比特位计数
    300.最长上升子序列
    git 钩子服务代码
    thinkphp5.1 封装文件上传模块
    Theano 基础
    使用anaconda和pycharm搭建多python本版的开发环境
    GIT常用命令
    Thinkphp 获取数据表随机值
    在Windows中利用.bat提交git代码到不同分支
    Windows .bat 常量
  • 原文地址:https://www.cnblogs.com/liumcb/p/13323899.html
Copyright © 2011-2022 走看看