盒子模型不必多少，公认的盒子模型

总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right)

而怪异盒子模型

总宽度=width

哎 语文老师是数学教的 没办法只能表述成这样了，没关系看图，

先看下传统盒子模型 ，结构和代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .big-box{

             width: 100px;

             height: 100px;

             margin: 50px auto;

             background: #cacaca;

             padding: 10px;

             border: 5px solid #cf2d28;

         }

     </style>

 </head>

 <body>

     <div class="big-box"></div>

 </body>

 </html>

是的 很easy的一段代码，页面如下

这很好理解，好的 在浏览器里看下具体的盒子模型，很直观可用区域100px两边padding10px, border5px;

如果按照上面说的传统盒子计算公式就可以计算出总宽度：100+10*2+5*2 = 130 ，在浏览器指向看总宽度

显示130 X 130 perfect 完全想等。。

再看下怪异盒子模型啥样的，同样的上面结构和样式，现在在样式里面加个box-sizing:border-box;

页面展示就不看了和上面差不多，看下浏览器中具体的盒子模型

what's up，！！ 里面可用区域变成70px，而且也不是像刚才有几种颜色现在里面全是白色，但padding还是10px，border还是5px;

浏览器指向看显示总宽度100px; 和刚才定义的 总宽度=width 符合，

明白了，传统盒子padding和border的宽都是在width外面的，此时width多少就是可用区域多大，

怪异盒子就是padding和border的宽都是在width里面，width减去他俩的宽才是可用区域的宽，搜嘎

看张图

这个如果在网页中做是很好做，但是是在移动端用的，如果用传统布局和单位随着不同和越小的尺寸会把布局打乱掉，好的先布下局

         <div class="user-list">

             <ul>

                 <li>

                     <img src="data:images/user-icon (1).png">

                     <span>个人信息</span>

                 </li>

                 <li>

                     <img src="data:images/user-icon (2).png">

                     <span>银行信息</span>

                 </li>

                 <li>

                     <img src="data:images/user-icon (3).png">

                     <span>投资记录</span>

                 </li>

                 <li class="im-width"></li>

                 <li>

                     <img src="data:images/user-icon (4).png">

                     <span>取款</span>

                 </li>

                 <li>

                     <img src="data:images/user-icon (5).png">

                     <span>注资</span>

                 </li>

                 <li class="im-width"></li>

             </ul>

         </div>

样式如下

 .user-list{

     width: 100%;

     padding:0 5%;

 }

 .user-list ul{

     width: 100%;

     list-style: none;

 }

 .user-list ul li{

     float: left;

     width: 33.3%;

     height: 7.5em;

     background: #ececec;

     text-align: center;

     -moz-box-sizing: border-box;

     -webkit-box-sizing: border-box;

     -o-box-sizing: border-box;

     -ms-box-sizing: border-box;

     box-sizing: border-box;

     margin-bottom: 5px;

     border-right: 5px solid #f2f2f2;

     position: relative;

 }

 .user-list ul li.im-width{

     width: 16.7%;

     background: #f2f2f2;

 }

 .user-list ul li img{

     width: 55%;

 }

 .user-list ul li span{

     position: absolute;

     bottom:;

     left:;

     width: 100%;

     text-align: center;

     color: #464646;

     font-size: 1em;

 }

此时无论怎么改变屏幕尺寸这个布局是不会改变的，

下面box-sizing的兼容,虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：

     -moz-box-sizing: border-box;

     -webkit-box-sizing: border-box;

     -o-box-sizing: border-box;

     -ms-box-sizing: border-box;

     box-sizing: border-box;

box-sizing怪异盒子模型在移动端应用的更多相关文章

  1. CSS3_标准盒子模型和怪异盒子模型

    #box{ width: 200px; height: 200px; background-color: pink; } 标准盒子模型 box-sizing: content-box; padding ...

  2. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  3. 怪异盒子模型和行内元素的float

    设置了float属性的行内元素的display值会变成inline-block 怪异盒子模型: box-sizing:border-box:元素content包含内间距和border

  4. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  5. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  7. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  8. 怪异盒模型和标准盒模型--CSS

    一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...

  9. 从CSS盒子模型说起

    前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要 ...

随机推荐

  1. tomcat 日志 按天自动分割 设定时任务定时清除

    一.日志分割所需jar包 1.下载tomcat   apache-tomcat-7.0.79.tar.gz 地址:http://www.apache.org/dist/tomcat/tomcat-7/ ...

  2. Python实现单词查询&文件查找

    最近学C++ Primer,做到第十二章有个习题.要求针对英文文本,对于用户想搜索的单词,打印出该单词在文本中出现的总次数,单词所出现行号及对应的行内容:单词在一行内出现多次,只打印该行一次.C++的 ...

  3. TeamCity : Build 失败条件

    允许用户配置 Build 失败的条件是很有用的功能,它是我们配置复杂 Build 流程的基础.TeamCity 为用户自定义 Build 失败条件提供了很好的支持.这些条件大体上可以分为两类,分别是: ...

  4. CentOS6.3 下安装codeblocks

    本人用的系统是centos6.3(虚拟机) 需要预先安装gcc编译器(参考:http://www.cnblogs.com/magialmoon/archive/2013/05/05/3061108.h ...

  5. 剑指offer--二叉树的后序遍历

    思路:对于一个二叉树的后序遍历序列来说,最后一个数一定是根节点,然后前面的数中,从最开始到第一个大于根节点的数都是左子树中的数,而后面到倒数第二个数应该都是大于根节点的,是右子树,如果后面的数中有小于 ...

  6. 解决UIViewController中添加子控制器viewWillAppear不调用问题

    问题描述: 我在UICollectionViewController中添加子控制器数组, 并在cellForItem中把子控制器数组中对应的控制器对应的view添加到了UICollectionView ...

  7. 转换Json中的时间戳为标准时间格式

    //出自http://www.cnblogs.com/ahjesus function ConvertJSONDateToJSDate(jsonDate) {        ///    <su ...

  8. Jmeter==HTTP信息头管理器的作用

    HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post)的时候,往往后端需要一些验证信息,比如说web服务器需要带过去c ...

  9. 小米wifi

    场景:把小米wifi插主机上,作为热点发射器:然后使用手机搜索到这个热点,建立wifi连接 驱动:当＂把小米wifi插主机上＂的时候,主机可能无法识别这个设备,所以需要前往官网下载驱动 下载地址:ht ...

  10. Java面经 面试经验 互联网公司面试经验 后端面试经验

    应聘相关 声明: 1,程序员相关的哈 2,万事无定论,比如说,就算你小学毕业,但是java基础却扎实到变态,我相信open的公司还是会给你机会的. 3,心态很重要,虽然日常的心态不容易控制,面试那俩小 ...