<!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. ubuntu下lnmp的安装

    适用于ubuntu14.04和源是14.04的ubuntu上安装nginx(我学在线Moodle工作室---注这里安装的是最新版的nginx,并且解决pathinfo问题,特别适用于Moodle安装) ...

  2. php数字转中文

    function number2Chinese($num, $m = 1) { switch($m) { case 0: $CNum = array( array('零','壹','贰','叁','肆 ...

  3. PYthon成长之路第一篇(1)__字符串初识

    今天一起走进python的代码世界,一起领悟python的魅力 在很多学习python的书中都会以 print  “Hello,world!” 这样的而一个程序为开始,那么其中的 hello,worl ...

  4. centos6.5图形界面NetworkManager 配置ip文件位置

    请教一个关于网络配置的问题,如图:该网络连接图形界面中 有2个配置,其中System eth0 有对应的配置文件/etc/sysconfig/network-scripts/ifcfg-eth0,但是 ...

  5. securecrt在linux与windows之间传输文件(转)

    摘自:http://blog.csdn.net/rangf/article/details/6096365 SecureCRT这款SSH客户端软件同时具备了终端仿真器和文件传输功能.比ftp命令方便多 ...

  6. 【Leetcode】Set Matrix Zeroes

    给定一个m x n的矩阵,如果某个元素为0,则把该元素所在行和列全部置0. Given a m x n matrix, if an element is 0, set its entire row a ...

  7. 设计模式之二十四：訪问者模式(Visitor)

    訪问者模式: 定义了一个作用于一个类的一些操作,訪问者模式同意在不改变类的前提下添加一些操作. Represent an operation to be performed on the elemen ...

  8. 自己动手写CPU之第五阶段（3）——MIPS指令集中的逻辑、移位与空指令

    将陆续上传本人写的新书<自己动手写CPU>(尚未出版),今天是第17篇.我尽量每周四篇 5.4 逻辑.移位操作与空指令说明 MIPS32指令集架构中定义的逻辑操作指令有8条:and.and ...

  9. 【POJ 1125】Stockbroker Grapevine

    id=1125">[POJ 1125]Stockbroker Grapevine 最短路 只是这题数据非常水. . 主要想大牛们试试南阳OJ同题 链接例如以下: http://acm. ...

  10. std::string转化大小写(C++)

    #include <string> #include <algorithm> void test() { std::string strA="QQQQWWWqqqqq ...