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

  内容盒子模型(标准盒子模型)由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. Android——日期格式化转换符

    常见日期格式化转换符 转换符 说 明 示 例 %te  一个月中的某一天(1-31)  2 %tb  指定语言环境的月份简称  Feb(英文).二月(中文) %tB  指定语言环境的月份全称  Feb ...

  2. histroy.back和histroy.go的区别

    histroy.back(-1):直接返回当前页的上一页,数据全部消失,是个新的页面: histroy.go(-1):直接返回当前页的上一页,不过表单里的数据全部还在: histroy.back(0) ...

  3. Python+Selenium爬虫实战一《将QQ今日话题发布到个人博客》

    前提条件: 1.使用Wamp Server部署WordPress个人博客,网上资料较多,这里不过多介绍 思路: 1.首先qq.com首页获取到今日话题的的链接: 2.通过今日话题链接访问到今日话题,并 ...

  4. quartz报错 Couldn't retrieve job because the BLOB couldn't be deserialized: null

    今天线上添加定时任务之后 定时任务查询页面报出如上错误, 原因有两点 1.org.quartz.jobStore.useProperties = true 这个属性的意思存储的JobDataMaps是 ...

  5. DataGrid——行高不起作用

    问题1:rowStyler 设置行高不起作用: 在 DataGrid 组件中,提供了 rowStyler 函数,用于设置行的css 样式,但是实践发现,对于height设置不起作用.跟踪代码发现如下: ...

  6. Halcon学习之八:图像区域叠加与绘制

    版权声明:本文为博主原创文章,未经博主允许不得转载. overpaint_gray ( ImageDestination, ImageSource : : : )  将灰度值不相同区域用不同颜色绘制到 ...

  7. MySQL 基本语法(1.表字段操作,2表记录管理 3.运算符管理4.SQL查询 5.约束6.索引

    .表字段的操作 .语法:alter table 表名 执行动作; .添加字段(add) .添加到末尾 alter table 表名 add 字段名 数据类型; .添加到第一列 alter table ...

  8. Oracle表结构转Mysql表结构

    1. fnc_table_to_mysql 主体程序 create or replace function fnc_table_to_mysql ( i_owner in string, i_tabl ...

  9. GPU架构图

    找了几张GPU架构图,对理解图形渲染管线很有帮助

  10. PHP - 输出缓存 - 关于ob系列函数和flush函数

    偶然机会看到了flush().知道他的神奇功能可以用在异步传输的comet 模式之后,于是我去试了试这个方法.然后翻手册去看了看什么意思.发现它神奇的和ob类函数在一起.有点好奇,先放一放,来说flu ...