在学习css的时候有些设定 其实并不是很好用 但是在css3下 就极度舒适了

css3的盒子模型box-sizing属性

  1. content-box(默认)

    盒子大小等于 = boder+ padding+ content ,pading和border会改变盒子的大小 padding会撑大盒子导致,导致每次还得计算 极度不舒服

  2. boder-box

    盒子的大小就是我们设置的content的大小,但是如果padding+border超过了padding 还是会改变盒子的大小的。

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #666;
            border: 10px solid red;
            padding: 15px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #666;
            border: 10px solid red;
            padding: 15px;
            box-sizing: border-box;
        }
    </style>

<body>
    <div class="box1">content-box</div>
    <div class="box2">border-box</div>

我们可以给所有的元素加上这个属性,这样 我们的盒子大小直接可以被width和height规定死了,padding不会撑开盒子了(不超过的情况下)

* {
    box-sizing:border-box;
}

calc() 帮助我们计算

calc() 此 CSS函数允许在声明 CSS 属性值时执行一些计算, + - / * 都可以

这样我们可以让子盒宽度永远比父子小 10像素 :width:calc(100%-10px)

滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。更多可以查阅mdn文档

语法filter: <对应函数>;

CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜,通过一个 URL 链接到 SVG 滤镜元素(SVG filter element)。

  • filter: blur(5px); 图像变模糊
  • filter: grayscale(100%); 灰色滤镜
    其实还有很多滤镜,这里就不一一列举了。

结语

放假咸鱼的第14天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/08/c-s-s-3--ling-ren-yu-yue-de-zhi-shi-dian
最后更新于:  258  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟