Html5與Css3元素可見性、浮動、定位、對齊（九）

原創

2020-02-20 17:47

控制元素的顯示類型

塊級元素
dispaly：block；
行內元素（顯示設置設置寬度、高度不起作用）
display:inline；
1.不接受padding設置，但padding-top和padding-bottom會越界進入相鄰元素的區域，而不是侷限於該元素本身的空間
2.可以通過設置行高改變行內元素框的高度
3.可以通過設置水平邊框、內邊距、外邊距改變行內元素框的寬度

混合顯示:該元素與其他元素出現在同一行，同時也具有塊級元素的功能(可設置高度)
display:inline-block；

隱藏元素：不顯示且不佔任何視覺空間
display:none；
對於table有
display：inline-table;
非list元素變成list的形式
display：list-item;

控制元素可見性

隱藏元素：隱藏後，原來的位置會出現空白區域
visibility:hidden;

盒子容納不下的內容顯示

overflow
hidden
scroll
auto
visible
overflow-x
overflow-y

元素周圍外邊距

1.相互接觸的兩個margin，僅使用較大的（上下）外邊距，另一個外邊距疊加。左右外邊距不疊加。
2.使主題內容在瀏覽器里居中。爲內容容器添加width，左右外邊距爲auto

.page{
    width:960px;
    margin:0 auto;
}

3.em值用於內邊距和外邊距，它的值是相對於元素字體大小，而不是相對於父元素字體大小

p{
    font-size:14px;
    padding:.5em;   <!--7/14=0.5-->
}

4.對內邊距和外邊距使用百分數，通常不會將它們用於上下邊距的值，因爲這個值是基於其包含塊的寬度的

使元素浮動

1.使文字環繞在圖片周圍，將圖片設置爲左浮動

.post-photo{
    float:left;
}

2.將main與sidebar分欄，左邊爲左浮動，右邊爲右浮動
爲什麼中間會有頁腳？
因爲浮動元素不佔據空間

<!--左浮動和右浮動，高度爲0，頁面頁腳直接顯示在容器下面-->
main{
    float:left;
}
.sidebar{
    float:right;
}

3.（1）黃色部分取決與文字的高度

（2）章節section頁腳，需要清除浮動，在圖的下方顯示

<!--與post-photo一個父元素-->
.post-footer{
    clear:left;
}

3.解決頁面頁腳
（1）同時清除左、右浮動 clear：both；
（2）當無法影響容器高度、浮動或不浮動的元素
（3）解決高度爲0，不能顯示背景顏色的問題

父元素自清除：在樣式表中引入.clearfix的規則，併爲浮動元素的父元素添加clearfix類

如何運用？（待補充）
<!--與main和sidebar不是同一個父元素-->
.clearfix:before,
.clearfix:after{
    content:" ";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

<div class="container" clearfix>
    <main role="main">
    ...
    </main>
    <div class="sidebar">
    ...
    </div>
</div>

父元素自清除：或者用overflow代替上兩步（慎用）

<!--會將內容截斷-->
.container{
    overflow:hidden; //會將內容截斷
}
<!--會出現滾動條-->
.container{
    overflow:hidden; 
}

元素定位

絕對定位

.example{
    position:relative;
    top:20px;
    left:20px;
}

相對定位

.masthead{
    position:relative;
}
//相對於relative的位置
.masthead .social-sites{
    position:absolute;
    top:10px;
    right:0;
}

固定定位
但對於移動設備慎用

position：fixed; //固定

棧中定位元素

div{
    position:absolute;
    width:200px;
    border:1px solid #000;
}
.box1{
    z-index:120;
}
.box2{
    z-index:200;   <!--n越大，重疊位置最高-->
}
.box3{
    position:static;   <!--覆蓋規則,沒有任何效果-->
    z-index:200;
}

處理溢出

溢出問題：
1.圖像比容器寬
2.使用負的外邊距或絕對定位處於盒子外面
3.對元素設置了顯式高度，內容太高無法裝入盒子
overflow屬性
1.visible(默認):所有內容都可見
2.hidden：隱藏盒子容納不了的內容
3.scroll：無論是否需要，都加滾動條
4.auto：滾動條僅在溢出內容時出現