盒子模型

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. strlen()与mb_strlen()的区别

    1,strlen()是php的内置函数,可以在php中直接调用:mb_strlen()是php的扩展,需要配置php.ini,以开启mb_strlen()扩展.在php.ini中加载了php_mbst ...

  2. Java爬虫项目实战（一）

    目的: 通过网络爬虫爬取中国最小粒度的区域维度信息,包括省(Province) .市(City).县(County).镇(town).村委会(village) 主网站链接: http://www.st ...

  3. mapreduce程序的按照key值从大到小降序排列

    在近期的Hadoop的学习中,在学习mapreduce时遇到问题:让求所给数据的top10,们我们指导mapreduce中是有默认的排列机制的,是按照key的升序从大到小排列的 然而top10问题的求 ...

  4. 【NOIP2013】货车运输 最大生成树+倍增

    题目大意:给你一张n个点m条边的图,有q次询问,每次让你找出一条从x至y的路径,使得路径上经过的边的最小值最大,输出这个最大的最小值. 显然,经过的路径必然在这张图的最大生成树上. 我们求出这个图的最 ...

  5. Java多线程——死锁

    当一个线程永远地持有一个锁,并且其他线程都尝试获得这个锁时,那么他永远被阻塞,当线程A持有锁L并想获得锁M的同时,线程B持有锁M并同时尝试获得锁L时,那么两个线程将永远的等待下去,这中情况就是简单的死 ...

  6. 剑指offer三十五之数组中的逆序对

    一.题目 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...

  7. http2.0之头部压缩

    什么是头部压缩?为什么要头部压缩? 我们知道,http请求和响应都是由[状态行.请求/响应头部.消息主题]三部分组成的. 一般而言,消息主体都会经过gzip压缩,或者本身传输的就是压缩过后的二进制文件 ...

  8. Java模拟双色球彩票

    package practice1; import java.util.Random; import java.util.Scanner; public class Test3 { /** * * 模 ...

  9. Jsp页面用ajax传输json数组的方法

    详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...

  10. 《Android应用性能优化》1——代码

    1.Java代码优化 1.1 代码执行 通常情况下,不必看应用的字节码.在平台是Android2.2(Froyo)和更高版本的情况下尤其如此,因在Android2.2中引入了实时(JIT)的编译器.D ...