<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #content{width:440px;height:200px;border:1px solid #f45}

         #nei{width:100px;background:#f45;border:20px solid #f0f;height:100px;padding:30px;

         margin:20px;

             box-sizing: border-box;}

         .h{width:10px;height: 10px;background:#00f;}

         .content{width:100%;height:20px;background:#00f;}

         .tip{width:50%;padding:10px;box-sizing: border-box;background:#f0f;float:left;border:3px solid #ff0}

     </style>

 </head>

 <body>

 <div id="content">

     <div id="nei">

         <div class="h"></div>

     </div>

 </div>s

 <div class="content">

     <div class="tip"></div>

     <div class="tip"></div>

 </div>

 <!--order-box,含义是将盒子的border和padding计算到设置的width中，而不是实际宽度中。所以，

 如果你设置width为100px，而border为1px的时候，盒子的实际大小仍旧是100px而不是102px。用这个属性，-->

 </body>

 </html>

学习内容源自：http://www.cnblogs.com/constantince/p/4896419.html

css新属性box-sizing应用的更多相关文章

  1. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 点击穿透事件-----CSS新属性

    面试被问,一脸懵,被提示,还蒙,好丢脸的感觉....赶紧百度了解 .noclick{ pointer-events: none; /* 上层加上这句样式可以实现点击穿透 */ } 就是说重叠在一起的两 ...

  3. Shape-in​​side css新属性 几何图形的实现

    https://www.w3cplus.com/css3/css-shapes-101.html

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  6. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  7. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  8. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  9. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

随机推荐

  1. hdu 5126 stars cdq分治套cdq分治+树状数组

    题目链接 给n个操作, 第一种是在x, y, z这个点+1. 第二种询问(x1, y1, z1). (x2, y2, z2)之间的总值. 用一次cdq分治可以将三维变两维, 两次的话就变成一维了, 然 ...

  2. 用python开发简单ftp程序

    根据alex老师视频开发的简单ftp程序,只能实现简单的get功能 ftp客户端程序: #!/usr/bin/env python #_*_ coding:utf-8 _*_ import socke ...

  3. .Net中String和StringBuilder的区别

    String对象是不可变的而StringBuilder则不是这样,可以方便的Append进行扩展. 比如:string aa="123456",那么aa就会在内存中占用一块能放下这 ...

  4. linux学习（二）-目录的操作命令

    Linux命令大全:http://www.jb51.net/linux/ 目录分绝对路径和相对路径 : 绝对路径,在路径前会加  / 相对路径就是相对于当前的路径,直接 路径名即可. 查看目录: cd ...

  5. 可用的CSS文字两端对齐

    最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideogra ...

  6. MySQL 查询结果以百分比显示

    找了一些资料,然后我是用到了MySQL字符串处理中的两个函数concat()和left()1.[CONCAT(str1,str2,...)  返回来自于参数连结的字符串.如果任何参数是 NULL, 返 ...

  7. jquery Ztree v3.5 实例2 自定义显示在节点前的图片

    显示效果如下: 代码如下: <html> <head><title></title></head> <script type=&quo ...

  8. workspace & subProject & target

    workspace & subProject & target http://blog.itpub.net/12231606/viewspace-1079867/ 最近新入一个项目组, ...

  9. C++关键字(1)——const

    1. const修饰普通变量和指针 const修饰变量,一般有两种写法: const TYPE value; TYPE const value; 这两种写法在本质上是一样的.它的含义是:const修饰 ...

  10. lightoj 1064 Throwing Dice

    题意:给你n个骰子,求n个骰子的和不小于x的概率. 刚开始想每给一组数就计算一次~~太笨了- -,看了别人的代码,用dp,而且是一次就初始化完成,每次取对应的数据就行了.WA了好多次啊,首先不明白的就 ...