<!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. 这些年，我收集的JavaScript代码(一)

    一.取URL中的参数 function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)' ...

  2. android:TextAppearance.Material.Widget.Button.Inverse问题

    如果在刚够构建Android Studio项目的时候,运行发现,出现没找到资源的错误!找不到com.android.support/appcompat-v7/23.0.1/res/values-v23 ...

  3. WebView cookies清理

    今天在项目中发现一个BUG 在使用新浪微博账户登录应用时,webview会自动登录上次的微博帐号!(因为webview 记录了微博帐号和密码的cookies) 所以,需要清除SessionCookie ...

  4. 【IOS】在SDK中打开其他接入应用的解决方案

      在SDK中打开其他接入应用的解决方案 一直以来,在iOS的开发中,在程序中打开另外一个应用是不允许.后来有正义之士用class-dump在私有API中找到了这样的功能.那就是使用UIApplica ...

  5. MSSQL 日期操作函数 总结

    set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go ALTER FUNCTION [dbo].[ufn_getDateOfWeek] (@Date Dateti ...

  6. Python导入模块的三种形式

    Python导入模块的3中方式: 1.import module_name 这样在程序里就可以通过module_name.metnod_name()的方式访问模块里的函数了 Example: > ...

  7. Body joints angle using Kinect

    http://stackoverflow.com/questions/12608734/body-joints-angle-using-kinect-checking-time-interval?rq ...

  8. Sql Server 列转行 Pivot使用

    今天正好做 数据展示,用到了列转行,行转列有多种方式,Pivot是其中的一种,Povit 是sql server 2005以后才出现的功能, 下面的业务场景: 每个月,进货渠道的总计数量[Total] ...

  9. OC中对象元素的引用计数 自动释放池的相关概念

    OC中数组对象在是如何处理对象元素的引用计数问题的,同时介绍一下自动释放池的相关概念 一.数组对象是如何处理对象元素的引用计数问题[objc]  view plaincopy 1. //   2. / ...

  10. javascript原型链继承

    一.关于javascript原型的基本概念: prototype属性:每个函数都一个prototype属性,这个属性指向函数的原型对象.原型对象主要用于共享实例中所包含的的属性和方法. constru ...