您的位置: 首页  >  文章  >  CSS（四）|页面布局之盒子模型

CSS（四）|页面布局之盒子模型

分类: 文章 • 2024-10-19 15:51:46

CSS（四）|页面布局之盒子模型

01.盒子模型

CSS（四）|页面布局之盒子模型
1.1看透网页布局的本质
CSS（四）|页面布局之盒子模型
1.2盒子模型（Box Modle）组成
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.3边框（border）
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.4表格的细线边框
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
第一个图没有合并相邻的边框
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.5边框会影响盒子实际大小
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.6内边距（padding）
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
案例：新浪导航案例-paddind影响盒子好处
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
案例：小米导航案例修改-padding影响盒子大小计算
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.7外边距（margin）
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型

CSS（四）|页面布局之盒子模型
1.8外边距典型应用
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.9外边距合并

CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
1.10清除内外边距
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型
CSS（四）|页面布局之盒子模型

相关推荐