<!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. React 同构

    React 同构 搬运 https://segmentfault.com/a/1190000004671209 究竟什么是同构呢? 同构就是希望前端 后端都使用同一套逻辑 同一套代码 Nodejs出现 ...

  2. python 网络编程第一版

    --version 1.0 只完成server/client 之间的通信. 1.server端的代码: #!/usr/bin/python #!coding:utf-8 from socket imp ...

  3. python----脚本文件的头部写法。

    #!/usr/bin/python #这里主要是为了指明python脚本解释器的路径. #!coding:utf-8#这个是为了告知python脚本文件解释器,此脚本的字符集. import sys ...

  4. LPC同STM32的比较

    Cortex-M3是新兴起来的一种ARM7的核,而ARM7TDMI是一种传统的经典的ARM内核.我们就抛开这一切,来比较一下两则的异同. 我们就在以下平台上比较吧: STMicoelectronics ...

  5. python map, reduce,filter 使用

    参考python built-on function: http://docs.python.org/2.7/library/functions.html?highlight=map%20reduce ...

  6. SQL Server 中@@IDENTITY的用法

    原文地址:http://www.studyofnet.com/news/145.html 本文导读:@@IDENTITY是返回上次插入的标识值,标识值一般指的是自动增长值.但是如果想只返回插入到当前作 ...

  7. 【翻译自mos文章】改变数据库用户sysman（该用户是DB Control Repository 的schema）password的方法

    改变数据库用户sysman(该用户是DB Control Repository 的schema)password的方法 參考原文: How To Change the Password of the ...

  8. Java学习笔记---继承和super的用法

    自从换了个视频教学,感觉比原来那个好多了,就是学校网速太渣,好多视频看一会卡半天,只能先看看已经下载的了. 不过也好,虽然不能从开始开始重新开,但是已经看过一次,在看一次也是好的,就当巩固学习了. 继 ...

  9. 【转】 LESS CSS 框架简介

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  10. node.js(六) UTIL模块

    1.inspect函数的基本用法 util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象转换为字符串的函数,通常用于调试和错误输出.它至少 ...