网站服务类型,企划做网站,五种网络广告形式,如何做跨境电商怎么做目录
前言
开篇
定义
ie盒
标准盒
真实占有宽度
结局 前言 很久很久以前#xff0c;在一个小山庄里面住着一位少年。这位少年出生之时天有异向#xff0c;七星连珠#xff0c;乃神人也。三岁那年他跟着师傅上山学艺#xff0c;面临这人生的第一道关卡。这位少年我们…目录
前言
开篇
定义
ie盒
标准盒
真实占有宽度
结局 前言 很久很久以前在一个小山庄里面住着一位少年。这位少年出生之时天有异向七星连珠乃神人也。三岁那年他跟着师傅上山学艺面临这人生的第一道关卡。这位少年我们不妨叫其路人乙他的师傅我们叫做路人甲。
路人甲:小徒弟什么是CSS盒模型 谈谈你对他的认知和理解三日之内给与回复
路人乙:师傅徒儿告退三日之后再来汇报
开篇 此时的路人甲年龄偏小当时也没有什么笔记本电脑啥的。他来到了沙滩思考着css盒模型到底是什么呢陷入了沉思
就在这时有一位仙人来此我们叫他路人丙。路人丙想要不敲他三下晚上三更来找我只不过这个小屁孩怕是领悟不了。随即在沙滩上找出了一根木棍在沙滩上写下几行文字。
路人丙:小屁孩看我操作。
路人乙仙人你为啥不是变的还是找的木棍。
路人丙:这不是重点。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 100px;height: 100px;border: 10px solid red;background-color: pink;margin: 10px;padding: 10px;}/style
/headbodydiv我是路人乙 我比较帅气/div
/body/html
路人丙:看懂了吗谈谈你的理解
路人乙
定义
在 CSS 盒子模型 规定了元素处理元素的几种方式1width和height内容的宽度、高度不是盒子的宽度、高度。
2padding内边距。
3border边框。
4margin外边距。
路人丙心想这小屁孩果然是一名奇才容我好好点拨一番以后好在社会上真正立足。
说这时
路人丙:你知道在IE盒子和标准盒的区别吗
路人乙:我不知道 可否告知一下
说着打开
标准盒 路人丙:标准盒包括margin border padding content部分 content部分不包括paddingborder内容
ie盒包括margin border padding content部分 content部分包括paddingborder内容
路人乙
CSS盒模型和IE盒模型的区别在 标准盒子模型中width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸但是会增加元素框的总尺寸。
IE盒子模型中width 和 height 指的是内容区域borderpadding的宽度和高度。路人丙既然你对盒子有了新的体会和理解我们来看看真实占用宽高
.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盒子有了更深的理解了可以回去找你的师傅了
说着就又消失在茫茫的大海里。 结局
说着路人乙兴冲冲的到达了山门找到了师傅。告知他所遇到的一切
师傅很满意将小徒弟收入了山门。
在山门里小徒弟有开始学习了marginborderpaddingwidthheight的使用进一步拓展了自己
一个沉迷于故事的讲述者本故事纯属虚构欢迎交流。后续有想法会继续更新修改
本问题创作源于面经。
欢迎一起学习交流 让路人乙可以学到更多的知识。
相关文章：
