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

总宽度=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. 基于Windows环境下Myeclipse10.0下载安装破解及jdk的下载安装及环境变量的配置

    jdk的安装及环境变量的配置 1.安装JDK开发环境 附上jdk安装包的百度云链接 链接:http://pan.baidu.com/s/1mh6QTs8 密码:jkb6(当然自行去官网下载最好哒,可以 ...

  2. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  3. 假面舞会[NOI2008]

    题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告 ...

  4. git for windows+TortoiseGit客户端的使用二

    通常都是使用git协议方式来连接服务器,然后使用https方式的连接方法,是如何设置的: 先登录github服务器,获取远程服务器仓库: 在本地创建一个存放仓库的目录,然后使用tortoiseGit客 ...

  5. (3)markdown软件的使用

    运行Mou.zip解压出来一个软件,它让托到应用程序中,然后打开 另一种软件为gitBook 安装好软件后,使用快捷键F4可以调出所有的应用程序 使用md(markdown简称)有个缺点就是,当内容比 ...

  6. HPU--1091 N!的位数

    1091: N!的位数 [数学] 时间限制: 1 Sec 内存限制: 128 MB提交: 97 解决: 12 统计 题目描述 我们知道n!=n*(n-1)*(n-2)*-*2*1. 那么给定一个n,n ...

  7. How to remotely shut down any PC on same network

    Syntax: net viewping (name of victim's PC)shutdown -i Empirical: Try one of the school's public PC R ...

  8. APP测试容易忽略的地方

    我们手机APP测试,主要针对的是android和ios两大主流操作系统,总体上来说android手机型号.版本多,bug也多:ios相对bug少.下面就针对Android说一下最容易忽略的测试点吧. ...

  9. noip2016普及组 题解

    T1 大水题,不解释 上考场代码 #include <algorithm> #include <cstdio> using namespace std; int main() ...

  10. DesignPatternPrinciple（设计模式原则）一

    设计模式六大原则(1):单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责.  问题由来:类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需 ...