<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>盒子模型</title>

    <link rel="stylesheet" href="style/box.css">

</head>

<body>

标准盒模型

<hr />

    <div class="bag">

        <div class="shoes_box">

            <div class="shoes">

        鞋子

    </div>

    </div>

    </div>

怪异盒模型

<hr />

    <div class="bag1">

        <div class="shoes_box1">

            <div class="shoes1">

        鞋子

    </div>

    </div>

    </div>

</body>

</html>
/*盒子模型*/

.shoes{

    width: 100px;

    height: 100px;

    background: #F69A0B;

    text-align: center;line-height: 100px;

    color: #fff;

}

.shoes_box{

    padding: 10px;

    width: 100px;

    height: 100px;

    background: #FE6403;

    border: 5px solid #02C3F5;

}

.bag{

    width: 130px;

    height: 130px;

    margin:100px;

}

/*怪异盒模型*/

.shoes1{

    width: 100px;

    height: 100px;

    background: #F69A0B;

    text-align: center;line-height: 100px;

    color: #fff;

}

.shoes_box1{

    padding: 10px;

    width: 130px;

    height: 130px;

    background: #FE6403;

    border: 5px solid #02C3F5;

    box-sizing:border-box;

}

.bag1{

    width: 130px;

    height: 130px;

    margin:100px;

}

CSS3：box-sizing 怪异盒模型的更多相关文章

  1. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型

    CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起 ...

  3. CSS盒子模型与怪异盒模型

             盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...

  4. 标准盒模型、怪异盒模型（box-sizing）

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

  5. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  6. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  7. CSS3总结四：盒模型（box）

    盒模型:标准盒模型.混杂盒模型 什么时候会触发混杂模式? 为什么要混杂模式渲染规则盒模型? box-sizing:content-box.border-box 关于盒模型的一些其他样式和属性值 一.盒 ...

  8. 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

    提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...

  9. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

随机推荐

  1. java基础学习（一）hashcode

    hashcode的作用 hashCode()方法是从Object类继承过来的,Object类中的hashCode()方法返回的是对象在内存中地址转换成的int值,如果对象没有重写hashCode()方 ...

  2. 汕头市队赛 SRM 06 C 秀恩爱

    C 秀恩爱 SRM 06 背景&&描述         KPM坐在直升机上俯瞰小渔村景象.         渔村可看作二维平面,密密麻麻地到处都是单身狗,KPM当前所在坐标为(sx,s ...

  3. [bzoj3931][CQOI2015]网络吞吐量——最短路+网络流

    题目 传送门 题解 第一次一遍就AC一道bzoj上的题,虽然是一道水题... 我们做一边最短路,求出每个点的dist,然后再做一次类似spfa的操作,求出每个点是否可以用于建图. 在新图上拆点跑一边d ...

  4. Python3中的Bytes和str之间的关系

    文本总是unicode字符集,用str类型表示. 二进制数据则由bytes表示.(通过socket在网络上传输数据时必须要用二进制格式)   Python不会以任何隐式的方式混用str和bytes,所 ...

  5. swift 之嵌套的理解 func chooseStepFunction(backwards: Bool) -> (Int) -> Int

    http://blog.csdn.net/lzx_322/article/details/28861199 swift 函数使用前面需要添加 func 有返回值需要使用-> 后面添加返回类型 , ...

  6. Raspberry Pi使用

    1. 介绍 笔者Raspberry Pi 2 Model B为例介绍 1.1 参数 Raspberry Pi 2 Model B硬件参数如下: · Broadcom BCM2836 900MHz 4核 ...

  7. 冒泡排序的思想 python 冒泡排序、递归排序

    冒泡排序的时间复杂度是O(N^2) 冒泡排序的思想: 每次比较两个相邻的元素, 如果他们的顺序错误就把他们交换位置 比如有五个数: 12, 35, 99, 18, 76, 从大到小排序, 对相邻的两位 ...

  8. 转载：document.execCommand()的用法小记

    首先要说明的是在firefox下支持不好.2D-Position 允许通过拖曳移动绝对定位的对象. AbsolutePosition 设定元素的 position 属性为“absolute”(绝对). ...

  9. k8s通过configmap管理应用配置信息

    Secret 可以为 Pod 提供密码.Token.私钥等敏感数据:对于一些非敏感数据,比如应用的配置信息,则可以用 ConfigMap. ConfigMap 的创建和使用方式与 Secret 非常类 ...

  10. docker从零开始 存储（四）tmpfs挂载

    使用tmpfs挂载 volume和bind mounts允许您在主机和容器之间共享文件,以便即使在容器停止后也可以保留数据. 如果你在Linux上运行Docker,你有第三个选择:tmpfs moun ...