Web开发基础(4):层次选择器(组合器)、浮动
层次选择器 / 组合器
除了基础选择器,我们还可以用层级选择器,或者叫组合器
由于HTML文档大体上呈现一种层次的结构:html文档 --> body --> 各级标签...
我们就可以利用这种层次的关系来对HTML文档格式化
示例文档:
1 | <div> |
初始样式:
1 | * { |
后代组合器
" "
(空格)组合器选择前一个元素的后代元素。语法A B
,将匹配位于A元素之内任意位置的B元素
1 | div span { |
直接后代组合器
>
组合器选择前一个元素的直接后代
元素。语法A > B
,将仅选择位于A次级的B元素
1 | div > span { |
一般兄弟组合器
~
组合器选择后一个元素在前一个元素后面的任意位置,并拥有同一父元素。语法A ~ B
,将选择在同一父元素下,A元素后的所有B元素
1 | span ~ h3 { |
紧邻兄弟组合器
+
组合器选择相邻元素,并拥有同一父元素。语法A + B
,将选择同一父元素下,紧邻A的B元素
1 | span + h3 { |
浮动 float
参考文章:
经验分享:CSS浮动(float,clear)通俗讲解 - 杨元 - 博客园 (cnblogs.com)
float可以键入的值
值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认值。元素不浮动 |
inherit | 从父元素继承float的值 |
浮动的理解
div为块级元素,在默认情况下,div会在页面独占一行,自上而下的排列,也就是文档的标准流
如上,我们发现box3、box4虽然看起来可以在一行内放下,但是box4依旧不会排在box3后面,因为标准流中的div元素会在页面中独立一行
如果我们需要在一行内显示多个div元素来达到布局的效果,那么标准流很明显无法满足这个要求,这里我们就需要用到浮动
浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次
假如我们这时候让box2向左浮动(float:left),会出现这样的情况
box3被box2挡住了一部分。因为box2脱离了标准流,而box1、box3、box4依然存在标准流中,因此box3、box4自动向上移动,到达了box2原本所在的位置,形成新的标准流
如果我们将box2向右浮动(float:right),就会出现这种效果
很显然验证了我们上面的说法。
如果我们将多个盒子都进行浮动,那出现的效果会是怎么样的呢?
我们将box2、box3都向左浮动:
box3接在了box2后面,box4上移到了box1下面与box1形成新的标准流。
如果我们尝试不将相邻的两个box都设置为浮动,会出现什么情况?将box2和box4都设置为向左浮动,会出现这种情况:
box4没有上移与box2相接,接在了box3的下面,我们再来看看将box2和box4设置为向右浮动:
得到了上面的图的分离版本,因此我们可以得到一个结论:
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前,远离页面边缘的一端是后。
为了更清晰明了,我将其分了一下点
-
A为浮动的div元素
-
A的上一个div元素B是浮动,则A会跟随C后
-
A的上一个div元素C是标准流中的元素,则A顶部与C的底部在同一平面
-
div的顺序是由div在HTML文档中顺序决定
-
跟随的顺序是根据距离网页边缘判断,靠近网页边缘为前,远离网页边缘为后
清除浮动
通过上面的内容,我们可以简单理解为,在标准流中,元素是竖向排列的,在浮动中,元素是横向排列的
而清除浮动可以理解为打破横向排列
清除浮动的属性是clear
clear可以填入的属性有
值 | 描述 |
---|---|
none | 默认值,不清除浮动 |
left | 不允许左边有浮动对象 |
right | 不允许右边有浮动对象 |
both | 不允许左右边有浮动对象 |
对于清除浮动这个属性,有一个非常重要的特性:
这个属性只能影响使用清除元素的本身,不能影响其他元素
如何理解这句话呢?
有两个浮动的box,若我们想让box2排列在box1下面,就像box1无浮动,box2浮动那样,按照我们看到文档的一般想法,是在box1上使用clear:right
,以此来达到“不允许右边有浮动对象”的效果
但是,我们提到了只能影响本身的这个特性,因此我们需要在box2本身去使用clear属性,让box2clear:left
,不允许其左边有浮动属性,迫使box2下移一行:
以上就是浮动的基本的概念了