CSS父级子级学习总结

最新推荐文章于 2023-10-18 10:20:28 发布

bcbobo21cn

最新推荐文章于 2023-10-18 10:20:28 发布

阅读量6.8k

点赞数 1

分类专栏： web前端文章标签： CSS CSS父级子级

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

CSS 父级子级

http://www.divcss5.com/rumen/r239.shtml

1、认识了解
简单讲CSS父级 CSS子级是相对而言，如一个DIV “A”被另外一个DIV “B”包裹着，这样我们就可以认
为B是A父级。

父级子级或有时把DIV嵌套关系比作父亲儿子关系，这个是为了便于理解将DIV嵌套关系形象比作父级子
级关系叫法。

2、举例说明：
DIV CSS 父级子级说明例子：

CSS代码

.yangshi{...}
.yangshi .yangshi_a{ ...}
.yangshi .yangshi_b{ ...}

Div代码

以上div+css代码这里我们就可以认为 yangshi_a父级（上一级）是yangshi。
这样我们就可以利用CSS指针属性在div css中,最终CSS样式可以有相同命名的属性选择器的，但是赋予
不同的值。
这样我们通过.yangshi .yangshi_a一看即可知道yangshi_a的父级是yangshi

3、认识CSS父级子级目的
我们搞清div css之间父级自己关系，目的也是为我们维护和查找。

========

父子级间的z-index关系

https://blog.csdn.net/WEB_YH/article/details/53327175

自己经常用z-index改变层级，但从来没有在父子元素上使用。今天一个小伙伴在制作二级菜单
的时候就碰到了这个问题，

我们想通过使用z-index改变父子层级，使父亲的层级高于孩子，从而覆盖儿子，然而结果却
不是我们想要的，无论我们怎么调高父亲层级，降低儿子层级都没有用，

关于z-index层级问题
首先使用z-index需要先加上position:absolute/relative定位。
然后你要知道z-index 是要考虑父级的，如果子级z-index为0，那么父级就是200000也不会覆盖住
子级。原因如下：
在标准浏览器中，对父级的要求不是特别高，同级的对应上z-index可以了。但要注意的是父级里放
一个子级那么父级是无法放在子级之上的，需要放在同一级别中才可以（经过测试的）

如果想要父级覆盖子级，那么父级不需要设置z-index，只要孩子设置就z-index就可以了。如下：

========

css 实现左右div 等高, 同时父级div就是最高的子div的高度

https://www.cnblogs.com/cbza/p/7145384.html

方法一: 通过父级overflow:hidden, 自己设置padding-bottom 和 margin-bottom来实现.

#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}

方法二: 使用 table-cell

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left,
        .right {
            padding: 10px;
            display: table-cell;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        left div
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <div class="right">right div</div>
</div>
</body>
</html>

方法三:使用css3盒模型

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .wrap {
            display: -webkit-box;
        }
        .left,
        .right {
            padding: 10px;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        left div
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <div class="right">right div</div>
</div>
</body>
</html>

========

html/css更改子级继承的父级属性

一个精美的网页需要的样式很多，在父级上设置的字体颜色或者大小，在其子元素中不一定全部相
同，这时候要更改其中某一项的样式怎么办呢。

很多新手朋友就不明白，会迷惑为什么我使用class单独命名了，重新设置了还是没有变化，会考虑
是不是格式错了，是不是命名有问题，但是有没有考虑过权重值呢，新手朋友对于权重值的使用不是很
重视，但其实用处是很大的。

ID选择器值100，类、伪类、属性选择器值10，元素选择器值1，也许使用ID命名，直接更改样式就
会有变化，但是毕竟ID命名的方式使用的没有class命名使用的多，这时候只要重视了权重值，就知道其
好处之多。

========

父级div没高度不能自适应高度的原因——子级使用css float浮动

https://www.cnblogs.com/charmingyj/p/7132301.html

　　我们常常在做盒子嵌套的时候，最外层盒子不想给他设置高度，因为我们填充的内容不确定有多大
，一般就选择auto自适应。

　　然，子级盒子又是一个嵌套或者样式复杂点，超出父级盒子的边界外边，在央视里面调来调去调不
好，试过修改display属性、又再嵌套盒子，都不是很理想，最后找了一圈（强大的百度）发现问题所在
了，这个是由于浮动产生原因。

初始代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>div_自适应</title>
    <style type="text/css">
    .div1{
        border: 1px solid #ccc;
        width: 500px;
        padding: 20px;}
    .div_l{
        float: left;
        background-color: lightgreen;
        width: 200px;
        height: 200px;}
    .div_r{
        float: right;
        background-color:green;
        width: 200px;
        height: 200px;}
    </style>
</head>
<body>
    <div class="div1">
        <div class="div_l">div_l</div>
        <div class="div_r">div_r</div>
    </div>
</body>
</html>

效果图如上，按照代码中div的需要，给父级div设置height=200px即可，若子级div数据较多，或者从后
台调取数据进行添加时，设置的高度又不适用了。

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>div_自适应</title>
<style type="text/css">
.div1{
border: 1px solid #ccc;
width: 500px;height: 200px;
padding: 20px;}
div div{
float: left;
margin-right: 50px;
margin-bottom: 50px;
background-color:green;
width: 200px;
height: 200px;}
</style>
</head>
<body>
<div class="div1">
<div class="div_1">div_1</div>
<div class="div_2">div_2</div>
<div class="div_3">div_3</div>
<div class="div_4">div_4</div>
</div>
</body>
</html>

方法一：对父级加 overflow 样式

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>div_自适应</title>
<style type="text/css">
.div1{
border: 1px solid #ccc;
width: 500px;height: 200px;
padding: 20px;
overflow: hidden;/*overflow:*/}
div div{
float: left;
margin-right: 50px;
margin-bottom: 50px;
background-color:green;
width: 200px;
height: 200px;}
</style>
</head>
<body>
<div class="div1">
<div class="div_1">div_1</div>
<div class="div_2">div_2</div>
<div class="div_3">div_3</div>
<div class="div_4">div_4</div>
</div>
</body>
</html>

治标不治本，我要的是自适应高度，要都显示。

方法二：对子级使用 clear 清除浮动

插入一个空的div盒子，用来做清除浮动，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>div_自适应</title>
    <style type="text/css">
    .div1{
        border: 1px solid #ccc;
        width: 500px;
        padding: 20px;
        }
    .div_1,.div_2{
        float: left;
        margin-right: 50px;
        margin-bottom: 50px;
        background-color:green;
        width: 200px;
        height: 200px;}
        .clear{ clear:both} 
    </style>
</head>
<body>
    <div class="div1">
        <div class="div_1">div_1</div>
        <div class="div_2">div_2</div>
        <div class="div_2">div_3</div>
        <div class="clear"></div> 
    </div>
</body>
</html>

bcbobo21cn

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS父级子级学习总结

CSS 父级子级http://www.divcss5.com/rumen/r239.shtml1、认识了解简单讲CSS父级 CSS子级是相对而言，如一个DIV “A”被另外一个DIV “B”包裹着，这样我们就可以认为B是A父级。父级子级或有时把DIV嵌套关系比作父亲儿子关系，这个是为了便于理解将DIV嵌套关系形象比作父级子级关系叫法。2、举例说明：DIV CSS 父级子级说...
复制链接

扫一扫