<meta name="keywords" content="华夏棋牌,bootstrap_border_box,border_box" />
华夏棋牌 > web前端 > js教程 > 注释

Boostrap入门准备之border box_javascript手艺

原创 2016-05-16 15:01:28 0 154
赞助会员专享特权
华夏棋牌 之前在学习Bootstrap的历程当中,遇到种种奇葩的坑,假定在学习bootstrap之前,准备使命先做好,便可以或多或少的避开一些坑。下面小编泉源给年夜家简介border-box这个属性的知识。

华夏棋牌在Boostrap自带的css文件:boostrap.css中,有这样一段代码:

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

这意味着在写代码时,这个属性将无处不在。那这个box-sizing:boder-box现实是甚么鬼呢?让我们先来看看一段很浅易的代码:

华夏棋牌运转代码得出:outer的高度为702px,宽度为702px,inner的宽度为500px,高度为500px;这里年夜家应当都没甚么疑问吧,我们现在看看另外一段代码:

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

这段代码着实就是头两段代码的相加,可以质朴的明确为现在是在Boostrap的框架中泉源写代码,代码运转的效果为:outer的宽度为500px,高度为500px;inner的宽高为298px;

华夏棋牌招致这样的效果的启事是:box-sizing:border-box使得元素的宽高不会受padding和border的影响,以下面的代码,纵然outer有padding,border,但是padding和border都不会影响outer的宽高,outer的宽高还是500px;但是padding和border跑那里去了?谜底:跑到外面去了!掀开浏览器的调试工具,看outer的项目概略:

华夏棋牌我们可以显着的看到,padding和border都是有用的,只是它们占领了outer的外部空间,由于padding:100px占领了outer的200px宽高值,border占领了2px的宽高值,以是inner只能取得298px的宽高值。

假定年夜家有ie下的网页开发履历的话,就会发现,box-sizing:border-box就是低版本ie的希奇形式。

华夏棋牌以上所述是小编给年夜家简介的Boostrap入门准备之border box的相关知识,年夜家都学会了吗,假定有疑问迎接给我留言,小编会实时回复年夜家的。同时也异常谢谢年夜家对剧本之家网站的支持!

下面给年夜家简介box-sizing border-box 的明确

华夏棋牌-webkit-box-sizing: border-box; 则div 设置的宽高将网罗 边框及 padding




box-sizing 






浅易
特殊
php中文网最新课程二维码
  • 相关标签:bootstrap_border_box border_box
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • Boostrap入门准备之border box_javascript手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173501)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169606)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137085)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130355)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129728)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节