2021-03-11css 在父元素和子元素之间得应用（重难点）

html-css028

2021-03-11css 在父元素和子元素之间得应用（重难点）,第1张

2.2、在父元素和子元素之间得应用（重难点）

1、父子之间水平距离

在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。margin-right同理也是

在子元素中设置垂直方向得margin

-----问题:没有效果和父元素一块下来了

原因：实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug–父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。

解决办法

你说讲的这应该是同级兄弟元素之间的CSS控制。

话说有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。

临近兄弟：用 ＋ 表示，只匹配该元素后边的第一个同级元素。

普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。

给个例子：

<style>

div#aa { }

div#aa p { font-size: 14pxcolor: #000}

div#aa p.on { color: #f00}

div#aa p.on ~ span { color: #00f}

div#aa p.on + span { color: #0f0font-weight: bold}

</style>

<div id="aa">

<p class="on">sdf</p>

<span>sdf</span>

<span>sdf</span>

</div>

当把p的class设为on的时候，span的样式也跟着改变。

不知道这么说清楚没有。

另外这种方式IE6是不支持的。慎用吧。

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

兄弟元素选择器