资讯专栏INFORMATION COLUMN

前端进阶系列(六):盒模型

aisuhua / 690人阅读

摘要:盒模型是界面布局需要掌握的基本功。盒模型基本概念盒模型四要素。

盒模型是界面布局需要掌握的基本功。
盒模型基本概念

盒模型四要素:marginborderpaddingcontent

盒模型分为:标准盒模型(W3C盒模型) 、 怪异盒模型(IE盒模型)

盒模型区别

怪异盒模型总宽度 = content + padding

标准盒模型总宽度 = content

盒模型使用
box-sizing: border-box(怪异盒模型) || content-box(标准盒模型)
兼容性

IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113983.html

相关文章

  • 前端进阶系列():模型

    摘要:盒模型是界面布局需要掌握的基本功。盒模型基本概念盒模型四要素。 盒模型是界面布局需要掌握的基本功。 盒模型基本概念 盒模型四要素:margin、border、padding、content。showImg(https://segmentfault.com/img/remote/1460000016655325?w=400&h=300); 盒模型分为:标准盒模型(W3C盒模型) 、 怪异...

    Olivia 评论0 收藏0
  • 前端进阶系列-目录

    摘要:然而在最近的面试中通过学习和思考,找到了前进的方向,也得到一些大公司的录用机会。算是从初级前端毕业,进阶了吧。在这里先写个目录。赶时间的同学可以按照我的目录先自行准备提升,希望推荐文章和交流。 背景 之前我分享了文章大厂前端面试考什么?,你们一定很想看答案吧?说实话,答案我是有,在准备面试的时候会时不时翻看,但内容比较多,比较凌乱,不能指望我在一篇文章中写完。 我是从非计算机专业自学前...

    cod7ce 评论0 收藏0
  • 前端进阶之什么是BFC?BFC的原理是什么?如何创建BFC?

    摘要:官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块,同时又是的包含块,不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子,该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为,则其使用的值来自相等。 作者:陈大鱼头 github: KRISACHAN 盒模型 The CSS box model describes the rectangular b...

    lowett 评论0 收藏0
  • 前端)之模型显隐、定位与流式布局思想

    摘要:前端之盒模型显隐定位与流式布局思想前端之盒模型显隐定位与流式布局思想盒模型的显隐盒模型的显隐盒子的显隐通过控制盒子的显示方式来隐藏盒子该隐藏方式在页面中不占位通过控制盒子的透明度来隐藏盒子该隐藏方式在页面中占位注一般显隐操作的盒子都是采用前端之盒模型显隐、定位与流式布局思想 盒模型的显隐 盒子的显隐 .box, .wrap { ...

    cikenerd 评论0 收藏0
  • 前端文章- 收藏集 - 掘金

    摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

    sugarmo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<