<!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. mongo设计（三）

    原文:http://blog.mongodb.org/post/88473035333/6-rules-of-thumb-for-mongodb-schema-design-part-3 By Wil ...

  2. ffmpeg在Win7 VS2010中debug通过，release出错的问题解决方法

    我所用的系统环境是Win7 32位操作系统+VS2010编译环境.所以在debug模式下调通之后,在Release模式下调试不通过,最后通过上网查资料和自己对比两个编译选项得出以下结论: 修改“项目- ...

  3. IO-03. 求整数均值

    /** *A3-IO-03. 求整数均值(10) *C语言实现 *测试已通过 */ #include "stdio.h" int main() { int a,s,d,f; sca ...

  4. Database.SetInitializer的几种参数

    一:数据库不存在时重新创建数据库 Database.SetInitializer<testContext>(new CreateDatabaseIfNotExists<testCon ...

  5. python 网络编程第四版

    使用SocketServer 模块来完成服务端编程 1.服务端代码如下: #!/usr/bin/python #!coding:utf-8 import SocketServer as sockets ...

  6. 提交(post)xml文件给指定url的2种方法

    原文:提交(post)xml文件给指定url的2种方法 1  这段代码是在网上搜到的,拿来共享,项目正好要用到.其中的data你只需要传递一个xml字符串就可以 protected   string  ...

  7. Codeforces 734F Anton and School（位运算）

    [题目链接] http://codeforces.com/problemset/problem/734/F [题目大意] 给出数列b和数列c,求数列a,如果不存在则输出-1 [题解] 我们发现: bi ...

  8. SQL server指定随机数范围

    declare @randnum int=0declare @startnum int =0declare @endnum int=0 set @startnum = 150 set @endnum ...

  9. 创业青年：刘霞（YBC推荐）_CCTV.com_中国中央电视台

    创业青年:刘霞(YBC推荐)_CCTV.com_中国中央电视台 创业青年:刘霞(YBC推荐) CCTV.com  2009年06月23日 09:57  进入复兴论坛  来源:央视网       姓名 ...

  10. WildFly8.1(JBoss)+mod_cluster(Apache)群集配置

    继上次使用mod_jk传导Apache+JBoss群集配置后,.因为JBoss5.1启动太慢,于是我开始尝试用最新的WildFly8.1构造(WildFly那是,JBoss.在JBoss7之后改名). ...