盒子模型有两种 一种是 内容盒子模型 一种是边框盒子模型。

  内容盒子模型(标准盒子模型)由width和height中指定的元素的尺寸不包括内边距和边框 仅是指的内容的实际尺寸;

网上搜索了两张配图不错 很直观。

边框盒子模型(IE6 的盒子模型)起源于IE的怪异模式中的一个bug。对元素指定的width和height 包括了内边距和边框的高度。

  在CSS3中引进了 box-sizing属性,默认值为content-box(标准盒子模型)如果替换为border-box 浏览器会给该元素应用IE盒子模型。即width属性将包含边框的宽度以及内边距。当想以百分比形式设置元素的总体尺寸,又想以像素的单位制定边框和内边距时候,边框模型特别有用。

比如:我要为外部元素设置padding元素留白、添加一个内部元素设置border宽度为3px;padding:4px;使其填满外部元素的空间,于是设置内部元素的尺寸为100%

<div class="outdiv">
<div class="innerdiv"></div>
</div.outdiv>
.outdiv{
position:relative;
left:40px;
top:40px;
width:200px;
height:200px;
padding:10px;
background:red
}
.innerdiv{
border:3px solid blue;
padding:4px;
width:100%;
height:100%;
background:green;
}

  结果如下

这种结果是非常糟糕,元素的大小比与想要的结果要大了。于是给内部的div增加一个box-sizing:border-box属性,结果如下

边框模型在CSS3中的另一个可选方案可以使用calc来计算尺寸。width设置为100%-2*border-2*padding比如把CSS 设置为如下,也可以达到上述的效果Demo

.innerdiv{
border:3px solid blue;
padding:4px;
width:calc(100% - 2 * 3px - 2 * 4px);
height:calc(100% - 2 * 3px - 2 * 4px);
background:green;
}

  

(注意运算符用空格隔开)

盒子模型 以及CSS的box-sizing属性。的更多相关文章

  1. 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  2. Flexible 弹性盒子模型之CSS justify-content 属性

    实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...

  3. Flexible 弹性盒子模型之CSS order 属性

    实例 设置弹性盒对象元素的顺序: div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPi ...

  4. Flexible 弹性盒子模型之CSS flex-basis 属性

    实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;}   效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...

  5. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...

  6. Flexible 弹性盒子模型之CSS flex-grow 属性

    实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-t ...

  7. Flexible 弹性盒子模型之CSS align-self 属性

    实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...

  8. Flexible 弹性盒子模型之CSS align-items 属性

    实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...

  9. Flexible 弹性盒子模型之CSS flex-wrap 属性

    实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...

随机推荐

  1. ubuntu安装Percona Server

    Percona Server是mysql数据库的一个衍生版本,在性能,稳定性和可管理性上都有很大的提升,目前淘宝的mysql数据库就是基于Percona Server,请原谅我这么喜欢研究淘宝的技术. ...

  2. JSP显示错误信息中四个范围来保存变量

    JSP中提供了四个范围来保存变量,分别是page,request,session,以及application 其中page范围只在当前页面有效,离开当前页面就失效了,这个肯定不行 request范围在 ...

  3. linux 常用查看设备命令(转)

    # uname -a # 查看内核/操作系统/CPU信息 # /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算 ...

  4. Java实现主线程等待子线程

    本文介绍两种主线程等待子线程的实现方式,以5个子线程来说明: 1.使用Thread的join()方法,join()方法会阻塞主线程继续向下执行. 2.使用Java.util.concurrent中的C ...

  5. 【315】Windows 之间代码自动传文件

    对于 Windows 内部自动复制/移动文件可以通过 批处理 来完成,对于不同的电脑之间的实现也是相同的方法,但是需要将一台电脑的对应文件夹设置成 共享,只要在另一台电脑能够直接访问共享的文件夹,就可 ...

  6. 【301】IDL与C#混合编程

    目录: 一.COM_IDL_CONNECT 1. 添加组件 2. 组件初始化 3. 功能调用 4. 数据传递 二.IDLDrawWidget组件 C# (C Sharp)是微软公司在2000年6月发布 ...

  7. filter入门

    TestFilter.java package com.cdsxt.filter; import java.io.IOException; import javax.servlet.Filter;im ...

  8. System.Diagnostics.Conditional

    [System.Diagnostics.Conditional] 指示编译器当特定的宏定义了时,才生成此方法的相应代码.只能应用于AttributeClass.Method. 参考:http://ms ...

  9. C#自省

    [C#自省] 1.根据string,获取type.Type.GetType 方法,获取具有指定名称的 Type,执行区分大小写的搜索. 2.根据obj,获取type.Object.GetType 方法 ...

  10. C# Common Keyword II

    [C# Common Keyword II] 1.as 运算符用于在兼容的引用类型之间执行某些类型的转换. class csrefKeywordsOperators { class Base { pu ...