默认情况下设置盒子的width是指内容区域,所以在设置边框会使得盒子往外扩张,如果要让css设置的width就是盒子最终的宽度,那么就要设置box-sizing:border-box,
    这样添加border后,盒子会往内扩张,也就是设置的width就是盒子最终大小,box-sizing: content-box 是它的默认值
 
　1.默认情况

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

</head>

<style>

div{

    background-color: aqua;

    width: 500px;

    height: 500px;

    border: 10px solid gold;

    padding: 20px;

    box-sizing: content-box;

    margin: 0 auto;

}

</style>

<body>

    <div>pppp</div>

</body>

</html>

效果如下:

　　

2.box-sizing:border-box

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

</head>

<style>

div{

    background-color: aqua;

    width: 500px;

    height: 500px;

    border: 10px solid gold;

    padding: 20px;

    box-sizing: border-box;

    margin: 0 auto;

}

</style>

<body>

    <div>pppp</div>

</body>

</html>

效果如下:

box-sizing的用法的更多相关文章

  1. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  2. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  3. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  4. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  5. IE兼容性问题汇总【持续更新中】

    问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...

  6. css的初始化样式

    一切为了敏捷开发: http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html CSS初始化示例代码 /* css reset www.admin1000 ...

  7. CSS3学习基本记录

    CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...

  8. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  9. Css 进阶篇

    一.Css2 高阶知识(常用) 1. css 优先权 优先权(从低到高) 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...

  10. css新特性 box-flex/flex 弹性盒状模型

    新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...

随机推荐

  1. OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化

    需求 及时知道vm,硬盘,镜像,网络设备.负载均衡器状态变化 分析 Dashboard中也是通过定时使用ajax调用API来获取虚拟机的状态信息的定时轮训的方式过于被动 解决方案 共用rabbitmq ...

  2. Axis2开发WebService客户端 的3种方式

    Axis2开发WebService客户端 的3种方式 在dos命令下   wsdl2java        -uri    wsdl的地址(网络上或者本地)   -p  com.whir.ezoffi ...

  3. 网页分享到微博、QQ、QQ空间、微信

    <ul id="content-share-list" class="bdsharebuttonbox bdshare-button-style0-16" ...

  4. "Login failed for user 'NT AUTHORITY\SYSTEM'. 原因: 无法打开明确指定的数据库。"异常处理

    公司一台SQL Server服务器一直报 "Login failed for user 'NT AUTHORITY\SYSTEM'. 原因: 无法打开明确指定的数据库."错误,按网 ...

  5. https真的安全吗，加密登录其实不简单

    登录,是做web开发的程序员做项目第一接触到的模块,看似简简单单的登录背后囊括了编程知识的方方面面. 登录安全吗?密码会不会泄露? 明文传输时代 互联网开始的时候,登录确实是使用明文校验的,甚至数据源 ...

  6. 2018年12月25日 圣诞节快乐 生成器plus

    import time#导入时间模块 time.sleep(5)#输入间隔时间5秒 def p_bz():#使用函数 生产包子 for i in range(100): yield "包子% ...

  7. vs相同变量高亮显示

    https://blog.csdn.net/sinat_33718563/article/details/79241129 在VS2010中调试工程中,常常需要观察相同变量名在不同代码处的位置,VS默 ...

  8. 【ASP.NET】 Config Error: This configuration section cannot be used at this path.

    Config Error: This configuration section cannot be used at this path. This happens when the section ...

  9. C#中get和set

    释一: 属性的访问器包含与获取(读取或计算)或设置(写)属性有关的可执行语句.访问器声明可以包含 get 访问器或 set 访问器,或者两者均包含.声明采用下列形式之一: get {} set {} ...

  10. selenium+java 模糊搜索列表

    判断搜索结果是否正确 例子: 显示列表 相关HTML 获取职位名称元素 List<WebElement> elements = driver.findElements(By.cssSele ...