最近要入门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. exec和xargs

    参考:http://www.cnblogs.com/itxdm/p/5936907.html 一. 先复习下find命令 1. name参数 find -name tom 或 find -iname ...

  2. 【转】C++ 类访问控制public/private/protected探讨

    示例1:---------------------------------------- class C{ int c1; int c2;public: void set(C* s, int i, i ...

  3. sql 列集合

    STUFF((SELECT ','+CAST( TYZ_Bh  as varchar(10)) FROM #1 where 片区划分='江东' for xml path('')),1,1,'')

  4. 【算法笔记】B1050 螺旋矩阵

    1050 螺旋矩阵 (25 分)   本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行  ...

  5. Q438 找到字符串中所有字母异位词

    给定一个字符串 s 和一个非空字符串 p,找到 s 中所有是 p 的字母异位词的子串,返回这些子串的起始索引. 字符串只包含小写英文字母,并且字符串 s 和 p 的长度都不超过 20100. 说明: ...

  6. 通过遍历类向Aspose.cell模板中插入数据

    /// <summary> /// 遍历类所有字段 /// </summary> /// <param name="designer">aspo ...

  7. Oracle触发器简单使用记录

    在ORACLE系统里,触发器类似函数和过程.1.触发器类型:(一般为:语句级触发器和行级触发器.) 1).DML触发器: 创建在表上,由DML事件引发 2).instead of触发器: 创建在视图上 ...

  8. js 删除数组的某一项或者几项的方法

    1.arr.splice() splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  9. .NET Core 中间件

    中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 请求委托用于生成请求管道. 请求委托处理每个 H ...

  10. 关于cg语言中求法向量 N=mul(worldMatrix_IT,normal); 的随笔

    解释一下标题,N是变换到世界坐标后的法向量,worldMatrix_IT是变换矩阵worldMatrix的逆的转置矩阵,normal就是模型坐标的法向量. 对于点p,我们根据变换矩阵M(即worldM ...