最近要入门H5,遇到很多困惑，所以，每解决一个，我就要写在博客里，以防忘记！

给div加上padding和border，如何不让div整体改变？

如果想要实现这样的效果，只需要在这个div块中写入

box-sizing:border-box;

CSS3 box-sizing属性有3个值

1 :  content-box;

我想这个值就是一般浏览器的默认的，div的实际宽度 = div的width + pading + border;（标准盒模型）

2 :  border-box;

这个值可以不让padding盒border影响div的整体大小，div的实际宽度 = div的width （怪异盒模型）

3 :  inherit；

在子元素中写inherit可以继承父元素的box-sizing值；

给div加上padding和border，如何不让div整体改变的更多相关文章

  1. JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  2. html,body { margin:0; padding:0;border:0}

    body,html /* 设置窗口DIV为浏览器大小*/ { margin:; padding:; height:100%; } 下面代码 <!DOCTYPE html> <html ...

  3. 【CSS3】---盒模型margin、padding及border

    盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...

  4. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

  5. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  6. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  7. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  9. 详述盒子模型（包含padding、border、margin的详细用法和描述）

    提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识. 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解.我知道定义一个元素的宽度和高度时,设置 ...

随机推荐

  1. Windows下Jmeter安装出现Not able to find Java executable or version问题解决方案

    安装好java1.8.jmeter4.0,并java -version正常,jmeter也能正常使用.某一次使用突然出现Not able to find Java executable or vers ...

  2. linux I/O函数使用

    一.lseek lseek函数的作用是用来重新定位文件读写的位移. 头文件以及函数声明 #include <sys/types.h> #include <unistd.h> o ...

  3. Python全栈-magedu-2018-笔记12

    第三章 - Python 内置数据结构 字典dict key-value键值对的数据的集合 可变的.无序的.key不重复 字典dict定义 初始化 d = dict() 或者 d = {} dict( ...

  4. MUI 滚动插件使用

    在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...

  5. Numpy随机数(一):超几何分布

    超几何分布 产品抽样检查中经常遇到一类实际问题,假定在N件产品中有M件不合格品,即不合格率 . 在产品中随机抽n件做检查,发现k件不合格品的概率为 ,k=0,1,2,...,min{n,M}. Num ...

  6. HDU 5442 后缀自动机(从环字符串选定一个位置 ， 时针或顺时针走一遍，希望得到字典序最大)

    http://acm.hdu.edu.cn/showproblem.php?pid=5442 题目大意: 给定一个字符串,可理解成环,然后选定一位置,逆时针或顺时针走一遍,希望得到字典序最大,如果同样 ...

  7. Oracle 备份还原

    导出整个数据库,在CMD命令窗口执行 EXP 用户名/密码@服务名(数据库) FULL=Y FILE=路径 EXP INTERFACE/INTERFACE@PIVAS_XMDWYY FULL=Y FI ...

  8. Rancher 1.6 版本 只能在 linux 下用

    实际操作 启动 , 访问方式 : 在启动过程中会发现没有 image , 然后自动下载 ( 执行 docker pull 命令 ) docker run --rm --privileged -v /v ...

  9. Java 继承学习

    Java 继承 继承实现: 在Java中,如果实现继承的,需要使用Java关键字——extends : 被继承的类叫做超类,继承超类的类叫子类.(一个子类亦可以是另一个类的超类) class 子类 e ...

  10. Android Gson解析复杂Json

    JSON原数据 {"total":1,"rows":[{"ID":1,"Title":"台州初级中学招收初一年 ...