网站建设新闻

CSS定位和盒子模型

2020-04-21 09:45:17 合肥网站建设制作网络公司
CSS 定位和盒子模型
CSS 对元素的定位包括相对定位和绝对定位。还可以把相对定位和绝对定位结合起来,形成混合定位。
盒子模型的概念
CSS定位和盒子模型
熟练掌握 Div 和 CSS 的布局方法,首先要对盒模型有足够的了解。盒子模型是 CSS 布局网页时非常重要的概念,只有很好地掌握了盒子模型以及其中每个元素的使用方法,才能真正地布局网页中各个元素的位置。
所有页面中的元素都可以看作是一个装了东西的盒子,盒子里的东西到盒子的边框之间的距离即填充(padding),盒子外边框和其他盒子之间的距离,即边界(margin)。
一个盒子由4 个独立部分组成,如图 7-2 所示。第一部分是最外面的边界(margin);第二部分是边框(border),边框可以有不同的样式;第三部分是填充(padding),填充用来定义内容区域与边框(border)之间的空白;第四部分是内容区域。
填充、边框和边界都分为【上、右、下、左】4 个方向,既可以分别定义,也可以统一定义。当使用 CSS 定义盒子的宽度和高度时,定义的并不是内容区域、填充、边框和边界所占的总区域,而是内容区域(content)的宽度和高度。为了计算盒子所占的实际区域必须加上填充、边框和边界。
实际宽度=左边界+左边框+左填充+内容宽度(width)+右填充+右边框+右边界实际高度=上边界+上边框+上填充+内容高度(height)+下填充+下边框+下边界
 
 

关于网站建设公司

网站模板超市

网络公司案例

15375431506

网络公司咨询:周一至周日 08:00~21:00