【小白学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,设置为盒子的实际大小,会缩放内容区的大小。目前比较流行这种写法。

相关推荐
carterwu2 分钟前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face3 分钟前
promise 规范应用
前端
Mintopia3 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face5 分钟前
事件循环
前端·javascript
ONE_Gua6 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil7 分钟前
CSS专题之盒模型
前端·css
谦谦橘子7 分钟前
服务端渲染原理解析
前端·javascript·react.js
carterwu7 分钟前
umi+模块联邦-配置指南
前端
Mintopia8 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
无名之逆14 分钟前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust