首页 > 其他分享> 文章详细

css盒模型

2021-11-14 13:33:00 阅读：121 来源： 互联网

标签：盒子模型高度边框宽度内容 margin css

超级无敌级别的白话文介绍

盒子简单的来说就是我们平常所使用div，所有的HTML元素可以看作盒子，一般是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和内容。

下面的图片就说明了盒子模型

简单介绍一下元素

Margin(外边距) 清除边框外的区域，外边距是透明的。

　　margin:上，右，下，左　　　　　　四个值
　　margin：上，左右，下　　　　　　三个值
　　margin:上下，左右　　　　　　　　两个值
　　margin: 上下左右　　　　　　　　一个值
左右居中: margin-left: auto;margin-top: 0;

Border(边框) 围绕在内边距和内容外的边框。

　　solid 实线
　　double 双实线
　　dotted 点虚线
　　dashed 线段虚线

Padding(内边距) 清除内容周围的区域，内边距是透明的。

　　与Margin(外边距)同理

Content(内容) 盒子的内容，显示文本和图像。

注意：

width和height：内容的宽度、高度（不是盒子的宽度、高度）；padding：内边距 border：边框 margin：外边距标准盒子模型中， width 和 height 指的是内容区域的宽度和高度。当你指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

ヽ(●-`Д´-)ノ 重要的事情说三遍！！！

你设置CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，不是盒子的宽度、高度！！！

标签：盒子,模型,高度,边框,宽度,内容,margin,css
来源： https://www.cnblogs.com/dmx2021/p/15551560.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css盒模型