后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose
目录
一、图解
说明:由内而外依次是content、padding(内边距)、border(边框)、margin(外边距)。
举个例子:一个快递车里放了许多快递包裹(盒子包装的),每个包裹里面又放了不同的东西。
content:真正容纳其他东西的区域。比如快递车的content,就是那些包裹所处的那个空间;
而每个包裹的content,就是那些东西所处的空间。
content里面可以放置 其他元素、文本、图片等。
border: 盒子的边框。比如快递车的那个铁皮,包裹外层的那个盒子。
可以指定边框的颜色、粗细(width)、样式等。
padding:content到border之间的距离。
margin: 包裹和包裹之间的距离。这个距离可以是负的,因为可以相互叠加。
注意事项:由于各个浏览器会对元素的margin、padding值进行不同值的初始化。
所以每次写样式时,需要对页面内涉及到的元素进行初始化。
/* 将当前页面内涉及的元素表签列出来 */body,div,span{ margin:0px; padding:0px;}
二、盒模型尺寸基准
默认情况下,设置一个元素的width、height,其实设置的就是content的宽度和高度。
Q:那这个元素的实际宽度、实际高度是多少呢?
A:实际宽度=左margin + 左border + 左padding + content + 右padding + 右border + 友margin ;实际高度同理。
Q:那么问题来了,我如果想直接设置某个元素的实际高度怎么办呢?
A:CSS3新增加了一个属性box-sizing就是用来解决这个问题。它有三个值:content-box、border-box、inherit。
content-box:就是通常的默认情况,指的是content的高度、宽度。
border-box :字面意思不难看出,指的就是border以内(包含border)的高度、宽度。
inherit:从父级元素继承box-sizing属性的值。
三、使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题
使用谷歌浏览器审查元素功能时,它会职能的提示出当前元素的高度、宽度。但经过计算元素的实际高度、宽度,发现与提示的信息不一致。
<style> div { width: 200px; padding: 20px; border: 1px solid red; margin: 10px; }</style><div>文本内容</div>
通过计算得出,div的实际宽度= 10 + 1 + 20 + 200 + 20 + 1 + 10 = 262px;
而开发者工具展示出来的结果为242px,差了20px;
通过调整不同参数,最后得出结论为: 审查元素计算出来的结果是不包括 margin值的。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit
