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

总宽度=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. C# 接口基础学习

    什么是接口  接口,在表面上是由几个没有主体代码的方法.属性.索引器.事件,或者它们的组合的集合体,有唯一的名称,可以被类或结构或者其他接口所实现(或者也可以说继承).它在形式上可能是如下的样子: i ...

  2. [bzoj1592] Making the Grade

    [bzoj1592] Making the Grade 题目 FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也就是说,高度上升与高度下降的路段不能 ...

  3. CSS3伪类实现动画旋转效果

    一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方.利用了伪类实现css3动画效果,初学者可以看一下,恩.<!doctype html> <html lang= ...

  4. python--DenyHttp项目（2）--ACM监考客户端测试版（1阶段客户端总结）

    客户端: 1.既然脚本是让别人用的,怎么说也得有个界面,(虽然很low) ''' DenyManager.py 调用客户端与客户端界面 ''' from DenyClient import * fro ...

  5. java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare()

  6. equals()与 == 比较，hashCode方法

    1.Object类    Object类是java中一切类的父类,java中所有的类都直接或间接    继承自Object类        Object中定义的方法不多,原因在于,java的类多种多样 ...

  7. iOS 横竖屏切换解决方案

    iOS要实现横竖屏切换很简单,不需要使用任何第三方,只需要实现几个方法就可以了. 1.设置系统支持横竖屏[General]->[Targets]-> [Deployment info]-& ...

  8. Oracle Test 日志

    这是一个在本地写日志的软件,写一篇看看效果怎么样. 我主要想看看这个行间距ok不... 看看效果...

  9. 【转】VLAN原理详解

    1.为什么需要VLAN 1.1 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.V ...

  10. NSThread创建线程的三种方法

    - (IBAction)NSThreadBtnClick:(id)sender { [self threadObjectMethod]; [self threadClassMethod]; [self ...