最近要入门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. 使用 final 关键字修饰一个变量时，是引用不能变，还是引用的对象不能变？

    使用 final 关键字修饰一个变量时,是指引用变量不能变,引用变量所指向的对象中的内容还是可以改变的.例如,对于如下语句:final StringBuffer a=new StringBuffer( ...

  2. (STM32F4) SysTick理解使用

    關於Cortex System Timer (Systick) 網上隨便google就可以找到許多相關範例. 他就是ARM提供的一個24-bit的下數(count-down)計時器我看大部分應用都是提 ...

  3. SyntaxError: Non-UTF-8 code starting with '\xb6' in file XX.py

    导致出错的根源就是编码问题. 解决方案是: 在程序最上面加上: # coding=gbk

  4. stl容器学习——queue,stack,list与string

    目录 头文件 string 目录部分 1.string的定义及初始化 ① 用一个字符串给另一个字符串赋值 ②用字符串常量对字符串进行赋值 ③ 用n个相同的字符对字符串赋值 2.string的运算符及比 ...

  5. CentOS虚拟机断电或强制关机，再开机出现问题：Entering emergency mode. Exit the shell to continue.

    解决问题: 输入命令:xfs_repair -v -L /dev/dm-0

  6. Compile Groovy/Spock with GMavenPlus

    在之前的博文里曾使用GMaven插件编译Groovy/Spock,这次使用GMavenplus插件,更加方便. 具体步骤 1. 导入Spock和Groovy依赖 <dependency> ...

  7. Oracle批量插入数据SQL语句太长出错：无效的主机/绑定变量名

    Oracle数据库,用mybatic批量插入数据: <insert id="saveBatch" parameterType="io.renren.entity.N ...

  8. autokeras 在windows10下的安装与使用

    注意:autokeras只适用于python3.6 先打开命令行(cmd), 输入 python --version 查看python版本,是否需要降级和升级. 降级的命令如下: conda inst ...

  9. Regini命令的使用和参数讲解

    Regini程序操作系统自带的,从XP开始就有,主要是用于修改注册表及注册表权限.我们就从这两方面介绍regini的用法.Regini必须要指定操作脚本,也就是,提前将你要操作的内容写在一个文本文件中 ...

  10. 剑指offer——面试题22：链表中倒数第k个节点

    注意代码的鲁棒性! 函数: ListNode* TheLastKthNode(ListNode* pHead,int k) { ) return nullptr; ListNode* quickNod ...