css樣式設定

2021-08-20 02:12:52 字數 2305 閱讀 8204

1.如何消去a標籤的下劃線：設定樣式text-decoration：none；

首頁


a
2.如何設定滑鼠滑過a標籤時，字型的顏色和下劃線重現：a：hover

首頁


a:hover
3.如何使ul-li中li標籤水平放置：（1）使li標籤變成內聯塊狀元素（2）使用float：left；
li
li
(個人更偏向於第一種用法)

4.如何選中ul下li的奇數行和偶數行：

#ulist li:nth-of-type(odd)/*奇數行*/  


#ulist li:nth-of-type(even)/*偶數行*/
5.如何消去li標籤前面的點：list-style: none;

li
6.如何消去水平li標籤的間距：

若將li標籤設定為水平排列，當你為背景設定顏色時，會發生如下問題：

空隙會占用距離，導致原本設定好的寬度加上被占用的空間發生溢位，右邊的塊被擠到下一行，使布局變得混亂。

解決辦法：

首先設定ul標籤內的font-size為0，然後設定li標籤內的font-size來覆蓋，如下：

ul


li
效果如下：

若只設定了ul而不設定li，則會顯示以下畫面：

7.如何實現三列浮動自適應布局：

html**：

我是左邊


我是右邊


我是中間
css**：

.left


.right


.center
效果：

注意：（1）需要浮動的列放在前面，中間自適應的列放在最後

（2）css**中，overflow：hidden觸發bfc

（3）class為center的div必須寫在最後，否則出現的效果是第乙個div和center預設兩欄自適應布局，第三列被擠到下一行。

**如下：

.center
當瀏覽器視窗寬度縮小到300px時，center的寬度不再改變，下方出現左右滾動條。

8.新增文字後盒子對不齊，因為此時css規範規定，被inline-block的行內盒子，其bseline就是其父元素的最後乙個行內盒子的baseline，大小不一會導致上下不齊，所以設定vertical-align屬性為top或者buttom來使盒子與父元素的baseline對齊。

未新增vertical-align: top時

html**：

inline-block
css**：

.rtop>div
效果：

新增後：

vertical-align:top;background-color: red;">inline-block
效果：

CSS樣式設定

css樣式設定 css優先順序 important優先順序最高 行內樣式 內部樣式 外部樣式 link鏈入外部樣式和style內部樣式優先順序，取決與先後順序 樣式表中優先順序 id選擇器 class選擇器 標籤選擇器 萬用字元 權值相同就近原則，權值不同用高的 字型 font family 字型名...

css樣式設定

box sizing初識 box sizing是css3的新屬性，box sizing是乙個 盒子模型，box sizing有兩個重要值 content box和border box box sizing使用總結 box sizing的預設值為content box，子元素不會主動繼承父元素的box...

CSS樣式設定技巧

一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定text align...