CSS父级子级学习总结
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 class="yangshi">?
<div class="yangshi_a">內容a</div>?
<div class="yangshi_b">內容b</div>?
</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盒模型
========
html/css更改子級繼承的父級屬性
? ? 一個精美的網頁需要的樣式很多，在父級上設置的字體顏色或者大小，在其子元素中不一定全部相
同，這時候要更改其中某一項的樣式怎么辦呢。
? ? 很多新手朋友就不明白，會迷惑為什么我使用class單獨命名了，重新設置了還是沒有變化，會考慮
是不是格式錯了，是不是命名有問題，但是有沒有考慮過權重值呢，新手朋友對于權重值的使用不是很
重視，但其實用處是很大的。
? ? ID選擇器值100，類、偽類、屬性選擇器值10，元素選擇器值1，也許使用ID命名，直接更改樣式就
會有變化，但是畢竟ID命名的方式使用的沒有class命名使用的多，這時候只要重視了權重值，就知道其
好處之多。
========
父級div沒高度不能自適應高度的原因——子級使用css float浮動
https://www.cnblogs.com/charmingyj/p/7132301.html
我們常常在做盒子嵌套的時候，最外層盒子不想給他設置高度，因為我們填充的內容不確定有多大
，一般就選擇auto自適應。
然，子級盒子又是一個嵌套或者樣式復雜點，超出父級盒子的邊界外邊，在央視里面調來調去調不
好，試過修改display屬性、又再嵌套盒子，都不是很理想，最后找了一圈（強大的百度）發現問題所在
了，這個是由于浮動產生原因。
初始代碼如下：
效果圖如上，按照代碼中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>?
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的CSS父级子级学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.net PageBase学习总结
- 下一篇： CSS要点总结