国开大学Web开发课程基础知识点小结(二).pdfVIP

国开大学Web开发课程基础知识点小结（五）

（1）普通定位，也称“文档流定位”，是页面中所有元素的默认排列方式。

普通定位中，元素默认都是从父元素左上角开始排列的。块级元素（block）默

认都是从上到下排列的，且每个块元素独占一行。行内元素（inline）以及行内

块（inline-block），默认按照从左往右的方式排列，多个元素可在一行中水平

排列。

（2）若希望让块元素能在一行中左右排列，就要设置块元素的浮动定位属

性。CSS提供了float属性用于设置一个元素为浮动定位。其值可为：left、right

或none。

（3）元素一旦设置了浮动定位属性，就脱离普通文档流定位方式，不占用

普通文档流中的页面空间。文档的普通流中的其他块，会上移填补浮动元素留下

的空白位置。

（4）如果包含框太窄，无法容纳水平排列的3个浮动元素，那么最后放不

下的块会被挤压到下一行。如果浮动元素的高度不同，被挤压换行的浮动元素可

能被其他高度较大的浮动元素“卡住”。

（5）元素一旦浮动后，都会变为块级元素。即使是行内元素，也允许修改

大小尺寸。

（6）元素一旦浮动起来，后续元素会上前补充到浮动元素空出的空白位置，

就可能被浮动元素遮挡，可以使用clear属性清除浮动，该属性值可以是：left，

用于清除当前元素前面元素的左浮动带来的影响；right，用于清除当前元素前

面元素的右浮动带来的影响；both，清除当前元素任何一种浮动带来的影响。

（7）父元素的高度是以内部未浮动子元素的高度为准，而浮动元素是不占

高度的。如果内部浮动子元素高于外部容器元素，则内部浮动元素会从外部容器

元素底部突出来。清除浮动对父元素影响有4种方案：①给父元素设置固定的高

度；②设置父元素的overflow属性为hidden或auto；③设置父元素也浮动；

④在父元素的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影

响（clear：both）。其实，最优方案是：#main：：after{content：；display：

block；clear：both；}。

（8）display属性用于设置元素的显示方式。其值可以是：none，表示不

显示元素，用于隐藏一个元素；block，可让当前元素以块元素方式显示；inline，

可让当前元素以行内元素的形式显示；inline-block，可让元素以行内块元素的

形式显示。

（9）dispaly：none和visibility：hidden都可设置隐藏，但dispaly：none

会让元素脱离文档流，不占用页面空间，而visibility：hidden无法让元素脱离

文档流，虽然看不见，但依然占用空间。

（10）opacity属性用于设置元素的透明度。其值是0~1.0的一个小数。数

值越大，越不透明；数值越小，越透明。opacity可用于为整个元素的所有属性

及其子内容全部设置透明度，而rgba只作用于某个属性，如背景颜色等。

（11）vertical-align属性用于设置垂直方向上的对齐方式，主要应用于表

格元素和图片元素上。当用于图片元素上时，可设置图片元素左右的文本在垂直

方向上的对齐方式。取值可以是top、middle、bottom或baseline。

（12）cursor属性可设置鼠标的光标样式，即当鼠标悬停在元素上时，可

改变鼠标光标的显示样式。

（13）list-style-type属性用于定义列表项前的标志。其取值可以是：none，

无标志；disc，实