box-sizing 订阅
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素,默认值是content-box,设置或检索对象的盒模型组成模式,对应的脚本特性为boxSizing。 展开全文
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素,默认值是content-box,设置或检索对象的盒模型组成模式,对应的脚本特性为boxSizing。
信息
外文名
box-sizing
中文名
box-sizing
box-sizing简介
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 [1]  box-sizing:content-box | border-box默认值:content-boxcontent-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding)此属性表现为标准模式下的盒模型。border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )此属性表现为怪异模式下的盒模型。示例:content-box:.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }实际宽度为:200+10*2+15*2内容宽度为:200border-box:.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }实际宽度为:200内容宽度为:200-10*2-15*2设置或检索对象的盒模型组成模式。对应的脚本特性为boxSizing。写法:内核类型写法(box-sizing)Webkit(Chrome/Safari)-webkit-box-sizingGecko(Firefox)-moz-box-sizingPresto(Opera)-o-box-sizingTrident(IE)IE8:-ms-box-sizing/IE9:box-sizing浏览器是否支持:
收起全文
精华内容
下载资源
问答
  • CSS3 box-sizing属性详解

    2020-12-13 05:06:02
    box-sizing属性包括content-box(default),border-box,padding-box。  1、content-box,border和padding不计算入width之内  2、padding-box,padding计算入width内  3、border-box,border和padding计算入...
  • 有时我们会给页面的元素...1,box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。 CSS Code复制内容到剪贴板 box-sizing: content-box|border-box|inherit;  值 描述 conte
  • 主要介绍了CSS3属性box-sizing使用指南,需要的朋友可以参考下
  • CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border...
  • box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内...
  • 盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. ...这里用到了CSS3 的属性 box-sizing(默认值:content-box) /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; co
  • box-sizing: border-box;` **问题:见截图** ![图片说明](https://img-ask.csdn.net/upload/201908/31/1567221918_787399.png) 会莫名其妙的出现一个空白区域(宽度为:8px,我通过定位调试得知。) **...
  • CSS解读之box-sizing属性

    千次阅读 多人点赞 2017-11-27 19:33:48
    box-sizing属性是CSS3中引入的,有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。这句话有点绕,我理解为它是一种容器高宽的计算方法,...


    box-sizing属性是CSS3中引入的,有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。这句话有点绕,我理解为它是一种容器高宽的计算方法,具体是怎样的一种计算方法,和传统的计算方法又有什么区别,通过下面的例子我们可以很直观的了解到。

           如图1-1所示,两个div均统一设置属性,然后针对第二个div设置了其box-sizing属性,并赋值为border-box。具体代码:

    [html]  view plain  copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title></title>  
    6.     <style type="text/css">  
    7.         div{  
    8.             width: 50px;  
    9.             height: 50px;  
    10.             margin: 10px;  
    11.             padding: 10px;  
    12.             border: 10px solid #888;  
    13.         }  
    14.         #bs{  
    15.             box-sizing: border-box;  
    16.         }  
    17.     </style>  
    18. </head>  
    19. <body>  
    20. <div></div>  
    21. <div id="bs"></div>  
    22. </body>  
    23. </html>  

    图1-1

           从图1-1中可以看出两者大小的区别非常明显,我们可以借助谷歌浏览器来查看两者是如何计算的。图1-2是传统的计算方法,也就是上面第一个div的大小。

    图1-2 传统计算方法

           从图1-1中可以看出实际div的宽度为50+10*2+10*2=90px。因为我们给div指定的高宽是指的内容区的高宽,也就是图1-1中最里面的那个区域。

    图1-3 border-box

           图1-3是第二个div的实际计算大小,这里div的实际宽度为10+10*2+10*2=50px,这么一计算,我们就很明白了,原来在设置了box-sizing为border-box后,容器的高宽就是实际容器的高宽,而不是单纯指的是内容区的大小。也可以理解为,这时候的高宽计算方式把padding和border大小也算进来了。

           box-sizing还有一些其他的属性值,列举了一个表格如下。

    box-sizing属性值

    浏览器说明

    示例

    div{

    width:50px;

    height:50px;

    margin:10px;

    height:10px;

    border:10px solid #8;

    }

    不设定

    默认

    border-box

    IE8+,其他浏览器最新版均支持

    content-box

    padding-box

    仅火狐浏览器

     

    box-sizing属性是CSS3中引入的,有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。这句话有点绕,我理解为它是一种容器高宽的计算方法,具体是怎样的一种计算方法,和传统的计算方法又有什么区别,通过下面的例子我们可以很直观的了解到。

           如图1-1所示,两个div均统一设置属性,然后针对第二个div设置了其box-sizing属性,并赋值为border-box。具体代码:

    [html]  view plain  copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title></title>  
    6.     <style type="text/css">  
    7.         div{  
    8.             width: 50px;  
    9.             height: 50px;  
    10.             margin: 10px;  
    11.             padding: 10px;  
    12.             border: 10px solid #888;  
    13.         }  
    14.         #bs{  
    15.             box-sizing: border-box;  
    16.         }  
    17.     </style>  
    18. </head>  
    19. <body>  
    20. <div></div>  
    21. <div id="bs"></div>  
    22. </body>  
    23. </html>  

    图1-1

           从图1-1中可以看出两者大小的区别非常明显,我们可以借助谷歌浏览器来查看两者是如何计算的。图1-2是传统的计算方法,也就是上面第一个div的大小。

    图1-2 传统计算方法

           从图1-1中可以看出实际div的宽度为50+10*2+10*2=90px。因为我们给div指定的高宽是指的内容区的高宽,也就是图1-1中最里面的那个区域。

    图1-3 border-box

           图1-3是第二个div的实际计算大小,这里div的实际宽度为10+10*2+10*2=50px,这么一计算,我们就很明白了,原来在设置了box-sizing为border-box后,容器的高宽就是实际容器的高宽,而不是单纯指的是内容区的大小。也可以理解为,这时候的高宽计算方式把padding和border大小也算进来了。

           box-sizing还有一些其他的属性值,列举了一个表格如下。

    box-sizing属性值

    浏览器说明

    示例

    div{

    width:50px;

    height:50px;

    margin:10px;

    height:10px;

    border:10px solid #8;

    }

    不设定

    默认

    border-box

    IE8+,其他浏览器最新版均支持

    content-box

    padding-box

    仅火狐浏览器

     

    box-sizing属性是CSS3中引入的,有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。这句话有点绕,我理解为它是一种容器高宽的计算方法,具体是怎样的一种计算方法,和传统的计算方法又有什么区别,通过下面的例子我们可以很直观的了解到。

           如图1-1所示,两个div均统一设置属性,然后针对第二个div设置了其box-sizing属性,并赋值为border-box。具体代码:

    [html]  view plain  copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title></title>  
    6.     <style type="text/css">  
    7.         div{  
    8.             width: 50px;  
    9.             height: 50px;  
    10.             margin: 10px;  
    11.             padding: 10px;  
    12.             border: 10px solid #888;  
    13.         }  
    14.         #bs{  
    15.             box-sizing: border-box;  
    16.         }  
    17.     </style>  
    18. </head>  
    19. <body>  
    20. <div></div>  
    21. <div id="bs"></div>  
    22. </body>  
    23. </html>  

    图1-1

           从图1-1中可以看出两者大小的区别非常明显,我们可以借助谷歌浏览器来查看两者是如何计算的。图1-2是传统的计算方法,也就是上面第一个div的大小。

    图1-2 传统计算方法

           从图1-1中可以看出实际div的宽度为50+10*2+10*2=90px。因为我们给div指定的高宽是指的内容区的高宽,也就是图1-1中最里面的那个区域。

    图1-3 border-box

           图1-3是第二个div的实际计算大小,这里div的实际宽度为10+10*2+10*2=50px,这么一计算,我们就很明白了,原来在设置了box-sizing为border-box后,容器的高宽就是实际容器的高宽,而不是单纯指的是内容区的大小。也可以理解为,这时候的高宽计算方式把padding和border大小也算进来了。

           box-sizing还有一些其他的属性值,列举了一个表格如下。

    box-sizing属性值

    浏览器说明

    示例

    div{

    width:50px;

    height:50px;

    margin:10px;

    height:10px;

    border:10px solid #8;

    }

    不设定

    默认

    border-box

    IE8+,其他浏览器最新版均支持

    content-box

    padding-box

    仅火狐浏览器

     

    转自:http://blog.csdn.net/qinshenxue/article/details/17753005
    展开全文
  • CSS3 Box-sizing属性以及解决兼容性的一些做法。 转载地址:http://blog.sina.com.cn/s/blog_877284510101kt87.html   box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)...

    CSS3 Box-sizing属性以及解决兼容性的一些做法。

    转载地址:http://blog.sina.com.cn/s/blog_877284510101kt87.html
      box-sizingCSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的Box属性之一,那他当然也遵循CSS的Box model原理,为了能更好的学习和理解这个Box-sizing属性,我们有必要先了解一下CSS中Box model的原理。

    CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,他们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系;他们不同之处呢?两者的计算方法不一至:

    1、W3C的标准Box Model:

      /*外盒尺寸计算(元素空间尺寸)*/
      Element空间高度 = content height + padding + border + margin
      Element 空间宽度 = content width + padding + border + margin
      /*内盒尺寸计算(元素大小)*/
      Element Height = content height + padding + border (Height为内容高度)
      Element Width = content width + padding + border (Width为内容宽度)
    

     

    2、IE)传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):

      /*外盒尺寸计算(元素空间尺寸)*/
      Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)
      Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
      /*内盒尺寸计算(元素大小)*/
      Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
      Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)
    

     

    其实原则上来说Box Model是分得很细的,我们这里主要分了两个比较明显的地方,就是外盒模型和内合模型,如上面计算公式所示(后面我将会详细介绍一下CSS中的Box Model)。这样说大家可能还不太好理解,下面我们一起来看一个实际的例子,比如说现在有一个叫boxtest的Div,其具有下面一个属性

     .boxtest {
        border: 20px solid;
        padding: 30px;
        margin: 30px;
        background: #ffc;
        width: 300px;
     }
    

     

    我们先来看一下W3C标准浏览器(Firefox,Safari,Chrome,Opera,IE6+)和传统浏览器(IE6以下版本浏览器)的Layout截图

    上图中明显可以看出IE6以下版本浏览器的宽度包含了元素的padding,border值,换句话来说在IE6以下版本其内容真正的宽度是(width-padding-boder)。用内外盒来说的话,W3C标准浏览器的内盒宽度等于IE6以下版本浏览器的外盒宽度。这样下来我们就需要在IE6下的版本写Hack统一其内外盒的宽度,关于如何处理这样的兼容问题,我在这里不多说,感兴趣的朋友可以点击这里。那么浏览器发展到今天,世面上用IE6以下的浏览器应该所占比例相当的少,但不排除没有人不在用。所以目前浏览器大部分元素都是基于W3C标准的Box Model上,但对于form中的有部分元素还是基于传统的Box Model上,比如说input中的submit,reset,button和select等元素,这样如果我们给其设置border和padding他也只会往内延伸。关于如何处理form中的这些元素,今日将会借此机会和大定一起探讨一下,那么现在我们还是先回到今天的正题上。

    上面简单让大家对CSS的Box Model有了一个初步的概念(如果想了解更多的Box Model相关知识,可以点击W3C Box Model,另外在这里有中文版)。下面开始我们今天的主题——CSS3的Box-sizing。

    语法:

      box-sizing : content-box || border-box || inherit
    

     

    取值说明

    1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)即:Element Width/Height = border+padding+content width/height。

    2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。

    为了更能形像看出box-sizing中content-box和border-box两者的区别,我们先简单来看一人示例图,如下所示:

    兼容浏览器

    box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀:

      
      Element {
         -moz-box-sizing: content-box;  
         -webkit-box-sizing: content-box; 
         -o-box-sizing: content-box; 
         -ms-box-sizing: content-box; 
         box-sizing: content-box; 
      }
            
      
      Element {
         -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的理论知识,我们还是理论和实践结合吧,下面就一起先来看一个简单点的例子:

    HTML Code:

       <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="imgBox" id="contentBox"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">img src="/images/header.jpeg" alt="" /></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
       <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="imgBox" id="borderBox"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">img src="/images/header.jpeg" alt="" /></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
    

     

    CSS Code:

      .imgBox img{
         width: 140px;
         height: 140px;
         padding: 20px;
         border: 20px solid orange;
         margin: 10px;
      }
      #contentBox img{
         -moz-box-sizing: content-box;
         -webkit-box-sizing: content-box;
         -o-box-sizing: content-box;
         -ms-box-sizing: content-box;
         box-sizing: content-box; 
      }
    
      #borderBox img{
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -o-box-sizing: border-box;
         -ms-box-sizing: border-box;
         box-sizing: border-box;
      }
     
    

     

    效果:

    上面效果图让大家很明显的区分开了content-box和border-box的区别了,为了更好的理解,我截了一份他们在Firebug下的一layout分析图:

    Layout分析图再次证明了box-sizing:content-box是维持了W3C的标准Box Model,而box-sizing:border-box是维持了IE传统(IE怪异模式)下的Box Model。其两者区别我在这就不多说了,因为前面说的很清楚了,如果还有不清楚的同学,只要仔细看一下上面那张Layout分析图,我想你会恍惚大悟的。那么box-sizing主要运用在哪些方面呢?我总结了一下,第一点就是我们布局上,第二点就是表单元素上。为什么呢?我想大家在平时布局中都有碰到当两个块元素的宽度刚好是其父元素总宽度时我们布局不会有任何问题,但当你在其中一个块加上padding或border时(哪怕是1px)整个布局就会完全打乱,因为其总宽度超过了父元素的宽度。第二点表单元素,前面我提到过,form有很多元素还是使用的IE传统Box Model,针对这两点,box-sizing将在其身上发挥强大的作用,下面我们分别来看看box-sizing在这两方面的运用:

    一、box-sizing拯救我们的布局

    为了能更好的说明问题,我们先来模仿一个两栏布局,先来看其HTML Code:

      <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="layoutDemo">
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="header" class="innerPadding border">Header Content</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="content" class="clearfix">
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="left" class="aside innerPadding border">Left Sidebar</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>;
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="main-content" class="article innerPadding border">Main Content</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="footer" class="innerPadding border"> Footer Content</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
      </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
    

     

    简单的分析一下,这里把LayoutDemo的div当作我们页中的body,而div#header是页面头部,div#left是页面左边栏,div#main-content是页面主内容,div#footer是页面的页脚,下面我们来模仿一个960的布局(比例缩小一半),我们加上平时布局的样式上去:

     .layoutDemo {
        width: 960px;
        background: #000;     
      }
            
      #header {
        width: 100%;
        background: orange;
      }
            
      #left {
        width: 220px;
        float: left;
        margin-right: 20px
        background: green;
      }
            
      #main-content {
        width: 720px;
        float: left;
        background: gray;
      }
            
      #footer {
        width: 100%;
        background: red;
      }
    

     

    效果:

    到目前布局来说一点问题都没有,那是因为我们子元素宽度加起来刚好与元素的是相等,那么我们现在来变动一下,如果根据设计需要,每个块中内容都离边缘有10px的距离,那么我们先来看看基header,left,main-content,footer这几个块加一个padding:10px,看看有什么变化:

     .innerPadding {
        padding: 10px;
      }
    

     

    效果:

    上图清晰告诉我们,加了一个padding,恶梦就开始来了,header,footer撑破容器伸出去了,main-content也被掉到left的下面了。跟刚才当初的效果可是完全不一样的呀,有人可能会问,如果我不使用padding我只使用border什么怎么样呢?大家猜猜会怎么样?不用猜了,马上换个代码给大家看看,我们只要把刚才的padding注掉换成border,如下所示:

      .border {
         border: 10px solid yellow;
      }
    

     

    效果:

    上图是去掉了padding只加了10px的边框,同样把布局给打乱了。接着把padding和border同时加进去,反正都撑破了布局,就破罐子破摔。加上的效果如下:

    不上我说,大家都知道上图是因为加上了padding和border把布局给打乱了,下面主要看如何用box-sizing来修复这个撑破的布局,前面介绍了,上图中box-sizing是取了其默认值content-box,其Box Model完全符合W3C的标准,为了修复这样的布局,我们需要把Box Model改用IE传统下的解析,这样一加,我们给他加上下面box-sizing属性:

      .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:border-box改变了Box Model后,布局神奇般的好了,记得以前为了处理这样的问题,我们需要改变box的宽度或者在box里面在嵌套一个div,在里面的div中增加padding和border来达到这样的效果。从今天开始,我们不需要那样做了,我们只要通过box-sizing:border-box来改变Box Model回到IE的传统模式下,就可以实现了,只是有一点遗憾的是,我们IE6和IE7不支持,如果为了达到一致的效果,在加上你知道CSS Hack如何写,这样也并不难,你只要让IE6和IE7的宽度改变一下,也能达到效果:

      #left {
        *width:180px; 
      }
      #right {
        *width: 680px;
      }
    

     

    通过上面的hack,我们在IE6和IE7下也能正常显示我们的布局需求。但是大家说讨厌CSS Hack,不想写,那么大家在项目中运用时不得不要考虑一下,但对于我们学习CSS3的box-sizing来说是没有大碍的。

    二、Box-sizing统一form元素风格

    前面简单提到form有些input还是支持IE传统下的Box Model标准,比如说【type="submit"】、【type="reset"】、button、select等,然在搜索box-sizing属性使用时偶尔发现Roger Johansson早在2004年就发表了一篇关于表单元素样式测试的文章《Styling form controls》。他告诉我们如果用样式来控制表单元素在各浏览器下的显示效果是很难,如果还要兼容各系统下的效果更是难上加难。除非使用UI去制作。那么今天我们就要来看看用box-sizing如何来让他们达到一致效果:今天我们只要来测试一下submit,reset,button,section,input[type="text"]几个元素,下面我们先来看其默认状态下的效果(模式是在):

    Html Code:

      <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">form action="#" method="post">
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field">
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="submit" value="submit" class="submit" />
        </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field">
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="reset" value="reset" class="reset" />
        </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field">
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">button class="button">button</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">button>
        </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field">
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="text" value="text" class="text" />
        </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field">
            <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">select name="select" id="select" class="select">
               <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">option value="1">1980</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">option>
            </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">select>
        </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="checkbox" class="checkbox" />checkbox</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="radio" class="radio" />radio</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
        <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">textarea name="textarea" id="" cols="30" rows="3" class="textarea"></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">textarea></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
      </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">form>
    

     

    CSS Code

       <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">style type="text/css">
         body {
            font-size: 12px;
         }
         form {
            width: 200px;
            margin: 20px auto;
            padding: 10px;
            border: 1px solid #ccc;
         }
                    
         .form-field {
            margin-bottom: 5px;
            background: #cdcdcd;
            padding: 2px;
         }
                    
        .submit,
        .reset,
        .button,
        .text,
        .select,
        .textarea {
            width: 80px;
            border-color: red;
        }
                            
        .textarea {
            resize: none;
        }
      </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">style>
    

     

    我们来看其效果,我在效果截图中附上各个部分在firebug下的layout图:

    DOM元素的Layout图明显告诉我们:

    1、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea默认情况下都带有2px的border;

    2、【type="submit"】、【type="reset"】、button默认情况下会有6px的左右padding;height在mac系统下会比在winxp win7系统下少1px,只有16px,(12px的字体时高度为17px);

    3、【type="text"】默认情况下会有1px的上下padding;WinXP和Win7下高度为15px,Mac系统下为14px

    4、【type="checkbox"】默认情况下会有margin:3px 3px 3px 4px,并且宽/高度默认为13px(IE6,IE7默认大约是15px,Mac系统下只有9px)

    5、【type="radio"】默认情况下会有margin: 3px 3px 0 5px的外边,并且宽/高度默认为13px(IE6,IE7默认大约是15px,Mac系统下只有9px)

    6、textarea默认情况带有1px的上下margin;

    最后要说的一点是,上面那些常用的form元素只有【type="text"】和textarea两者是遵循W3C的标准Box Model,而其他几个都是还是遵循IE传统下的Box Model。下面我们在把CSS修改一下,我们把margin、padding和border都统一一下。

      .submit,
      .reset,
      .button,
      .text,
      .select,
      .textarea,
      .checkbox,
      .radio {
         margin: 0;
         padding: 0;
         border-width: 1px;
       }
    

     

    同样我们来看看其各元素在firebug下的Layout分析图:

    Layout图告诉我们,其margin,border,padding现在都统一了,宽度只有【type="checkbox"】和【type="radio"】在不同的系统和浏览器会解析不一样,最明显的上面也说过了,这两个表单元素在IE6和IE7下的宽、高度都是15px,而在Mac系统下是9px,但在WinXP/Win7的Firefox下又是13px,这样给我们在线上的显示效果完全带来了不一样的风格,这也是大家头痛的一个地方;另外还有一点需要说明的一点是,别然在上面的Layout中分析【type="submit"】、【type="reset"】、button的宽度一样,但是在IE6-7之中会随着内容显示不同而宽度不同,关于这个问题大家可以参考前面我写的另一篇文章《input 按钮在IE下兼容问题》。然而最让我们头痛的是表单元素的高度问题,前面也提到过了,在Mac系统下各种表单元素的高度都会比Win系列下少1px,这样给我们也带来很大的烦恼。我在网站搜索,看到nwind写了一篇《如何更好地控制input输入框的高度》,作者拿了【type="text"】做了很仔细的分析,另外Roger Johansson的《Controlling width with CSS3 box-sizing》一文也做过详细的分析。从这两篇文章得知解决这样的兼容问题我们可以使用CSS3的box-sizing的border-box属性。下面我截取【type="text"】的解决高度不一到致的方法,运用到表单元素上来

       .submit,
       .reset,
       .button,
       .text,
       .select,
       .textarea,
       .checkbox,
       .radio {
            margin: 0;
            padding: 0;
            border-width: 1px;
            height: 17px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
       }
                                    
       .checkbox,
       .radio {
            width: 13px;
            height: 13px;
            -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:border-box的layout分析图:

    从Layout图明显的可以看出,现在元素的参数都统一了,但是IE6和IE7是不支持box-sizing的属性,所以为了兼容我们还需要为他们写一个hack:

     
      .submit,
      .reset,
      .button,
      .text,
      .select,
      .textarea,
      .checkbox,
      .radio {
         margin: 0;
         padding: 0;
         border-width: 1px;
         height: 17px;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -o-box-sizing: border-box;
         -ms-box-sizing: border-box;
         box-sizing: border-box;
         
         *height:15px; 
         *width: 15px;
       }
    

     

    上面详细介绍了form元素如何使用box-sizing来解决浏览器兼容问题。需要提醒大家一点的是,如果你在样式中没有对border进行设置的话,那么表单中除了checkbox和radio外默认都是2px的border,这样一来你的宽度和高度在都要相应的减去4px。

    展开全文
  • 当前标签用了position:relative;且子标签用了position:absolute; 导致盒子失效了

    当前标签用了 position: relative;且子标签用了 position: absolute;

    导致盒子失效了

    展开全文
  • CSS3的box-sizing 属性

    2021-01-14 17:33:16
    CSS3的box-sizing 属性 box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式 box-sizing: content-box; 这是默认属性,盒子的宽度和高度只包含内容,不包含内边距和边框 box-sizing: border-box; 盒子宽度和...

    CSS3的box-sizing 属性

    box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式
    box-sizing: content-box; 这是默认属性,盒子的宽度和高度只包含内容,不包含内边距和边框
    box-sizing: border-box; 盒子宽度和高度包括了padding 和 border 
    如果设置一个盒子
    
     div{
           width:100px; 
           border:10px solid red; 
           padding:10px;
        }
    
    *那么最终 div 容器的实际宽度为:*
    100px(width)+2*10px(padding)+2*10px(border)=140px
    
    所以你会得到一个比你预期(100px)还要更大的容器,结果就是会破坏网页布局。
    
    注意:margin 的尺寸不会被计算入最终容器宽度,因为对他的定义为对这个容器的留白,但不属于容器本身。
    
    如果当我们定义一个容器的 box-sizing 属性为 border-box 时(表达式 div{box-sizing:border-box})
    那么我们创建一个和上段中相同设置的 <div> 容器时,那么他的最终宽度即为 100px,
    那么它的内容部分的有效宽度变成了 100px-2*10px-2*10px=60px; 所以你会得到一个你预期大小的盒子容器
    但是只是被压缩了内容部分尺寸而已,但是对于整体布局而言益处颇多。
    
    所以要合理利用好这个属性,这个属性十分重要。
    
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .bigBox{
                width: 500px;
                height: 500px;
                margin: 0 auto;
                background-color:blue;
            }
            .smallBox{
                width: 500px;
                height: 50px;
                margin: 0 auto;
                background-color: skyblue;
                padding-left: 50px;
                box-sizing: border-box; /*盒子宽度和高度包括了padding 和 border */
            }
        </style>
    </head>
    <body>
        <div class="bigBox">
            <div class="smallBox">
                我是smallBox中的内容
            </div>
        </div>
    </body>
    
    </html>
    

    运行结果
    在这里插入图片描述
    如果不加 box-sizing: border-box;则运行结果为
    在这里插入图片描述

    展开全文
  • -webkit-box-sizing属性冲突如何解决 页面用到了框架,而框架里面的样式又影响到了我本来的页面 *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } 如何能不继承这个父级样式 受...
  • 盒子模型box-sizing中content-box和border-box的理解什么是盒子模型box-sizingbox-sizing的三个属性border-box理解 什么是盒子模型 就比如说页面上的元素都是一个拥有宽,高,内边距,边框和外边距的长方形盒子,...
  • box-sizing:border-box属性入手,来了解盒模型

    万次阅读 多人点赞 2018-06-20 14:02:00
    从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。 背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局...
  • 基础知识 语法: box-sizing : content-box | border-box | inherit 相关属性 : 无 取值: content-box:此值维持css2.1盒模型的组成模式,border|padding|content {element width=border+padding+content} ...
  • box-sizing的属性值

    2021-03-15 21:43:01
    box-sizing属性值及作用 content-box 这是box-sizing的默认属性值 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即width + border + padding,表现为...
  • box-sizing失效的原因

    千次阅读 2019-12-20 15:27:14
    分析:如果目标元素的高度(或宽度)只由其内容、padding、border确定的情况下,则会存在失效情况。 解决方法:对目标元素设置固定高度(或宽度)
  • 为什么要设置box-sizing: border-box属性? 默认情况下 元素实际宽度=width(宽) + padding(内边距) + border(边框) 元素实际高度=height(高) +padding(内边距) + border(边框) 所以当我们执行一下html文件 <!...
  • CSS | box-sizing的解析与应用场景

    千次阅读 2019-01-21 17:09:12
    文章目录box-sizing 定义1.content-box2.border-box应用场景需求使用border-box注意附 box-sizing 定义  box-sizing 属性规定了一个元素用于计算元素宽度和高度的CSS 盒子模型。  目前box-sizing的关键字值只有...
  • 本篇文章主要介绍了css属性box-sizingbox-sizing属性是CSS3中引入的,有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。
  • 前一阵子遇到一个小问题,在同样的样式(主要是宽高边距之类的)条件下,DIV在移动端和PC端的宽度不一样,排除了绝大多数样式的问题,但是有个比较陌生,就是box-sinzing,其实经常看到,只不过没怎么注意过,连具体...
  • box-sizing:border-box的作用

    千次阅读 2019-11-06 20:14:51
    box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里  盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整  标准...
  • box-sizing属性概述box-sizing的CSS属性是用来改变默认的CSS框模型,用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型...
  • 一探究竟:box-sizing

    千次阅读 多人点赞 2019-06-10 14:35:26
    box-sizing是css3的新属性,关于这个属性,官方的解释是 :“box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。” 这个解释对于新使用box-sizing 的人或许不是很好理解。要理解这个属性,还得从css的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,654
精华内容 27,861
关键字:

box-sizing