css盒模型

作者: Beauty_Beast | 来源:发表于2018-12-07 00:32 被阅读9次

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设置成某种模型即可;

相关文章

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • CSS盒模型作业

    前言:本章主要讲CSS盒模型,CSS盒模型是CSS中most import 的一个概念,如果我们想学好CSS,那么...

网友评论

    本文标题:css盒模型

    本文链接:https://www.haomeiwen.com/subject/apmhqqtx.html