设置 box-sizing:border-box（原本的默认值为:content-box）

box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/

box-sizing: border-box;/*盒子的宽度=css中设置的width*/

实例对比

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box1{

            box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/

            width:300px;

            height:200px;

            padding:10px;

            margin: 10px;

            color:red;

            border:5px solid blue;

        }

        .box2{

            box-sizing: border-box;/*盒子的宽度=css中设置的width*/

            width:300px;

            height:200px;

            padding:10px;

            margin: 10px;

            color:red;

            border:5px solid blue;

        }

    </style>

</head>

<body>

    <div class="box1">

       <p>box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/</p>

    </div>

    <div class="box2">

        <p>box-sizing: border-box;/*盒子的宽度=css中设置的width*/</p>

    </div>

</body>

</html>

可以看到，第一个div被pading等因素撑大

【前端】解决盒子被撑大问题 box-sizing的更多相关文章

  1. 怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠

    怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素. 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素. 建议行内元 ...

  2. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  3. PHPExcel解决内存占用过大问题-dw 查找memoryCacheSize把1M改为2048M

    http://blog.sina.com.cn/s/blog_4ec7952d0101fcrd.html PHPExcel解决内存占用过大问题-设置单元格对象缓存 PHPExcel是一个很强大的处理E ...

  4. web添加第三方应用，前端解决跨域问题的8种方案

    应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...

  5. [转] js前端解决跨域问题的8种方案（最新最全）

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  6. PHPExcel解决内存占用过大问题-设置单元格对象缓存

    PHPExcel解决内存占用过大问题-设置单元格对象缓存 PHPExcel是一个很强大的处理Excel的PHP开源类,但是很大的一个问题就是它占用内存太大,从1.7.3开始,它支持设置cell的缓存方 ...

  7. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  8. 解决EditText不能撑满全屏的问题及EditText你应该知道的属性

    一般我们要实现去下图一的效果很简单: 两个EditText就搞定 效果图一:   但是我们想让第二个EditText撑满剩余空间怎么做?如效果图二 效果图二: 解决: 使用了ScrollView嵌套L ...

  9. 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...

  10. [Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

    cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言: ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一, ...

随机推荐

  1. Putty 远程 连接kali Linux拒绝访问 refused connection

    1. 设置  ssh 文件 crtl + alt + t 代开终端 输入命令: vim /etc/ssh/sshd_config 说明 : 使用 vim 编辑器编辑 ssh 文件 : 说明: 修改第3 ...

  2. Android复习(二)应用资源

    1. res下的资源类型 目录 资源类型 animator/ 用于定义属性动画的 XML 文件. anim/ 用于定义渐变动画的 XML 文件.(属性动画也可保存在此目录中,但为了区分这两种类型,属性 ...

  3. 在 Azure CNI 中启用 Calico WireGuard

    作者:Peter Kelly 译者:Wendi Wang 注:本文已取得作者本人的翻译授权! 去年6月,Tigera 宣布首次在 K8s 上支持用于集群内加密传输的开源 VPN - WireGuard ...

  4. 在 Kubernetes 中基于 StatefulSet 部署 MySQL（下）

    大家好,我是老 Z! 上篇文章实现了 MySQL 数据库在基于 KubeSphere 部署的 K8s 集群上的安装部署,部署方式采用了图形化界面这种形式.本文将会介绍如何使用 GitOps 来部署 M ...

  5. Stream流，集合与基本数组的相互转换

    Arrays类的Api stream()方法传入数组,返回对应的stream流. Collection集合的Api: stream()不传参数,返回Stream流. 有了上述Api可以完成如下转换.. ...

  6. Python请求接口传Null

    Python中没有Null,与之对应的是None. {"dog": "keji", "cat": None}

  7. 题解：CF888G Xor-MST

    题解:CF888G Xor-MST 题目大意:给定 \(n\) 个点的点权, 任意两点间边权是点权的异或和.求这张完全图的 MST 的权值. 思路: Boruvka + Trie树 + 按位贪心. 关 ...

  8. 8.Kubernetes核心技术Pod

    Kubernetes核心技术Pod Pod概述 Pod是K8S系统中可以创建和管理的最小单元,是资源对象模型中由用户创建或部署的最小资源对象模型,也是在K8S上运行容器化应用的资源对象,其它的资源对象 ...

  9. .NET 9使用Scalar替代Swagger

    背景 .NET 9刚刚正式发布了,如果你创建一个空的Asp.Net Core 9.0的Web API项目,启动之后,你会惊讶地发现陪伴你多年的Swagger没有了!--这是因为ASP.NET Core ...

  10. ARC143D Bridges

    ARC143D Bridges 巧妙的图论题. 思路 分析题目,发现很像拆点. 由于拆点要设置出入点,这里我们也把 \(a_i\) 设成入点,把 \(a_i+n\) 设成出点,再次分析问题. 考虑我们 ...