css里面的.box + .box 表示什么意思?

html-css015

css里面的.box + .box 表示什么意思?,第1张

这是个CSS的相邻同胞选择器。

.box + .box 意思就是:选择紧邻第一个box元素的同胞box元素。

这俩类名一样,解释起来有点混乱。

我举个例子。

例如:

<div class="box1"></div>

<h1 class="h1-1">标题</h1>

<div class="box2">

<h1 class="h1-2">标题</h1>

<p>文章段落</p>

</div>

如果我这么写:.box1 + h1 ,那么我选择的就是类名叫.h1-1的元素。

如果:.box2 + h1 ,它不会选择任何元素,因为.box2的下面没有一个叫h1的同胞元素。

如果:h1 + div ,那么会选择.box2的div元素。

第一个元素 + 第二个元素

这个选择器只会选择 紧邻第一个元素 并且是在第一个元素下面的同胞级元素

上面那段代码,如果你写 :.box1 + .box2 将没有效果,因为他们中间夹了个h1元素。

但是有一个选择器可以实现,就是.box1 ~ .box2 同胞选择器。

能力有限,不知帮到了吗?

box:主要是控制父容器里面子元素的排列方式、排列顺序、垂直(水平)对齐方式

box-flex:主要让子容器针对父容器的宽度按一定规则进行划分

注意:

前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。

后者是2009年的语法,已经过时,是需要加上对应前缀的。

所以兼容性的代码,大致如下

display: -webkit-box/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box/* Firefox 17- */

display: -webkit-flex/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex/* Firefox 18+ */

display: -ms-flexbox/* IE 10 */

display: flex/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

原文链接: https://blog.csdn.net/qq_41145685/article/details/104464232

—————————————————————

一、什么是盒子模型(Box Model)

盒子想必大家都是知道的吧!

生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着。

模型是什么呢?

它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件

css中的盒子模型它是可以对元素进行布局,设置距离的大小,这里面包括含有外边距、边框、内边距和内容主体这四个部分。

二、CSS中的标准盒子模型(W3c标准的盒子模型)

CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件,在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。

1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成

Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像。

2、标准盒子模型的计算

如图:

标准的盒子模型的大小是:content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距);

注:标准盒子的初始设置宽高大小不包含padding、border和margin的大小。

三、怪异盒子模型(IE标准的盒子模型)

1、怪异盒模型也叫IE盒子模型

怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。

怪异盒子(IE盒子模型)的触发条件:

(1) 给元素添加CSS3属性box-sizing:border-box(注:所以如果用CSS3新属性,就不要考虑低版本浏览器了)

(2)文档结构的doctype不写,这个是在IE8 IE7 IE6 IE5等低版本上有,测试可以在win7系统上比较老旧的IE浏览器上,win10自带的新IE浏览器不可以。

2、怪异盒子(IE盒子模型)模型的计算

如图可见添加了怪异盒的div盒子宽度变小了。

标准的盒子模型的大小是:content(区域内容大小)+margin(外边距);

注:怪异盒子的初始设置宽高大小包含padding、border大小在内,但不包含margin的大小。