默认情况下设置盒子的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. AIX更改用户组

    1:先 修改 user: smit chuser 把id 号给改了.成功! 2:在 修改group 的时候报警告: smit chgroup : can not update the /etc/pas ...

  2. 服务器日志文件Web远程查看

    公司买的一款企业应用软件,所有透过应用操作DB的操作都会生成有日志,日志是以文本文件的形式存放在服务器上,后缀名为*.log.1,*.log.2之类的,软件本身也提供功能查询这些日志,但这个查询的功能 ...

  3. nodejs cannot find module 'mysql' 问题分析

    在windows平台下,测试nodejs连接mysql数据库. 首先 在控制台中安装mysql依赖包 npm install mysql 安装成功后,mysql依赖包可以在User目录中的node_m ...

  4. Redis学习-常用命令

    keys * 返回满足的所有键 exists key 是否存在指定的key,存在返回1,不存在返回0 expire key time 设置指定key的过期时间,可以使用ttl key查看剩余时间 pe ...

  5. js实现打印

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 51Nod 1185 威佐夫游戏 V2

    有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数量的石子,但不可不取.拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出2堆石子的数量, ...

  7. springboot使用hibernate validator校验

    一.参数校验 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要 ...

  8. python爬虫——跟踪登录过程以及意外的发现（4）

    新浪微博的消息还是很多的,值得弄个账号去爬.不过都有账号了,还需要特意再搞一个吗? 直接上去跟踪.分别使用www和wap端登录: wap端相对简单,form表单都没有用到前面传的数据.但是我看到表单时 ...

  9. Html fieldset、legend 标签

    Html fieldset.legend 标签 <html> <body> <!-- fieldset 添加圈起标题框标签 --> <fieldset> ...

  10. servlet数据库登录

    一.首先建立如下目录: 二.在html文件中编写代码 三.编写实体类 四.编写服务器相关代码 五.编写数据库代码 六.运行截图 输入错误: 输入正确: 链接:https://pan.baidu.com ...