盒模型
1 盒子中的区域
f35d6e602fd7d0f0edfa6f7d103c1b57盒子的主要属性：
width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
2cc198a1d5eb0d3eb508d858c9f5cbdb下面两个盒子，真实占有宽高，完全相同，都是302*302：
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;}
计算如下：1+100+100+100+1=302px.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border5bdf4c78156c7953567bb5a0aef2fc53如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width.
2.认识padding
f35d6e602fd7d0f0edfa6f7d103c1b57padding的区域有背景颜色，在css2.1中背景颜色一定和内容区域的相同。
2cc198a1d5eb0d3eb508d858c9f5cbdbpadding是4个方向的，所以我们能够分别描述4个方向的padding.
第一种：小属性，也就是复合属性。
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
第二种：综合属性。
空格隔开，上右下左。
padding:30px 20px 40px 100px;
5bdf4c78156c7953567bb5a0aef2fc53可以用小属性层叠大属性(不能把小属性写在大属性前面)：
padding:20px;padding-left:30px;
题目一：
p{
width:200px;
height:200px;
padding-left:10px;
padding-right:20px;
padding:40px 50px 60px;
padding-bottom:30px;
border:1px solid #000;
}答:padding-left:10px；和 padding-right:20px；没用，因为后面的padding大属性，层叠掉了他们。
23889872c2e8594e0f446a471a78ec4c一些标签默认带有padding.比如ul.所以说，我们做站的时候，会清除这个默认的padding.
3.border 边框
f35d6e602fd7d0f0edfa6f7d103c1b57边框三要素：粗细、线型、颜色。
2cc198a1d5eb0d3eb508d858c9f5cbdb所有的线型：
none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有：solid 、dashed、 dotted
5bdf4c78156c7953567bb5a0aef2fc53border属性能够被拆开，有两大种拆开的方式：
第一种：按要素
border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于：border:10px solid red;
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
第二种：按方向
第一种拆法：
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red
第二种拆法：就是把每个方向的，每个要素拆开：
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于：border:10px solid red;
23889872c2e8594e0f446a471a78ec4c可以用边框做三角形。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
p{
width: 0px;
height: 0px;
border: 30px solid white;
border-top-color: pink;
transition:all 1s ease 0s;
}
p:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>4.标准文档流
4.1块级元素和行内元素
f35d6e602fd7d0f0edfa6f7d103c1b57从宏观上讲，web页面和Ps等设计软件有本质的趋避：
web页面的制作，从上往下。而设计软件，想往哪里画东西，都可以画。
2cc198a1d5eb0d3eb508d858c9f5cbdb标准流的微观性质：
（1）空白折叠现象。
（2）高矮不齐，底边对齐。
（3）自动换行，一行写不完，换行写。
5bdf4c78156c7953567bb5a0aef2fc53块级元素和行内元素
（1）标签分为两种等级：块级元素和行内元素。
（2）块级元素：
霸占一行，不能与其他任何元素并列。 能接受宽高。 如果不设置宽度，那么宽度将默认变为父亲的100%。
（3）行内元素：
可以与其他行内元素并排。 不能设置宽高。默认的宽度，就是文字的宽度。
（4）标签分为：文本级、容器级。
文本级：p、span、a、b、i、u、em 容器级：p 、h系列 、li 、dt 、dd
基本上所有的文本级标签，都是行内元素。除了p,是块级元素。
所有的容器级标签，都是块级元素。
4.2块级元素和行内元素的相互转换
f35d6e602fd7d0f0edfa6f7d103c1b57块级元素可以设置为行内元素。行内元素可以设置为块级元素。
2cc198a1d5eb0d3eb508d858c9f5cbdbdisplay用来改变元素的行内、块级性质。
display:inline; 这个标签将会变为行内元素。 display:block; 这个标签将会变为块级元素。
5bdf4c78156c7953567bb5a0aef2fc53css中一共有三种手段，使一个元素脱离标准文档流。
（1）浮动
（2）绝对定位
（3）固定定位
5.浮动：是CSS里面布局用的最多的属性。
5.1浮动的元素脱标
5.2浮动的元素互相贴靠
f35d6e602fd7d0f0edfa6f7d103c1b57如果有足够的空间，会靠着二哥。如果没有足够的空间，会靠着一哥。如果没有足够的空间靠着一哥，自己去贴左墙。
2cc198a1d5eb0d3eb508d858c9f5cbdbfloat:left/right;
5.3浮动的元素有“字围”效果
以上是css盒模型简介的详细内容。更多信息请关注PHP中文网其他相关文章！
两个图像和一个API：我们重新着色产品所需的一切Apr 15, 2025 am 11:27 AM我最近找到了一种动态更新任何产品图像的颜色的解决方案。因此，只有一种产品之一，我们可以以不同的方式对其进行着色以显示
每周平台新闻：第三方代码，被动混合内容，连接最慢的国家的影响Apr 15, 2025 am 11:19 AM在本周的综述中，灯塔在第三方脚本上阐明了灯光，不安全的资源将在安全站点上被阻止，许多国家连接速度
托管您自己的非JavaScript分析的选项Apr 15, 2025 am 11:09 AM有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics（广泛使用）
它全部都在头上：管理带有React头盔的React Power Site的文档头Apr 15, 2025 am 11:01 AM文档负责人可能不是网站上最迷人的部分，但是其中所处的内容对于您的网站的成功也一样重要
JavaScript中的Super（）是什么？Apr 15, 2025 am 10:59 AM当您看到一些称为super（）的JavaScript时，在子类中，您会使用super（）调用其父母的构造函数和超级。访问它的
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
WebStorm Mac版
好用的JavaScript开发工具
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
