不学好css模型的怎么入山门？师傅与徒弟的真实独白

前言

开篇

定义

ie盒

标准盒

真实占有宽度

结局

前言

很久很久以前，在一个小山庄里面住着一位少年。这位少年出生之时天有异向，七星连珠，乃神人也。三岁那年他跟着师傅上山学艺，面临这人生的第一道关卡。这位少年我们不妨叫其路人乙，他的师傅我们叫做路人甲。

路人甲:小徒弟，什么是CSS盒模型谈谈你对他的认知和理解，三日之内给与回复

路人乙:师傅，徒儿告退，三日之后再来汇报

开篇

此时的路人甲年龄偏小，当时也没有什么笔记本电脑啥的。他来到了沙滩，思考着，css盒模型到底是什么呢，陷入了沉思

就在这时有一位仙人来此，我们叫他路人丙。路人丙想，要不敲他三下，晚上三更来找我，只不过这个小屁孩怕是领悟不了。随即在沙滩上找出了一根木棍，在沙滩上写下几行文字。

路人丙:小屁孩，看我操作。

路人乙：仙人，你为啥不是变的，还是找的木棍。

路人丙:这不是重点。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;border: 10px solid red;background-color: pink;margin: 10px;padding: 10px;}</style>
</head><body><div>我是路人乙 我比较帅气</div>
</body></html>

路人丙:看懂了吗，谈谈你的理解

路人乙：

定义
在 CSS 盒子模型 规定了元素处理元素的几种方式：1width和height：内容的宽度、高度（不是盒子的宽度、高度）。
2padding：内边距。
3border：边框。
4margin：外边距。

路人丙心想，这小屁孩果然是一名奇才，容我好好点拨一番，以后好在社会上真正立足。

说这时，

路人丙:你知道在IE盒子和标准盒的区别吗

路人乙:我不知道可否告知一下

说着打开

标准盒

路人丙:标准盒包括margin border padding content部分 content部分不包括padding，border内容

ie盒包括margin border padding content部分 content部分包括padding，border内容

路人乙

CSS盒模型和IE盒模型的区别：在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

路人丙：既然你对盒子有了新的体会和理解，我们来看看真实占用宽高

.box1{width: 100px;height: 100px;padding: 100px;border: 1px solid red;}

.box2{width: 250px;height: 250px;padding: 25px;border: 1px solid red;}

路人乙：

真实占有宽度 = 左border + 左padding + width + 右padding + 右border
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。

路人丙:

切换盒模型


box-sizing: context-box; 这是W3C盒模型，width = content
box-sizing: border-box;  这是IE盒模型， width = border + padding + content

现在你对css盒子有了更深的理解了，可以回去找你的师傅了

说着就又消失在茫茫的大海里。

结局

说着路人乙兴冲冲的到达了山门，找到了师傅。告知他所遇到的一切

师傅很满意，将小徒弟收入了山门。

在山门里小徒弟有开始学习了margin，border，padding，width，height的使用，进一步拓展了自己

一个沉迷于故事的讲述者，本故事纯属虚构，欢迎交流。后续有想法会继续更新修改，

本问题创作源于面经。

欢迎一起学习交流让路人乙可以学到更多的知识。

不学好css模型的怎么入山门？师傅与徒弟的真实独白相关推荐

ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型
ASP.NET 2.0 中增加了内建的 MasterPage 的支持,这对我们来说是一个很大的便利.然而经过一段时间的使用,我发现 MasterPage 并不是那么完美:嵌套的 MasterPage ...
html和css怎么学好,如何学好css？
CSS 指层叠样式表,能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,能大大的美观页面,提高用户体验. 对于CSS的大部分内容,你不必担心 ...
css 大于号标签_web前端教程之怎样学好css？
web前端教程之怎样学好css?我推荐题主的学习方法就是:善用调试工具. 使用谷歌浏览器进行调试,在属性不理解时可以直接在浏览器里进行数值调节 css在书写时由于选择器权重问题经常出现样式覆盖的问题 ...
CSS实现div滑入效果
Vue3 + CSS实现div滑入 animation 定义动画 transform定义偏移 opacity,设置清晰度,实现从无到有 .entity-btn {position: absolute; ...
CSS它究竟是什么呢?如何学好CSS呢?
在HTML5大前端学科中,有一个非常重要的知识点,它就是CSS.CSS它究竟是什么呢?如何学好CSS呢? CSS称为层叠样式表,为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式.CSS在 ...
css模型安装,【CSS】CSS-框模型+定位+实训练习
<[CSS]CSS-框模型+定位+实训练习>由会员分享,可在线阅读,更多相关<[CSS]CSS-框模型+定位+实训练习(9页珍藏版)>请在人人文库网上搜索. 1.第二阶段-We ...
ue4模型导出_UE4-导入和导出
1.导出静态网格体 UE4能够识别FBX格式的静态网格体和骨架网格体,其中也包括动画.FBX可以包含以下类型的数据:可以是带有基本材质数据的静态网格体数据,可以是带有基本材质数据的骨骼蒙皮数据,可以是 ...
【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
这篇css博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~ 文章目录 P62.css简介 P63.css的语法规范 P65.选择器总体概述 ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...

不学好css模型的怎么入山门？师傅与徒弟的真实独白

前言

开篇

不学好css模型的怎么入山门？师傅与徒弟的真实独白相关推荐

最新文章

热门文章