默认情况下设置盒子的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. ASP.NET MVC案例教程（二）

    ASP.NET MVC案例教程(二) 让第一个页面跑起来 现在,我们来实现公告系统中的第一个页面——首页.它非常简单,只包括所有公告分类的列表,并且每个列表项是一个超链接.其中分类数据是用我们的Moc ...

  2. Unable to construct api.Node object for kubelet: can't get ip address of node master.example.com: lookup master.example.com on : no such host

    openshift首页进不去 启动openshift时报的错,大意是: 无法为kubelet构造api.Node对象:无法获取节点master.example.com的IP地址: 所以就联想到新装的c ...

  3. tp剩余未验证内容-7

    bash脚本中 的 set -e表示 exit immediately if a simple command returns a non-zero value.主要是为了防止错误被忽略.会被立即退出 ...

  4. bzoj2091: [Poi2010]The Minima Game DP

    2091: [Poi2010]The Minima Game DP 链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2091 思路 这类问题好迷 ...

  5. 使用MyBatis Generator 1.3.7自动生成代码

    MyBatis Generator是一款mybatis自动代码生成工具,可以通过配置后自动生成文件. MyBatis Generator有几种方法可以生成代码,下面是其中一种.  一.官网下载 MyB ...

  6. Paper Read: Convolutional Image Captioning

    Convolutional Image Captioning 2018-11-04 20:42:07 Paper: http://openaccess.thecvf.com/content_cvpr_ ...

  7. 论文笔记：A Structured Self-Attentive Sentence Embedding

    A Structured Self-Attentive Sentence Embedding ICLR 2017 2018-08-19 14:07:29 Paper:https://arxiv.org ...

  8. Intellij IDEA创建git,maven的SpringMVC项目

    Intellij IDEA创建git,maven的SpringMVC项目 原文链接:http://www.cnblogs.com/blog5277/p/8906120.html 原文作者:博客园--曲 ...

  9. OceanBase 2.0让百万支付不是梦？

    小蚂蚁说: 你们都很关心的 “OB双11大促实战分享” 专题来啦!本系列将为你系统性的介绍OceanBase支撑蚂蚁双11背后的技术原理和实战分享.从平台到架构,再到实现,一起来探索蚂蚁双11这场神秘 ...

  10. 如何隐藏Excel中单元格公式且其他单元格可修改

    需求:1.隐藏指定单元格公式.2.非公式单元格可修改,不影响公式计算. 操作步骤:1.全选工作表.右键.单元格格式.保护.锁定勾选取消. 2.编辑.定位(或按F5弹出该对话框).定位条件.公式(勾选) ...