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

  内容盒子模型(标准盒子模型)由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. java实现心型、99乘法demo

    package com.js.ai.modules.pointwall.interfac; import java.awt.Font; import javax.print.attribute.sta ...

  2. 打开图片并显示在面板上demo

    import java.awt.EventQueue; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...

  3. wkhtmltopdf Windows下 测试demo 成功

    html2pdf 转pdf 中文不换行 然后找到了wkhtmltopdf 支持中文换行 样式也支持 在PHP中生成PDF文件,可以使用 FPDF 和 TCPDF .但是它们只能用于创建简单的表格,当涉 ...

  4. 带你剖析淘宝TDDL——Matrix层的分库分表配置与实现

    前言 在开始讲解淘宝的TDDL(Taobao Distribute Data Layer)技术之前,请允许笔者先吐槽一番.首先要开喷的是淘宝的社区支持做的无比的烂,TaoCode开源社区上面,几乎从来 ...

  5. C# 生成序号不足补0

    int Num=13 var code =Num.ToString().PadLeft(4, '0'); code:0013

  6. i++的原子性问题

    一.什么是原子性 简单的可以理解为:操作是不可再分割的,比如: int i=0; 但是i++的操作是可以再分的,比如: i++ //分解后 i=i+i 上面的代码在多线程环境下取值是有问题的,比如: ...

  7. Memcache 内存对象缓存系统

    简介: Memcached 是一个高性能的分布式内存存储对象缓存系统,用于动态 WEB 应用以减轻数据库负载. 它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度. ...

  8. 解决Tomcat 一闪而过的问题

    启动tomcat时cmd窗口一闪而过解决方法. 问题现象: 在实际开发中一般都是eclipse+tomcat(也许还会用到tomcat的插件),我们只需要在eclipse中单击servers上的按钮就 ...

  9. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 11—Machine Learning System Design 机器学习系统设计

    Lecture 11—Machine Learning System Design 11.1 垃圾邮件分类 本章中用一个实际例子: 垃圾邮件Spam的分类 来描述机器学习系统设计方法.首先来看两封邮件 ...

  10. os.path.dirname( __ file __ ) 2018/6/2

    os.path.dirname( __ file __ ) 2018/6/2 该测试脚本所在的位置:D:\第1层\第2层\第3层\第4层\第5层\test11.py import os #该文件所在位 ...