精华内容
下载资源
问答
  • box-sizing:border-box属性入手,来了解盒模型

    万次阅读 多人点赞 2018-06-20 14:02:00
    从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。 背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局...

        从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。

        背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局方式,div给出的宽度是百分比的形式,即框占窗口宽度的50%,但边界和内边距是用像素来表示的怎么办?为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来将框模型更改成这个新的模型。

        注意:回顾一下,框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和,这就是造成上述背景下,样式不好调整的原因。

                box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型,可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

    一、回顾基础

            (1)框属性的基本规范:

                文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:

    即width=content

                ①widthheight设置内容框(content box)的宽度和高度。内容框是框内容显示的区域--包括框内的文本内容,以及表示镶嵌子元素的其他框;

                ②padding表示一个CSS框内边距--这一层位于内容框的外边缘与边界的内边缘之间;

                ③border即CSS框的边界是一个分割层,位于内边距的外边缘以及外边距的内边缘之间;

                ④margin外边距代表CSS框周围的外部区域。

                (2)运用box-sizing:border-box属性下,框模型的变化

                

    width=content+padding+border(此时,当div的宽度为50%时,而border和padding为px时,那么content会随着实际的宽度进行自动缩放;)

             (3)来看看实际的例子:   

                ①设计稿如下所示:

                ②实际代码:

                本例子中,采用的是flex布局的方式,为了自适应,宽度width采用的是百分比%的形式,border,padding,margin采用的是px尺寸,所有外层的盒子运用了box-sizing:border-box;属性来改变盒子的结构,从而实现需求。

    <body>
    	<div class="clear_float">
    	     <div class="goods_cell">
    		  <div>
    		       <img class="img_goods" src="../images/img_goods.png" alt="">
    		  </div>
    		  <div class="text_goods">
    		       双宫茧桑蚕丝被
    		  </div>
    		  <div class="goods_price">
    		       <div class="price_span">活动秒杀价:</div>
    		       <div class="price_num">¥  499.00</div>
    		  </div>
    		  <div class="goods_seckill">
    		       <div class="seckill_left">仅剩<span>23:59:00</span></div>
    		       <div class="seckill_right">秒杀</div>
    		  </div>
    	      </div>
    	      <div class="goods_cell">
    	          <div>
    		      <img class="img_goods" src="../images/img_goods.png" alt="">
    	          </div>
    	          <div class="text_goods">
    		  双宫茧桑蚕丝被
    	          </div>
    	          <div class="goods_price">
    		       <div class="price_span">活动秒杀价:</div>
    		       <div class="price_num">¥  499.00</div>
    	          </div>
    	          <div class="goods_seckill">
    		       <div class="seckill_left">仅剩<span>23:59:00</span></div>
    		       <div class="seckill_right">秒杀</div>
    	          </div>
    	      </div>
    	      <div class="goods_cell">
    		   <div>
    			<img class="img_goods" src="../images/img_goods.png" alt="">
    		   </div>
    		   <div class="text_goods">
    			双宫茧桑蚕丝被
    		   </div>
    		   <div class="goods_price">
    			<div class="price_span">活动秒杀价:</div>
    			<div class="price_num">¥  499.00</div>
    		   </div>
    		   <div class="goods_seckill">
    			<div class="seckill_left">仅剩<span>23:59:00</span></div>
    			<div class="seckill_right">秒杀</div>
    		   </div>
    	       </div>
    	       <div class="goods_cell">
    		    <div>
    			<img class="img_goods" src="../images/img_goods.png" alt="">
    		    </div>
    		    <div class="text_goods">
    			双宫茧桑蚕丝被
    		    </div>
    		    <div class="goods_price">
    			 <div class="price_span">活动秒杀价:</div>
    			 <div class="price_num">¥  499.00</div>
    		    </div>
    		    <div class="goods_seckill">
    			 <div class="seckill_left">仅剩<span>23:59:00</span></div>
    			 <div class="seckill_right">秒杀</div>
    		    </div>
    		</div>
    	</div>
    </body>
    <style>
    .clear_float{
    	margin-bottom:20px;
    }
    .goods_cell{
    	width: 47%;
    	box-sizing: border-box;
    	padding: 10px;
    	float: left;
    	box-shadow: 0 0 6px 0 rgba(0,0,0,0.20);
    	border-radius: 10px;
    	font-size:13px;
    	color: #333333;
    	margin-left:15px;
    	margin-bottom:20px;
    }
    .clear_float>.goods_cell:nth-of-type(2n+1){
    	margin-left: 0;
    }
    .img_goods{
    	width:78.5px;
    	height:96px;
    	display: block;
    	margin: 0 auto;
    }
    .text_goods{
    	margin:10px 0;
    	color:#333333;
    	font-size:13px;
    }
    .goods_price{
    	font-size:18px;
    	color: #FF0845;
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	margin-bottom:1px;
    }
    .goods_price .price_span{
    	font-size:8px;
    	color:#fa5754;
    	line-height:8px;
    }
    .goods_price .price_num{
    	font-size:16px;
    	color:#fa5754;
    	line-height:18px;	
    }
    .goods_seckill{
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	box-sizing:border-box;
    	line-height:15px;
    	width:100%;
    	height:15px;
    }
    .goods_seckill .seckill_left{
    	width:70%;
    	padding:2.5px 0px;
    	font-size:10px;
    	color:#2d2d2d;
    	line-height:10px;
    	border:1px solid #999999;
    	border-right:1px solid #ff0845;
    	text-align:center;
    }
    .goods_seckill .seckill_right{
    	width:30%;
    	color:#ffffff;
    	background-color:#ff0845;
    	border:1px solid #ff0845;
    	font-size:10px;
    	line-height:10px;
    	padding:2.5px 8px;
    	text-align:center;
    }
    </style>

            ③在游览器上模拟的320px,375px和414px尺寸下,显示的效果图:

    二、盒模型的其他属性

            (1)margin,padding设置为百分比形式:

               <main>元素的内边距和外边距的各个边设置为5%,意味着“包含元素宽度的5%”,因此,随着示例输出窗口的大小增加,内边距和外边距也增加了。

            (2)margin可以接受负数,可以用来引起元素框的重叠:

              (3)背景裁剪(Background clip)属性:

                background-clip:border-box;背景被裁剪到边框盒;

                background-cilp:padding-box;背景被裁剪到内边距框;

                background-clip:content-box;背景被裁剪到内容框。

                可以看看以下效果图比较一下:

            (4)轮廓(Outline):

                一个框的outline是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多,但是并不改变框的尺寸(更准确的说,轮廓被勾画于在框边界之外,外边距区域之内)。

                相关实例:在引入bootstrap框架时,input在360游览器(兼容模式)下显示,在获得焦点时外边框变蓝,这就是outline造成的影响,去掉只需要添加一个CSS样式即可,input:focus{outline:none;}

                详情介绍可以查看之前的文章:实现输入框input在获得焦点时外边框不变蓝  点击打开链接

            (5)CSS框类型,通过display属性来设定元素的框类型:

                最常见的display类型是:block,inline,inline-block,即块框(block box),行内框(inline box),行内块状框(inline-block box).

                    注意:默认状态下display属性值,块级元素display:block,行内元素display:inline。

                    不常见的类型display类型是:table,flex,grid.

                   display:table--允许你像处理table布局那样处理非table元素,而不是滥用HTML的<table>标签来达到同样的目的;

                     ②display:flex--允许你处理一些困扰CSS已久的一些传统布局问题,如布置一系列弹性等宽容器或者垂直居中内容(目前,flex布局在移动端使用较为广泛);

                      ③display:grid--给出一种简单实现CSS网络系统的方式,而在传统上它依赖于一些棘手难以处理的CSS网络框架。

               (6)框的高度    

                框的高度不遵守百分比的长度;框的高度总是采用框内容的高度,除非指定一个绝对的高度(如:px或者em),它会比在页面上默认是100%高度更实用。

                (7)盒的高级属性--设置宽和高的约束

                    ①通过min-width,max-width,min-height,max-height 属性,来设置大小约束,以更灵活的方式控制内容盒的大小:

                        这类情况通常用于响应式网页设计,将一个布局的外层容器的宽度设置为百分比形式。

    width:70%;
    max-width:1280px;
    min-width:480px;

                    然后,添加下句CSS使该容器在它的父容器内居中显示:

    margin:0 auto;

                    那么最终呈现的效果是:当父容器在最小和最大宽度限制内时,它将填满整个视口宽度;当父容器超过1280px宽度时,布局将保持在1280px宽,并开始在可用空间内居中。当宽度低于480px时,视口将小于容器,您必须滚动才能看到完全的内容。

                ②max-width属性的另一个好处是可以将容器内的媒体(如图像和视频)控制在容器内(响应式图片):

                在上述例子中,图像会引起一个问题--起初它的显示正常,但当容器变得比图像更窄时,图像开始溢流容器(因为它是一个固定的宽度)。解决这类问题,可以用以下CSS:

    display:block;
    margin:0 auto;
    max-width:100%;

                前两条属性display:block,margin:0 auto,使它的展示行为像一个块元素并且在父容器内居中。而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。(这样,可以让图片最大只能是自己的宽度,成为响应式的图片)

                而这类运用最好的实例就是bootstrap框架中,图像的img-responsive类名的属性,在框架下,图像添加了img-responsive类名,就能达到在视口宽度不断变化的情况下,图像都可以达到响应式的缩放形式,这也是图像响应式的秘诀所在。

            三、总结

                   关于盒模型的总结,是从运用实例的角度来引入的,并未按照常规的顺序来进行梳理,如果大家想了解盒模型的完整知识,推荐查看MDN的盒模型讲解完整篇,点击打开链接,以及MDN再述盒模型篇,点击打开链接

                   如文章哪里有问题,欢迎大家留言进行指正,谢谢!

                    参考博客:框模型--学习WEB开发  点击打开链接

                     版权声明:本文为博主原创文章,未经博主允许不得转载。
     

    展开全文
  • [size=medium]box-sizing ...box-sizing:content-box | border-box 默认值:content-box 取值 content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和borde...
    [size=medium]box-sizing
    box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
    语法
    box-sizing:content-box | border-box
    默认值:content-box
    取值
    content-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
    内容宽度为:200
    border-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-sizing
    Gecko(Firefox)-moz-box-sizing
    Presto(Opera)-o-box-sizing
    Trident(IE)IE8:-ms-box-sizing/IE9:box-sizing
    浏览器是否支持:
    (×)IE6
    (√)Firefox 2.0
    (√)Chrome 1.0.x
    (√)Opera 9.63
    (√)Safari 3.1
    (×)IE7
    (√)Firefox 3.0
    (√)Chrome 2.0.x
     
    (√)Safari 4
    (√)IE8
    (√)Firefox 3.5[/size]

    [color=black][size=medium]
    -moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box; 在css3中前面的-moz 、-ms、-webkit什么意思
    -moz代表firefox浏览器私有属性
    -ms代表IE浏览器私有属性
    -webkit代表chrome、safari私有属性[/size][/color]
         
    展开全文
  • 理解box-sizing属性border-box,content-box

    万次阅读 多人点赞 2016-09-16 10:54:58
    普通盒模型与怪异盒模型对比。box-sizing:content-box,box-sizing:border-box;对比。 如何使用普通盒模型与怪异盒模型,如何让浏览器只支持标准盒模型。

    理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型。


    正常盒模型

    正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型

    下图更方便理解。


    正常盒模型是指:盒模型的大小包括content,padding,border,并且先做content.。

    现在红色的方块宽、高都是100。

    正常盒模型的大小会以内容优先自动扩展,内部子元素超过父元素给定的大小,会将父元素撑大。



    样式中的宽度100,指的是content为100。

    怪异盒模型

    怪异盒模型,是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型,但是由于其自身的特殊性,手机页面中也有使用怪异盒模型。


    下图更方便理解。


    怪异盒模型是先做盒。然后添加border,padding,最后做content。即保证盒模型优先,先做盒再放内容,不管内容是否放得下,一般手机上用的更多。

    这句话的理解,我们可以根据下图的具体示例来看。即便是红色方块宽度是100px,但是对于怪异盒模型,分配给内容区域的宽度就是90px。



    更通俗的说,怪异盒模型中,父元素的盒模型确定,子元素是无法撑开父元素的盒模型,只能在盒模型剩余空间展示。

    如果将父元素盒模型的宽高,改为(子元素)width + (父元素)padding + (父元素)border的尺寸 = 130px 。 那么得到的效果与正常盒模型相同。

    如下图所示。



    那应该选择哪中盒子模型呢?

    当然是“标准 w3c 盒子模型”了。


    怎么样才算是选择了“标准 w3c 盒子模型”呢?

    很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,

    即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子。所以网页在不同的浏览器中就显示的不一样了。

    反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">


    参考文章:

    http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html

    更通俗的说,怪异盒模型中,父元素的盒模型确定,子元素是无法撑开父元素的盒模型,只能在盒模型剩余空间展示。
    展开全文
  • 盒模型box-sizing尺寸基准有两种:content-box 和 border-box; 默认的是 content-box content-box与border-box区别是两者的盒子的宽度是否包含边框和内边距; 下面用两个图来说明: 下图为box-sizing:...

    盒模型box-sizing尺寸基准有两种:content-box 和 border-box; 默认的是 content-box

    content-box与border-box区别是两者的盒子的宽度是否包含边框和内边距;

    下面用两个图来说明:

    下图为box-sizing:content-box


    下图为box-sizing:border-box


    展开全文
  • CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box、border-box。默认值是content-box。 语法格式:box-sizing:content-box | border-box 区别: 1.content-box:padding和...
  • content-boxborder-box的区别

    万次阅读 2018-02-27 22:20:16
    盒子模型 盒子宽度:padding+border+content-width 盒子高度:padding+border+content-height ...border-box 说明:在已设定的宽度和高度之内绘制设定元素的边框及内边距 CSS .content-box{ width: ...
  • content-boxborder-box区别

    万次阅读 2016-01-15 10:40:07
    1 理论上说,content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。 2 为了让大家清楚的了解二者的区别,我使用DW新建... ...其中一个div设为border-box盒模型,我们需要为其添加box-s
  • border-box是不符合w3c标准的盒模型,也称为怪异盒子 他们二者有什么区别呢? content-box是先根据设定的样式确定元素content的宽高,有border和padding的情况下再额外增加盒子的宽高,内容宽高不受影响,设定多少...
  • border-box宽度计算方式

    千次阅读 2019-01-05 20:59:26
    css3 box-sizing定义了两种盒模型: content-box border-box 没有padding-box哦,别瞎猜。 二者区别就是容器的宽度计算方式不同: content-box是块级默认属性,宽度计算方式为: boxWidth=padding-left+padding-...
  • 全局box-sizing:border-box;设置方法

    千次阅读 2020-03-05 17:04:36
    box-sizing: border-box; } *::before,*::after{ box-sizing: border-box; } </style> 如果设置了border-box,实际所占宽高度 = 设置的高度(height)/ 设置的宽度(width)+ 外边距(margin...
  • box-sizing:定义使用的盒子模型(CSS3) 默认值是 content-box :border padding 在width height 外面,传统的盒子模型 border-box:border 和 padding 在width height 中 padding-box :(w3c 似乎没有,在firefox中...
  • box-sizing:border-box 解释

    千次阅读 2016-10-05 00:34:59
    box-sizing:border-box 为ie的怪异盒模型引进的; 如果给标签加上box-sizing:border-box 属性,则会告知浏览器的解析器这个元素的盒模型类型为怪异盒模型; 即给元素设置的宽高不但包括content还会包含padding和...
  • box-sizing: border-box的疑问

    千次阅读 2019-04-13 01:16:08
    box-sizing: border-box; 当box-sizing值为 border-box时候 定义的高度height值为:css定义的盒子高度,其中定义的盒子高度: 即css中定义的height =padding(上)+padding(下)+边框宽度 实际height = 定义的...
  • CSS中box-sizing: border-box;的作用

    万次阅读 多人点赞 2018-08-29 19:12:57
    box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-...
  • 去除全局设置的box-sizing:border-box

    千次阅读 2019-07-08 16:46:19
    只需要给不需要box-sizing:border-box的元素上加上box-sizing:content-box 就行
  • css盒模型content-boxborder-box

    千次阅读 2019-06-16 12:53:56
    我们可以在css样式中根据box-sizing来设置不同的盒模型。 下面来看具体的细节。 2、标准模式(content-box) 当box-sizing:content-box时,我们使用的是标准盒模型,这时候css定义的width宽度只包含元...
  • -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3C...
  • box-sizing border-box 的理解

    千次阅读 2016-05-27 00:09:32
    -webkit-box-sizing: border-box; 则div 设置的宽高将包含 边框及 padding  box-sizing    .testdiv{  padding: 10px;;  width:100px;  border: 10px solid
  • box-sizing属性概述box-sizing的CSS属性是用来改变默认的CSS框模型,用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型...
  • box-sizing: border-box;的作用

    万次阅读 多人点赞 2018-01-31 13:40:05
    box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 ...
  • box-sizing:border-box;的一些坑

    千次阅读 2017-01-25 15:18:29
    近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命,很费时间,情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签,高度是16px,左右padding各5px,line-height...
  • box-sizing:border-box;} .two{ border-color:#3FF;} <div class="one">the first test <div class="two"> the second test ![图片说明]...
  • Chrome浏览器box-sizing默认是content-box,content-box就是元素的width和height决定了元素的宽高,这意味着元素的border和padding等不能算在元素的width和height中 ,padding和border的改变不能改变width和height的...
  • box-sizing: border-box; box-sizing的默认值是content-box 什么是盒子模型? 默认情况下,假如我们定义了一个div,设置它的宽度和内间距如下: &lt;div style='border:1 solid #666;padding:0 10px'&...
  • content-box就是用元素的width和height觉得元素的高宽,这就意味着元素的padding和border等不能算在width和height中。啥意识?简洁介绍一下。 元素的width和height决定元素的内容,padding和border的改变不能...
  • 1 W3C标准盒模型 content-box width || height = content 内容区域 比如设定元素width = 300px,padding = 20px,border=20px,那么实际的内容区域宽度为content = 300px;整个盒子的宽度为300+20*2+20*2 = 380px,...
  • box-sizing:border-box;理解,盒模型

    千次阅读 2018-12-28 09:33:46
    解决方法很简单只需要添加box-sizing:border-box;意思就是改变了盒模型。 pc端只有双击的时候会看到 box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C,后者为IE盒子模型。 .business-title...
  • 关于css中的box-sizing:border-box

    万次阅读 2017-11-06 13:12:14
    box-sizing: border-box 会直接将border 和padding 放到盒子里面。<!DOCTYPE html> <title></title> div{ border: 1px solid #f00; width: 300px
  • Boostrap入门准备之border-box

    千次阅读 2016-05-09 00:19:21
    前言:在Boostrap学习过程中,尤其是网格系统的使用中,遇到了许多的坑,如果在学Boostrap之前,先做好一些准备功夫,就可以很好的避开这些坑了。现在,我们首先来说说border-box这... -webkit-box-sizing: border-box;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 210,837
精华内容 84,334
关键字:

border-box