css盒模型

css盒模型-又一个经久不息的话题,面试的时候,有的面试官会让你谈谈css的盒子模型,这样看似简单的问题,却让一些同学,无从下口。其实你不是不会,在写css的时候,你肯定经常会用到margin,padding,width,box-sizing这样的css属性。只不过类似于这样的问题,范围较广,又没有标准答案,一时回答不上来,却影响了面试结果,实在不应该啊。

本文就css盒子模型的概念,用法回答面试官的问题。

首先,怎么理解盒子模型,就是要把设置距离的html元素看成一个盒子,这个盒子由margin;border;padding;content这些css属性组成。

这就是一个盒子

只不过让我们称之为模型的是,根据css属性box-sizing值不同。css盒模型可以分为标准盒模型和ie盒模型;当box-sizing值为:content-box时为标准模型,当box-sizing值为:border-box时为ie模型;这二者的区别很简单,见下图

仅仅只是width的计算方式不同而已

所以有些面试官就问了:盒模型中标准模型和ie模型有什么区别?你会回答了吧;

所以在项目中,如果你要用某种模型,用box-sizing设置成某种模型即可;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,649评论 5 15
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 盒模型 盒模型的特点: 每个盒子都有:边界、边框、填充、内容四个属性;每个属性都包括四个部分:上、右、下、左;这四...
    xiaolizhenzhen阅读 1,335评论 0 0
  • 一日一景 连绵广厦千万栋, 鳞次栉比入云中。 囊中羞涩悲白头, 黄昏恋人为房愁。
    吉光片羽_9bc2阅读 306评论 2 16
  • 优秀的孩子,都不合群 内向的孩子,他们自己的世界,就已经足够丰富和精彩。父母的干扰,甚至想要强行改变,不仅终究会以...
    沐子_ffed阅读 241评论 0 2