盒子模型

css中盒子模型包含属性margin、border、padding、width与height，他们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西（element）；而填充（padding）就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框（border）就是盒子本身了；至于边界（margin）则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。

css中width与height的计算方法

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。

但是在浏览器中实际的宽度与高度的值是按width=margin-left + margin-right + padding-left + padding-right + width与height=margin-left + margin-right + padding-left + padding-right + height这个计算的。所以当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。因此在我们布局网页的时候要将这一部分内容计算在内。

例如：#div{margin:10px;padding:10px;border:1px;width:100px;height:100px;} 他的实际width为142px ，height为142px。

CSS中width和height与盒子模型的关系的更多相关文章

  1. CSS中的间距设置与盒子模型

    CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...

  2. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  3. css中width和height默认值

    width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最 ...

  4. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  5. CSS（十四）：盒子模型

    页面布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子. 利用CSS设置好盒子样式,然后放到相应的位置 往盒子里面装内容 网页布局的本质:就是利用CSS摆盒子 盒子模型 组成 所 ...

  6. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  7. css知多少（7）——盒子模型

    1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...

  8. CSS学习笔记（float和盒子模型）

    1.当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现. 2.盒子模型的三位立体结构图中从第一层到第五层依次为:border.content+pa ...

  9. CSS中详解height属性

    目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...

随机推荐

  1. Retrofit源码解析（上）

    简介Retrofit是Square公司开发的一款针对Android网络请求的框架,官网地址http://square.github.io/retrofit/ ,在官网上有这样的一句话介绍retrofi ...

  2. 匹配img标签的正则表达式

    $preg = '/<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/i';//匹配img标签的正则表达式 preg_match_all($ ...

  3. ifconfig-dropped

    drop的包是因为网卡的buffer满了 查看当前网卡的buffer size情况 ethtool -g eth0 Ring parameters for eth0: Pre-set maximums ...

  4. POJ 1146

    #include <iostream> #include <algorithm> #define MAXN 55 using namespace std; char _m[MA ...

  5. 关于 PHP 开放 enable_dl 函数利用 图片Disable_functions

    三篇引文地址: 利用PHP扩展模块突破Disable_functions执行命令 如何编写PHP扩展 php dl函数(详细解释)

  6. Android Studio SVN的使用

    一 SVN的配置 这篇文章使用的Android studio版本为1.4 RC3. 我选择的是TortoiseSVN,版本为1.8,不要选择1.9版本(目前的最新版),因为如果你安装的是1.9版本当你 ...

  7. CDH版本大数据集群下搭建Hue（hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz）（博主推荐）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  8. CAJ Viewer安装流程以及CAJ或Pdf转换为Word格式

        不多说,直接上干货! pdf转word格式,最简单的就是,实用工具 Adobe Acrobat DC 首先声明的是,将CAJ或者Pdf转换成Word文档,包括里面的文字.图片以及格式,根本不需 ...

  9. numpy.pad

    np.pad()常用与深度学习中的数据预处理,可以将numpy数组按指定的方法填充成指定的形状. np.pad() 对一维数组的填充 import numpy as np arr1D = np.arr ...

  10. linux-统计文本中符合条件的内容

    1, 单个条件匹配, cat results.log | grep 'status=402' 2, 多个条件匹配 1), 2个条件都要满足 cat results.log | grep "s ...