CSS高級用法有哪些

這篇文章主要介紹CSS高級用法有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創新互聯專注于科爾沁網站建設服務及定制，我們擁有豐富的企業做網站經驗。熱誠為您提供科爾沁營銷型網站建設，科爾沁網站制作、科爾沁網頁設計、科爾沁網站官網定制、重慶小程序開發服務，打造科爾沁網絡公司原創品牌,更為您提供科爾沁網站排名全網營銷落地服務。

對齊塊元素

塊元素指的是占據全部可用寬度的元素，并且在其前后都會換行。
塊元素的例子：
、
、

使用margin屬性來水平對齊

可通過將左和右邊距設置為"auto"，來對齊塊元素。

把左和右外邊距設置為auto，指的是均等地分配可用的外邊距。結果就是居中的元素：

。center{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}

案例：





    
    
    
    
    CSS 水平對齊



    
        這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。
        這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。

提示：如果寬度是 100%，則對齊沒有效果

注釋：除非已經聲明了 !DOCTYPE，否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。

CSS高級用法有哪些

使用position屬性進行左和右對齊

對齊元素的方法之一是使用絕對定位

.right{
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
}

案例：





    
    
    
    
    使用 position 屬性進行左和右對齊



    
        這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。
        這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。
        .right
            {
            position:absolute;
            right:0px;
            width:300px;
            background-color:#b0e0e6;
            }

CSS高級用法有哪些

跨瀏覽器兼容性問題

當像這樣對齊元素時，對元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同瀏覽器中出現可見的差異。

body{
    margin:0;
    padding:0;
}
.container{
    position:relative;
    width:100%;
}
.right{
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
}

使用float屬性來進行左和右對齊

對齊元素的另一種方式是使用float屬性：

.right{
    float:right;
    width:300px;
    background-color:#b0e0e6;
}

CSS尺寸(Dimension)

CSS尺寸(Dimension)屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。

屬性	描述
height	設置元素高度
line-height	設置行高
max-height	設置元素的最大行高
max-width	設置元素的最大寬度
min-height	設置元素的最小高度
min-width	設置元素的最小寬度
width	設置元素的寬度

可能的值：

值	描述
auto	默認，瀏覽器會自動計算出實際的高度。
length	使用px、cm等單位定義高度。
%	基于包含它的塊級對象的百分比高度。
inherit	從父元素繼承height屬性值。

CSS分類屬性

CSS分類屬性允許你控制如何顯示元素，設置圖像顯示于另一元素中的何處：

相對于其正常位置來定位元素；
使用絕對值來定位元素；

以及元素的可見度。

屬性	描述
clear	設置一個元素的側面是否允許其他的浮動元素。
cursor	規定當指向某元素之上時顯示的指針類型。
display	設置是否及如何顯示元素。
float	定義元素在哪個方向浮動。
position	把元素放置到一個靜態的、相對的、絕對的或固定的位置中。
visibility	設置元素是否可見

CSS display屬性

值描述

none 此元素不會顯示。

block 此元素將顯示為塊級元素，前后有換行符。

inline 默認。此元素會被顯示為內聯元素，前后無換行符。

inline-block 行內塊元素。

list-item 此元素會作為列表顯示。

run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。

compact 該值由于很少用，在CSS2.1中已被刪除。

marker 該值由于很少用，在CSS2.1中已被刪除。

table

此元素會作為塊級表格來顯示(類似)，表格前后有換行符。

inline-table

此元素會作為內聯表格來顯示(類似)，表格前后無換行符。)。)。)。)。)。)。

)。
table-row-group	此元素會作為一個或多個行的分組來顯示(類似
table-header-group	此元素會作為一個或多個行的分組來顯示(類似
table-footer-group	此元素會作為一個或多個行的分組來顯示(類似
table-row	此元素會作為一個表格行顯示(類似
table-column-group	此元素會作為一個或多個列的分組來顯示(類似
table-column	此元素會作為一個單元格列顯示(類似
table-cell	此元素會作為一個表格單元格顯示(類似	和	)。
table-caption	此元素會作為一個表格標題顯示(類似
inherit	規定從父元素繼承display屬性的值。

注：

inline：默認。此元素會被顯示為內聯元素，前后無換行符。
block：此元素將顯示為塊級元素，前后有換行符。

比如在一個項目列表中，每項都是超鏈接，正常是鼠標移動到文字上才激活超鏈接，如果你把li設置為塊級元素，那么鼠標移動到這個塊上也就是這個li的范圍就會激活超鏈接！

none：此元素不會被顯示。

案例：





    
    
    
    CSS display 屬性
    
        p {
            display: inline
        }

        div {
            display: none
        }

        span {
            display: block
        }
    



    本例中的樣式表把段落元素設置為內聯元素。

    而 div 元素不會顯示出來！

    div 元素的內容不會顯示出來！

    本例中的樣式表把 span 元素設置為塊級元素。
    兩個 span 元素之間產生了一個換行行為。

CSS高級用法有哪些

導航欄

擁有易用的導航條對任何網站都很重要。
通過CSS，可以把乏味的HTML菜單轉換成漂亮的導航欄。
導航欄 = 連接列表。
導航欄需要標準的HTML作為基礎。

導航欄基本上是一個鏈接列表，因此使用

元素是非常合適的。

案例1：





    
    
    
    導航欄基本上是一個鏈接列表
    




    
        Home
        News
        Contact
        About
    

    
        Home
        News
        Contact
        About

注釋：我們使用在測試鏈接中使用了 href="#"。在真實的網站中，應該是真實的 URL。

CSS高級用法有哪些

案例2：





    
    
    
    完整樣式的導航欄實例
    



    
        Home
        News
        Contact
        About

CSS高級用法有哪些

案例3：





    
    
    
    完整樣式的導航欄實例
    



    
        Home
        News
        Contact
        About

CSS高級用法有哪些

從列表中去掉圓點和外邊距

ul{
    list-style-type:none;  /* 取消圓點 */
    margin:0;  /* 取消外邊距 */
    padding:0;  /* 取消內邊距 */
}

垂直導航欄：如果要構建垂直導航欄，只需要定義元素的樣式

display:block 把鏈接顯示為塊元素，可使整個鏈接區域可點擊(不僅僅是文本)。
```
a{
    display:block;
    width:60px;
}
```

完整樣式的導航欄：見上面的案例2
水平導航欄：

有2種創建水平導航欄的方法：使用行內顯示和浮動列表項。

li{
    display:inline;  /* 行內顯示 */
}

li{
    float:left;  /* 向左浮動顯示列表項 */
}
a{
    display:block;  /* 塊方式顯示導航欄 */
    width:60px;  /* 寬度固定為60px */
}

兩種方法都可以，但若需要鏈接擁有相同尺寸就只能使用浮動方法。

圖片庫：





    
    
    
    CSS 圖片庫
    



    
        
            
        
        春意盎然
    

    
        
            
        
        繁花似錦
    

    
        
            
        
        在此處添加對圖像的描述
    

    
        
            
        
        在此處添加對圖像的描述