今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然。所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方,望指正见谅!

1、css3盒子模型

个人的理解是页面上所有的html元素都可以看作是盒子,即整个html页面就是由无数个盒子通过特定的布局结合在一起的,每个盒子包括内容(content)、内边距(padding)、边框(border)、外边距(margin)。

(一般来说margin有两种形式,一种是盒子与浏览器窗口的外边距,还有一种是盒子与相邻盒子的外边距)

2、关于盒子的宽高的问题

标准盒子模型,也就是咋们的大哥W3C规定的盒子模型,这种情况下:css中定义的宽高 = 盒子实际内容(content)的宽高,盒子的总宽高 = css定义的宽高 + padding + border + margin(注意计算时左右和上下的padding、margin都是两个)

如下定义了一个盒子,css代码和html代码如下:

 #box{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: solid red;/* border默认宽度是3px 所以没写直接3px了*/
}
 <div id="box">
我是一个盒子
</div>

在浏览器开发工具下的截图如下:

从图中可以看出:蓝色部分(200*200 )是盒子的content,绿色的是padding,黄色的是border, 深黄色是margin

但在IE浏览器中盒子的宽高计算方式会不一样:

        IE盒子模型也叫怪异盒模型

在该模式下,浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和;即在怪异模式下的盒模型,盒子的(content)宽度+内边距padding+边框border宽度=我们设置的width(height也是如此),盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
  写到最后就有点想要放弃了,望路过的大佬见谅!凑合看吧~

前端面试必备的css盒子模型的更多相关文章

  1. 【面试必备】CSS盒模型的点点滴滴

    从接触CSS布局开始,就一直在听盒模型的概念了,网上的文章有很多,深浅不一.有些人会认为盒模型很简单,不就是border.margin.padding.content嘛,一个元素所占的空间就是把它们都 ...

  2. 【轻松前端之旅】CSS盒子模型

    盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element con ...

  3. Web前端面试指导(九):盒子模型你是怎么理解的?

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  6. 前端学习(十三):CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  7. 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  8. [Web 前端] CSS 盒子模型,绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  9. 前端基础——CSS盒子模型

    如今很多网页都是由很多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的样例:在一个仓库中放了10个纸箱,每一个纸 ...

随机推荐

  1. 【Docker】(1)---Docker入门篇

    Docker入门篇 简单一句话: Docker 是一个便携的应用容器. 一.Docker的作用 网上铺天盖地的是这么说的: (1) Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得 ...

  2. 从零打卡leetcode之day 1--两数之和

    前言 就是要把leetcode的题刷完,每天一道题,每天进步一点点 从零打卡leetcode之day 1 题目描述: 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只 ...

  3. 精读《Serverless 给前端带来了什么》

    1. 引言 Serverless 是一种 "无服务器架构",让用户无需关心程序运行环境.资源及数量,只要将精力 Focus 到业务逻辑上的技术. 现在公司已经实现 DevOps 化 ...

  4. 机器学习之决策树一-ID3原理与代码实现

    决策树之系列一ID3原理与代码实现 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/9429257.html 应用实 ...

  5. 简单的SQL注入之3

    Topic Link http://ctf5.shiyanbar.com/web/index_3.php 1)测试正确值submit:1 测试目标和对象要明确: 2)单引号测试(判断存在字符型注入&a ...

  6. 深度学习入门实战(一):像Prisma一样算法生成梵高风格画像

    本文由云+社区发表 作者:董超 导语:现在人工智能是个大热点,而人工智能离不开机器学习,机器学习中深度学习又是比较热门的方向,本系列文章就从实战出发,介绍下如何使用MXnet进行深度学习~ 既然是实战 ...

  7. Java开发笔记(三十七)利用正则串分割字符串

    前面介绍了处理字符串的常用方法,还有一种分割字符串的场景也很常见,也就是按照某个规则将字符串切割为若干子串.分割规则通常是指定某个分隔符,根据字符串内部的分隔符将字符串进行分割,例如逗号.空格等等都可 ...

  8. Makedown

    目录 Makedown 介绍 Markdown的语法 Makedown 介绍 Makedown的创建者是John Gruber Q:什么是markdown呢? markdown和html类似是mark ...

  9. ARM与FPGA通过spi通信设计1.spi基础知识

    SPI(Serial Peripheral Interface--串行外设接口)总线系统是一种同步串行外设接口,它可以使MCU与各种外围设备以串行方式进行通信以交换信息.SPI总线可直接与各个厂家生产 ...

  10. 前端项目git操作命名规范和协作开发流程

    前言 一个项目的分支,一般包括主干 master 和 开发分支 dev,以及若干临时分支 分支命名规范 分支: 命名: 说明: 主分支 master 主分支,所有提供给用户使用的正式版本,都在这个主分 ...