【小白学HTML5】盒模型_第一讲

任何一个网站都是由一个一个的矩形框(小盒子)组成:拿京东来说:

一个盒子的基本属性有:width、height、padding、margin、border,分别为宽、高、内边距、外边距、边框。

padding:padding-left 左内边距、padding-rigth 右内边距、padding-top 上内边距、padding-bottom 下内边距

magin:magin-left 左外边距、magin-rigth 右外边距、magin-top 上外边距、magin-bottom 下外边距

在计算盒子的大小时,浏览器只计算到border,也就是边框的大小,不会计算盒子的margin,但是可以通过属性:box-sizing来设置盒子大小的计算方式。

box-sizing:content-box,默认值content-box,不计算margin的值的,只计算到border。

box-sizing:border-box,设置为盒子的实际大小,会缩放内容区的大小。目前比较流行这种写法。

相关推荐
css趣多多6 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js
C澒6 小时前
前端整洁架构(Clean Architecture)实战解析:从理论到 Todo 项目落地
前端·架构·系统架构·前端框架
C澒6 小时前
Remesh 框架详解:基于 CQRS 的前端领域驱动设计方案
前端·架构·前端框架·状态模式
Charlie_lll6 小时前
学习Three.js–雪花
前端·three.js
onebyte8bits7 小时前
前端国际化(i18n)体系设计与工程化落地
前端·国际化·i18n·工程化
C澒7 小时前
前端分层架构实战:DDD 与 Clean Architecture 在大型业务系统中的落地路径与项目实践
前端·架构·系统架构·前端框架
BestSongC7 小时前
行人摔倒检测系统 - 前端文档(1)
前端·人工智能·目标检测
0思必得07 小时前
[Web自动化] Selenium处理滚动条
前端·爬虫·python·selenium·自动化
Misnice8 小时前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
青茶3608 小时前
php怎么实现订单接口状态轮询(二)
前端·php·接口