今天搞一搞box-sizing?

Alfred 发布于2019-08-02 15:59 / 1812人阅读

摘要：讲到首先你要知道什么是的盒子模型盒子模型有两种分别是的和的看了图可能你就已经明白了不过还要继续简单来说标准盒子模型的范围包括，并且部分不包含其他部分则是包含的标准外盒尺寸计算元素空间尺寸空间高度空间宽度内盒尺寸计算元素大小为内容高度

讲到box-sizing,首先你要知道什么是css的盒子模型!
盒子模型有两种分别是IE的border-box和w3c的content-box.

看了图可能你就已经明白了,不过还要继续,简单来说:

标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分,border-box则是content包含content,padding,border

W3C的标准Box Model:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算（元素大小）*/
  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

到这基本上你就能够明明白白的了吧?

想一想你再布局的时候有没有遇到过因为paddingborder导致多列布局打乱了的情况,明明是想要每行四个元素,但是第四个就是被挤了下去的情况.

比如三栏布局来讲:




    div {
        height: 700px;
        float: left;
    }
    div.left {
        width: 25%;
        background: red;
    }
    div.cent {
        width: 50%;
        box-sizing: border-box;
        /* 现在整个元素,包括填充在内,占页面总宽度的50%,所有元素的组合宽度为100%*/
        background: yellow;
        padding: 0 20px;
        /*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
    }
    div.right {
        width: 25%;
        background: blue;
    }

或者是ul-li结构,每行展示四个元素等等情况的布局,巧妙的运用可以让代码更加精简和优美.

最后浏览器的兼容性:ie9+,火狐加前缀-moz-,低版本ios和android加-webkit-

GPU云服务器云服务器搞一搞今天油价大于今天今天到期域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54469.html

记一次使iview库的Radio可取消的过程

摘要：概述库用的是是我们非常常用的组件。有一个特征是选中之后无法取消。现实中取消的需求是常见且可以理解的。所以看到这个需求之后第一尝试在组件之上搞一搞，这一搞就入坑了，现在就来理一理我的入坑之路吧。概述 ui库用的是iview . radio、radioGroup是我们非常常用的组件。radio有一个特征是选中之后无法取消。现实中取消radio的需求是常见且可以理解的。所以看到这个需求之后...

荆兆峰 2019-08-26 13:37 评论0 收藏0
vue-cli3.0安装与配置

摘要：安装与配置最近公司要开新项目，用配置，让我搞一搞，做个记录。最好自己去官网过一遍的文档安装完成后检测一下是否安装成功，如下图展示。显示以上就安装成功。第一个默认配置只会安装和，其它的需要自己配置，不建议选，这里我们选择第二个手动配置。 vue-cli3.0安装与配置最近公司要开新项目，用vue-cli3.0配置，让我搞一搞，做个记录。安装首先你要升级到cli3.0，命令如下。(最...

zilu 2019-08-23 16:17 评论0 收藏0
第三集: 从零开始实现一套pc端vue的ui组件库(button组件其一)

摘要：第三集从零开始实现组件本集定位为什么要叫那因为我感觉这个组件细节比较多应该会讲很多内容所以先把基础功能在这一集实现下集去做拓展组件这是一个基本上每个工程都会用到的组件传统的千篇一律的样式仿佛按钮不做的一样就没法用似的我偏要加一些别人没加过的第三集: 从零开始实现(button组件1) 本集定位: 为什么要叫1那, 因为我感觉这个组件细节比较多, 应该会讲很多内容, 所以先把基础功...

chnmagnus 2019-08-30 15:44 评论0 收藏0
第三集: 从零开始实现一套pc端vue的ui组件库(button组件其一)

摘要：第三集从零开始实现组件本集定位为什么要叫那因为我感觉这个组件细节比较多应该会讲很多内容所以先把基础功能在这一集实现下集去做拓展组件这是一个基本上每个工程都会用到的组件传统的千篇一律的样式仿佛按钮不做的一样就没法用似的我偏要加一些别人没加过的第三集: 从零开始实现(button组件1) 本集定位: 为什么要叫1那, 因为我感觉这个组件细节比较多, 应该会讲很多内容, 所以先把基础功...

yintaolaowanzi 2019-08-23 17:16 评论0 收藏0
老鸟学Javascript - 第一弹

摘要：顺带一提，跨域可以用解决。本文主要关注一些离散的，即学即用的知识点，和一些在日常编程中容易踩得坑。不做类型转换，所以如果比较对象的类型不一致，直接返回。当程序员给一个变量赋值为时，通常表示这个变量已经不用了。原文：http://h01mes.com/veteran-new... 我仍然记得在一个ajax小项目踩到跨域问题(CORS)的坑，最后用Chrome插件解决。由此对Javasc...

AlexTuan 2019-08-20 17:43 评论0 收藏0