前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对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盒子模型的更多相关文章
- 【面试必备】CSS盒模型的点点滴滴
从接触CSS布局开始,就一直在听盒模型的概念了,网上的文章有很多,深浅不一.有些人会认为盒模型很简单,不就是border.margin.padding.content嘛,一个元素所占的空间就是把它们都 ...
- 【轻松前端之旅】CSS盒子模型
盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element con ...
- Web前端面试指导(九):盒子模型你是怎么理解的?
问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 前端学习(十三):CSS盒子模型
进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- [Web 前端] CSS 盒子模型,绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- 前端基础——CSS盒子模型
如今很多网页都是由很多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的样例:在一个仓库中放了10个纸箱,每一个纸 ...
随机推荐
- Python爬虫入门教程 23-100 石家庄链家租房数据抓取
1. 写在前面 作为一个活跃在京津冀地区的开发者,要闲着没事就看看石家庄这个国际化大都市的一些数据,这篇博客爬取了链家网的租房信息,爬取到的数据在后面的博客中可以作为一些数据分析的素材. 我们需要爬取 ...
- Lucene 07 - 对Lucene的索引库进行增删改查
目录 1 添加索引 2 删除索引 2.1 根据Term删除索引 2.2 删除全部索引(慎用) 3 更新索引 数据保存在关系型数据库中, 需要实现增.删.改.查操作; 索引保存在索引库中, 也需要实现增 ...
- Asp.Net SignalR - 简单聊天室实现
简单聊天室 使用持久链接类我们就可以做一些即时通讯的应用了,我使用Group做了一个简单的聊天室,先上图技术细节下面再讲 可以加入聊天室.创建聊天室.发送消息,下面就说说我是如何通过Group做出来的 ...
- Java开发知识之Java中的Map结构
Java开发知识之Java中的Map结构 一丶Map接口 Map没有实现Collection接口,提供的是Key 到Value的映射. Map中.不能包含相同的Key,每个Key只能映射一个Value ...
- 痞子衡嵌入式:ARM Cortex-M内核那些事(5)- 指令集
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M指令集. 指令集 指令长度(bits) 包含指令 CortexM0 CortexM0+ CortexM1 Cor ...
- 痞子衡嵌入式:ARM Cortex-M文件那些事(1)- 源文件(.c/.h/.s)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的source文件. 众所周知,嵌入式开发属于偏底层的开发,主要编程语言是C和汇编.所以本文要讲的source文件主要指的就是 ...
- CAN总线学习记录之一:CAN简介
CAN 是 Controller Area Net 的缩写,即控制器局部网,是一种有效支持分布控制或实时控制的串行通信网络.CAN 是德国 Bosch 公司为汽车的监测.控制系统而设计的,如控制发动机 ...
- Spring Cloud Alibaba基础教程:Nacos的数据持久化
前情回顾: <Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现> <Spring Cloud Alibaba基础教程:支持的几种服务消费方式> ...
- ioc初步理解(一) 简单实用autofac搭建mvc三层+ioc(codeFirst)
1]首先搭好框架 1.1]搭建ui层 1.2]创建其他内库文件 整个项目基本部分搭建完毕之后如下 2]使用nuget引用文件 先在每一个项目中引入ef 然后再UI层引入以下两个文件autofac和Au ...
- 深入浅出Java类加载过程
学习笔记二之Java虚拟机中类加载的过程 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现这个类进行初始化. 1. 加载 加载,是指Java虚拟机查找字 ...