做tab選項卡頁的時候,當前活動的選項卡有邊框,同時下邊和面板之間無邊框
記得以前實現過,但再用的時候卻又不會了.現在實現如下.
// tab頁標題區域的html : 乙個div下的若干span,每個span對應乙個選項卡.
home
profile
// 選項卡下面的線,是tabs框的下邊框
.tabs{
border-bottom:1px solid #ddd;
// 活動選項卡的邊框中下邊框是透明的,其它三邊照常
.tab-label.active{
display: inline-block;/*如果是行內元素,且不新增這個,那麼父元素就不會包含子元素的padding部分.結果導致不能完全包含子元素*/
padding: 8px 14px;
border:1px solid #ddd;
/*加上下面這幾個關鍵樣式,就能讓紅圈處無邊框*/
margin-bottom:-1px;
background-color:#fff;
border-bottom-color: transparent;
// 子元素的margin-bottom:-1px:
導致父元素高度由底部縮減1畫素,那麼底邊框位置向上抬公升1px,正好與子元素的底邊框重合,或者說進入了子元素的範圍內,並且是被子元素壓住了.
// background-color:#fff;
子元素設白色背景,於是父元素底邊框在經過此子元素的範圍內時被遮蓋了.
// border-bottom-color: transparent;
此時子元素底邊框再設定透明色,也看不見了.
最終實現紅圈處的效果
css子元素繼承父元素屬性
樣例 ant design form表單中label樣式的修改 css屬性繼承 文字 color 顏色，a元素除外 direction 方向 font 字型 font family 字型系列 font size 字型大小 font style 用於設定斜體 font variant 用於設定小型大寫...
js獲取dom元素的子元素,父元素,兄弟元素小記
原生js var a document.getelementbyid dom del space a 清理空格 var b a.childnodes 獲取a的全部子節點 var c a.parentnode 獲取a的父節點 var d a.nextsibling 獲取a的下乙個兄弟節點 var e ...
iframe 操作父元素或者操作子元素
文章出處 在web開發中，經常會用到iframe，難免會碰到需要在父視窗中使用iframe中的元素 或者在iframe框架中使用父視窗的元素 在父視窗中獲取iframe中的元素 格式 iframe的id contents find iframe中的控制項id click 例項 ifm content...