CSS盒子模型(Box Model)

合集 - 2024年(51)

1.博客正在建设中2021-01-012.VSCode安装教程详细简单版2022-10-113.下面在 Mac 演示 Rust 的安装，其他系统教程请看安装 Rust2022-10-134.windows下运行rust报错error: linker `link.exe` not found2022-10-135.Rust学习—解决crates.io 仓库代码下载慢的问题2022-10-126.vscode如何链接git远程仓库gitee或github2022-10-117.标签之段落,换行,水平线2023-03-128.标签之标题2023-03-119.HTML5简介与基础骨架2023-03-1110.VScode开发者工具快捷键2023-03-1011.前端工具的选择与安装2023-03-1012.第一个前端程序2023-03-1013.JavaScript回调函数2023-02-1914.Rust语言迭代器使用总结2022-10-1915.选择器二2023-03-1816.选择器一2023-03-1817.CSS的引入方式2023-03-1718.CSS简介2023-03-1719.HTML5新增标签2023-03-1620.块元素与行内元素(内联元素)2023-03-1621.表单元素2023-03-1522.Form表单2023-03-1523.表格单元格合并2023-03-1424.标签之表格2023-03-1425.列表标签之无序列表2023-03-1326.列表标签之有序列表2023-03-1327.标签之文本2023-03-1328.标签之超文本链接2023-03-1229.图片路径详解2023-03-1230.标签之图片2023-03-1231.util.promisify 的那些事儿2023-04-2032.Js数组过滤的方法2023-04-1933.Mac访问Windows10共享文件夹2023-04-1734.如果 Git 远程库与本地库不一致，导致无法将本地代码推送到远程库中，2023-04-1535.构建React-app应用时create-react-app卡住超慢的解决办法2023-04-1536.vscode的格式化的settings.json的个人配置2023-04-1337.雪碧图2023-03-2638.媒体查询2023-03-2639.动画2023-03-2540.css3新特性2023-03-2541.定位2023-03-2542.清除浮动2023-03-2343.浮动2023-03-2344.文档流2023-03-2345.弹性盒子模型2023-03-22

46.CSS盒子模型(Box Model)2023-03-21

47.关系选择器2023-03-2148.表格属性2023-03-2049.文本属性2023-03-2050.背景属性2023-03-1951.字体属性2023-03-19

收起

CSS盒子模型(Box Model)

 

概念

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用

CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:

外边距(margin),边框(border),内边距(padding),和实际内容(content)

 

1. Margin(外边距)-清除边框外的区域,外边距是透明的

2. Border(边框)-围绕在内边距和内容外的边框

3. Padding(内边距)-清除内容周围的区域,内边距是透明的

4. Content(内容)-盒子的内容,显示文本和图像

如果把盒子模型看作是一个生活的快递,那么内容部分等同于你买的实物,内边距等同于快递盒子中的泡沫,边框等同于快递盒子,外边距等同于两个快递盒子之间的距离

 

<div></div>

div{
    width:100px;
    height:100px;
    padding:10px;
    border:2px solid red;
    margin:10px;
    background:green;
}