层次选择器 / 组合器

除了基础选择器,我们还可以用层级选择器,或者叫组合器

由于HTML文档大体上呈现一种层次的结构:html文档 --> body --> 各级标签...

我们就可以利用这种层次的关系来对HTML文档格式化

示例文档:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div>
<span>s1</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h3>h3</h3>h3>
</div>
<div>
<p>
<span>s2</span>
</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

初始样式:

1
2
3
4
* {
margin: 0;
padding: 0;
}

后代组合器

" "(空格)组合器选择前一个元素的后代元素。语法A B,将匹配位于A元素之内任意位置的B元素

1
2
3
div span {
background-color: #9999cc;
}

image-20221117152654747

直接后代组合器

>组合器选择前一个元素的直接后代元素。语法A > B,将仅选择位于A次级的B元素

1
2
3
div > span {
background-color: #9999cc;
}

image-20221117152713996

一般兄弟组合器

~组合器选择后一个元素在前一个元素后面的任意位置,并拥有同一父元素。语法A ~ B,将选择在同一父元素下,A元素后的所有B元素

1
2
3
span ~ h3 {
background-color: #9999cc;
}

image-20221117152726797

紧邻兄弟组合器

+组合器选择相邻元素,并拥有同一父元素。语法A + B,将选择同一父元素下,紧邻A的B元素

1
2
3
span + h3 {
background-color: #9999cc;
}

image-20221117152737210

浮动 float

参考文章:

经验分享:CSS浮动(float,clear)通俗讲解 - 杨元 - 博客园 (cnblogs.com)

float可以键入的值

描述
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动
inherit 从父元素继承float的值

浮动的理解

div为块级元素,在默认情况下,div会在页面独占一行,自上而下的排列,也就是文档的标准流

image-20221115181012615

如上,我们发现box3、box4虽然看起来可以在一行内放下,但是box4依旧不会排在box3后面,因为标准流中的div元素会在页面中独立一行

如果我们需要在一行内显示多个div元素来达到布局的效果,那么标准流很明显无法满足这个要求,这里我们就需要用到浮动

浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次

假如我们这时候让box2向左浮动(float:left),会出现这样的情况

image-20221115184611117

box3被box2挡住了一部分。因为box2脱离了标准流,而box1、box3、box4依然存在标准流中,因此box3、box4自动向上移动,到达了box2原本所在的位置,形成新的标准流

如果我们将box2向右浮动(float:right),就会出现这种效果

image-20221115185103550

很显然验证了我们上面的说法。

如果我们将多个盒子都进行浮动,那出现的效果会是怎么样的呢?

我们将box2、box3都向左浮动:

image-20221115200224687

box3接在了box2后面,box4上移到了box1下面与box1形成新的标准流。

如果我们尝试不将相邻的两个box都设置为浮动,会出现什么情况?将box2和box4都设置为向左浮动,会出现这种情况:

image-20221115205730142

box4没有上移与box2相接,接在了box3的下面,我们再来看看将box2和box4设置为向右浮动:

image-20221115205852383

得到了上面的图的分离版本,因此我们可以得到一个结论

假如某个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文档中顺序决定

  • 跟随的顺序是根据距离网页边缘判断,靠近网页边缘为前,远离网页边缘为后

    image-20221115211406244

清除浮动

通过上面的内容,我们可以简单理解为,在标准流中,元素是竖向排列的,在浮动中,元素是横向排列的

清除浮动可以理解为打破横向排列

清除浮动的属性是clear

clear可以填入的属性有

描述
none 默认值,不清除浮动
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 不允许左右边有浮动对象

对于清除浮动这个属性,有一个非常重要的特性

这个属性只能影响使用清除元素的本身,不能影响其他元素

如何理解这句话呢?

image-20221116010753322

有两个浮动的box,若我们想让box2排列在box1下面,就像box1无浮动,box2浮动那样,按照我们看到文档的一般想法,是在box1上使用clear:right,以此来达到“不允许右边有浮动对象”的效果

但是,我们提到了只能影响本身的这个特性,因此我们需要在box2本身去使用clear属性,让box2clear:left,不允许其左边有浮动属性,迫使box2下移一行:

image-20221116011750381

以上就是浮动的基本的概念了