CSS中width和height与盒子模型的关系
盒子模型
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与盒子模型的关系的更多相关文章
- CSS中的间距设置与盒子模型
CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...
- 【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
- css中width和height默认值
width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最 ...
- CSS box-flex属性,然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
- CSS(十四):盒子模型
页面布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子. 利用CSS设置好盒子样式,然后放到相应的位置 往盒子里面装内容 网页布局的本质:就是利用CSS摆盒子 盒子模型 组成 所 ...
- CSS box-flex属性,然后弹性盒子模型简介(转)
一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...
- css知多少(7)——盒子模型
1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...
- CSS学习笔记(float和盒子模型)
1.当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现. 2.盒子模型的三位立体结构图中从第一层到第五层依次为:border.content+pa ...
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
随机推荐
- poj1269---直线位置关系
题目大意:给你8个点,也就是两条直线,让你判断他们的位置关系 代码如下: #include <iostream> #include<cstdio> #include<cm ...
- [Dart]语法基础
此页面向您展示如何使用每个主要Dart功能,从变量和运算符到类和库,假设您已经知道如何使用其他语言编程. 要了解有关Dart核心库的更多信息,请参阅 Dart Libraries之旅.无论何时需要有关 ...
- POJ 1046
#include<iostream> using namespace std; #define MAXN 16 #define inf 100000000 struct node { in ...
- Maven 上传本地包到仓库 (来源于同事(gagahjt)的笔记本)
1:将本地jar包导入到自己的Maven仓库 mvn install:install-file -Dfile=D:\\kaptcha-2.3.2.jar -DgroupId=com.google -D ...
- h5预订酒店项目|html5酒店模板|h5酒店webapp开发
近几天尝试着使用html5+css3+swiper+jqUI+layerMobile等技术开发了一款仿携程.去哪儿.艺龙webapp酒店预订系统,页面图标统一使用iconfont,仿原生app右侧弹窗 ...
- zabbix 自定义 key (转)
转自:http://www.cnblogs.com/miclesvic/p/6164303.html 1.在zabbix_agent端zabbix_agentd.conf配置文件中增加自定义Key(/ ...
- (转)MySQL中show语法
MySQL中show语法 1. show tables或show tables from database_name; -- 显示当前数据库中所有表的名称. 2. show databases; -- ...
- 如何在window server IIS上部署可以使用web deploy?
环境: windows server2012 方式1: 1,下载"wpilauncher.exe" Web平台安装程序.下载地址:http://www.microsoft.com/ ...
- Exceptionless搭配log4net记录日志
接上篇: Exceptionless 本地部署 在部署完成后可以使用log4net搭配Exceptionless来记录日志. 过程很简单,使用Nuget安装Exceptionless.Log4net, ...
- Python 基础语法——数字和表达式(包含数学上的一些函数)
>>> 2+2 4 >>> 1/2 0 >>> 1.0/2.0 0.5 >>> 1/2.0 0.5 >>> 1 ...