国开大学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，实心圆；circle，空心圆；square，实心方块。
（14）list-style-image属性可使用自定义图像作为列表项标志。其取值格式为：url（图片
路径）。
（15）list-style-position属性用于将默认的列表项标志放到li里面。其取值默认是outside，意为将列表项标志放在li外面。其取值还可为inside，意为将列表项标志放在li里面。
（16）list-style属性其实是将之前3种属性合并为一句话的简写。其取值格式由三部分组成：type url（）position，中间用空格分隔。所以，清除列表项标志的简单写法应为：list style：none。
（17）相对定位是指让元素相对于它在默认文档流中的原始位置偏移一段距离，经常在对元素位置做微调时使用。使用position：relative可设置元素为相对定位。相对定位的元素，虽然位置偏离了原位置，但是，默认文档流中的原位置不释放。
（18）绝对定位（position：absolute）是指通过相对于离它最近的已定位（同样设置了position属性）的祖先元素实现定位。如果当前元素的各级父元素中没有已定位的祖先元素，那么元素就相对于body定位。所以，通常在设置绝对定位前，都要先到要参照的祖先元素，并为祖先元素添加position属性。如果祖先元素不需要改变位置，则可将祖先元素设置为相对定位（relative）。
（19）固定定位（position：fixed）是指将元素固定在文档显示区中的某个位置。文档显示区就是浏览器中用于显示网页的区域。固定定位的元素以文档显示区左上角作为参照，且位置不会随着滚动条的滚动而发生改变。
（20）4个偏移属性：top、bottom、left、right。
（21）z-index属性用于改变元素的堆叠顺序，其值为一个数字，无须添加单位。数字越大，越靠上层。Z-index属性并不是总有效。例如，父子元素间z-index无效，因为子元素永远都压在父元素上。再如，只有已定位元素才能使用z-index属性，没有使用定位属性的元素不能使用z-index属性。
（22）具备相同父元素的平级元素称为兄弟元素。兄弟选择器用于基于当前元素，选择相邻或附近的有兄弟关系的其他元素。兄弟选择器包括两种选择器：相邻兄弟选择器，选择器1+选择器2{}，用于获取紧邻当前元素之后的一个兄弟元素；通用兄弟选择器，选择器1~选择器2{}，用于获取某元素后所有满足条件的平级兄弟元素。
（23）属性选择器用于通过元素的属性及其值匹配页面中的元素，包括：［属性名］，匹
配所有附带指定“属性名”的元素；［属性=值］，用于匹配附带指定属性且属性值为指定“值”的元素；［属性*=内容］，用于匹配附带指定属性且属性值中包含指定“内容”的元素；［属性^=开头］，用于匹配附带指定属性且属性值以指定“开头”为开头的元素；［属性$=结尾］，用于匹配附带指定属性且属性值以指定“结尾”为结尾的元素。
（24）目标伪类，选择器：target{…}，用于匹配被激活时的锚点目标元素。
（25）结构伪类，用于通过确定子元素在其父元素下的位置来匹配某一个子元素，包括： ：first-chlid，用于匹配作为其父元素下第一个子元素的元素； ：last-child，用于匹配作为其父元素下最后一个子元素的元素； ：nth-child（n），用于匹配作为其父元素下第n个子元素的元素； ：empty，用于匹配没有子元素的元素； ：only-child，用于匹配作为其父元素下唯一子元素的元素。
（26）否定伪类， ：not（selector）{}，用于将满足指定选择器的元素排除在外，反而选择不符合选择器要求的其他元素。
（27）伪元素选择器，用于匹配元素中的内容，而不是匹配元素，包括 ：first-letter或：：
first-letter，用于匹配某个元素的首字符； ：first-line或：：first-line，用于匹配某个元素的首行文字； ：：selection，用于匹配被用户选取的内容； ：before或：：before，用于匹配某个元素内容区域之前的位置； ：after或：：after，用于匹配某元素内容区域结尾的位置。
（28）伪元素选择器：：before和：：after均可看作一个虚拟的元素。元素可设置的属性，伪元素也可设置。元素具有的特征，伪元素也同样具备。只不过伪元素通常看不见，且不会对位置选择器造成影响而已。
（29）content属性负责在指定位置插入新内容。其值是一段文字或符号。但content属性的值必须用引号包裹起来。例如，p：：before{content：">>"}。使用内容生成可解决HTML和CSS中两大难题：防止外边距溢出——：：before{content：""；display：table；}；清除浮动给父元素高度带来的影响——父元素选择器：after{display：block；content：""；clear：both；}。flex布局对齐方式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。