基本概念
? 1.?基本概念 视觉格式化模型(visual formatting model):CSS的一种机制,它规定了页面中的多个盒子如何布局。 包含块:每个元素都有一个包含块,它是指元素在页面中摆放的区域 通常情况下,元素的包含块是它父元素的内容盒(content-box) 根元素的包含块是初始化包含块(initial containing block)。 2.?定位体系概述 视觉格式化模型规定,定位体系一共有三种: 常规流(normal flow) 浮动(float) 绝对定位(absolute positioned) 任何一个元素,必须属于其中一种定位体系,不同的定位体系中,元素在包含块中的尺寸和位置会有一些差异。 3.?盒模型和定位体系 ? 4.?常规流-盒模型中的auto值 常规流,又叫做普通流、文档流、普通文档流,常规流是最常见的定位体系,所有元素默认状态下都是常规流定位。 水平方向:常规流盒子水平方向上的尺寸,必须等于包含块的宽度,如果不行,则强行将margin-right设置为auto。 垂直方向:margin为auto:0px,height为auto:适应内容的高度。 盒子位置 盒子在包含块的垂直方向上依次摆放,依次摆放:按照HTML元素的书写顺序从上到下摆放,盒子在包含块中占据的尺寸是整个盒子的尺寸。 垂直方向上,若两个外边距相邻,则进行合并(折叠),垂直方向:水平方向上的外边距不会合并,外边距相邻:两个外边距之间没有border、padding和content,合并:均为正数取最大,均为负数取最小,一正一负则相加。 ? ? 5.?当常规流遇上浮动 常规流盒子和浮动盒子混合摆放,浮动盒子在摆放时,要避开常规流盒子,常规流盒子在摆放时,无视浮动盒子,常规流盒子的自动高度计算时,无视浮动盒子 —— 高度坍塌。 清除浮动 对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方,对最后一个子元素使用clear:both,可防止父元素高度坍塌。 6.?绝对定位概述 当浮动元素被设置为绝对定位 属于绝对定位,float属性被强制设置为none 绝对定位元素对其他元素的影响 绝对定位元素不会对其他任何元素造成任何影响 绝对定位元素的位置 可通过left、top、right、bottom来设置 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |