• yuanxin.me


    border-sizing属性详解和应用
    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。

    1. 属性讲解

    content-box

    默认值,也是css2.1中的盒子模型。在计算width和height时候,不计算border、padding和margin。高度、宽度都只是内容高度。

    border-box

    css3新增。 width和height属性包括内容,内边距和边框,但不包括外边距。

    计算公式:

    width = width = border + padding + 内容宽度
    height = border + padding + 内容高度

    2. 考虑盒子模型的margin

    从上面可以知道,即时是border-box也是不计算margin,只是多余计算了border和padding。因为border和padding都是盒子模型的一部分,但是margin标记的是盒子和盒子的间距。所以,border-box的解释很符合常理。

    问题来了,如果有时候一定要设置margin,怎么做到自由控制来保证兼容?例如,我们下面要设置一个撑满页面的盒子元素,而且有外边距干扰,怎么做?

    实现如下效果图:
    border-sizing属性详解和应用

    代码:源码下载

    yuanxin.me
    所以,当需要计算外边距(margin),可以配合css3中的四则运算(calc)来使用。
  • 相关阅读:
    Locust 场景执行:Web UI 中执行
    第1章 计算机网络和因特网
    目录
    计算机网络--自定向下的方法
    mysql索引总结
    7_异常处理
    6_面向对象-下之类的结构:内部类
    6_面向对象-下之关键字:interface
    6_面向对象-下之关键字:abstract
    6_面向对象-下之关键字:final
  • 原文地址:https://www.cnblogs.com/sunshq/p/9505504.html
Copyright © 2020-2023  润新知