默认情况下设置盒子的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. U盘安装各种系统方法总结

    一.软通牒(UltraISO) 1.安装系统CentOS-5.11-x86_64-bin-1to9 使用软通牒(UltraISO)打开CentOS-5.11-x86_64-bin-1of9.iso,启 ...

  2. 【2017-05-02】winform弹出警告框选择性操作、记事本制作、对话框控件和输入输出流

    一.winform弹出警告框选择性操作 MessageBox.Show()返回一个枚举类值(第一个参数为弹出窗口显示的内容,第二个参数为弹出窗口的标题,第三个参数为弹出窗口包含的按钮) 先新建一个变量 ...

  3. python SyntaxError: Non-ASCII character '\xe6' in file

    [1]python程序执行报错 报错:SyntaxError: Non-ASCII character '\xe6' in file /tmp/788580473/main.py on line 7, ...

  4. Html from 标签

    Html from 标签 <html> <body> <!-- form 提交表单设置 --> <form> <input type=" ...

  5. Python Gevent协程自动切换IO

    Gevent Gevent 是一个第三方库,可以轻松通过gevent实现并发同步或异步编程,在gevent中用到的主要模式是Greenlet, 它是以C扩展模块形式接入Python的轻量级协程. Gr ...

  6. Linux 查看内存状态

    # 查看系统内存 命令:free 注:默认k单位显示 注:-m 以MB 注:-g以GB 单位显示 total used free shared buffers cached Mem: -/+ buff ...

  7. Qt自定义阴影效果和QOpenGLWidget冲突导致控件不刷新

    Qt5.6.2版本存在这样一个问题(其它版本未测试),当main函数中设置了application.setAttribute(Qt::AA_NativeWindows)(用于使得每个子界面都可以获取w ...

  8. msvc命令行cl编译c程序问题及解决

    1.cmd命令行cl提示没有这玩意儿 装上Visual Studio之类 2.cl main.c提示缺dll everything搜dll所在路径,在环境配置PATH增加对应bin.IDE 3.cl ...

  9. pip安装第三方库镜像源选择

    在pip安装时,有些库速度及其缓慢从而导致失败,可以通过更改镜像源的方式来安装. 我在安装的时候使用了清华的镜像源,格式如下: 想要安装什么库就在后面替换即可.

  10. jquery之div模拟textarea文本域轻松实现高度自适应

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...