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

相关推荐
scan7245 分钟前
大模型只是知道要调用工具,本身不
前端·javascript·html
云水一下1 小时前
CSS3从零基础到精通(一):前世今生与基础入门
前端·css3
顾凌陵1 小时前
CSRF&SSRF漏洞攻击的溯源分析与实战
前端·csrf
月月大王的3D日记1 小时前
Three.js 材质篇(中):从兰伯特到PBR,一篇文章看懂五种光照材质
前端·javascript
且白1 小时前
leaflet切片变色、地图滤镜逻辑实现 colorfilter
前端·javascript
用户887665426631 小时前
Linux 终端入门:新手必须掌握的常用命令和基本思路
前端·操作系统
用户125758524361 小时前
Vue3 后台框架的网络请求怎么设计?看 XYGo Admin 三套 Axios 实例与拦截器方案
前端
ZengLiangYi1 小时前
多格式文件解析:JSONL / SQLite / Event Stream
前端·javascript·后端
边界条件╝1 小时前
微前端进阶(一)
前端