CSS小技巧

1、行元素在塊級(jí)元素中浮動(dòng)，塊級(jí)元素?zé)o法實(shí)現(xiàn)居中

比如說：li 元素在 ul 元素中浮動(dòng)，ul 元素是塊級(jí)元素，寬度為頁面的寬度，難以實(shí)現(xiàn) li 元素在 ul 中居中對(duì)齊。

可以將 ul 元素設(shè)為 inline-block，寬度為 auto，這樣ul元素的寬度就會(huì)是 li 元素寬度的總和，并且將 ul 元素的父元素設(shè)為 text-align: center，由此 ul 元素在父元素中居中，li 元素也自然居中。

我們可以總結(jié)出，如果將父元素的 display 設(shè)為 inline-block，寬度設(shè)為 auto，那么該父元素的寬度就是子元素寬度的和。

2、樣式修改順序

在修改樣式時(shí)，應(yīng)從父元素開始修改，即先修改大的容器元素，再修改里面的子元素，否則的話可能會(huì)因?yàn)楹竺娌判薷母冈囟鴮?dǎo)致與之前對(duì)于子元素的一些修改產(chǎn)生沖突，導(dǎo)致最后出現(xiàn)樣式重疊混亂的結(jié)果

3、文字顯示不全、邊框顯示不全的問題

遇到這種問題，一般都是因?yàn)檠b載文字的 div 太大了，而外面的父級(jí) div 太小了，所以導(dǎo)致文字顯示不出來，此時(shí)可以將裝載文字的 div 的寬度設(shè)為 auto 或者是設(shè)為比父級(jí) div 的寬度小即可。

邊框顯示不全的問題也可能是因?yàn)樵O(shè)置了邊框的的那個(gè) div 太大了，而父級(jí) div 太小了，導(dǎo)致邊框的某一邊顯示不出來，此時(shí)可以將設(shè)置了邊框的 div 的寬度設(shè)為 auto 或者是設(shè)為比父級(jí) div 的寬度小即可。

4、css如何選擇即符合ID又符合類的元素

li#idname.classname { color: red};

5、如何在谷歌瀏覽器中設(shè)置比 12 像素更小的字體

IE 瀏覽器支持比 12px 更小的字體，但是谷歌瀏覽器并不支持。在谷歌瀏覽器中如果設(shè)置了比 12px 更小的字體，它顯示的實(shí)際上是 12px 大小的字體。

通過下面的方式就可以實(shí)現(xiàn)在谷歌瀏覽器中設(shè)置比 12px 更小的字體的效果：

5.1、使用 -webkit-text-size-adjust 私有屬性

谷歌瀏覽器Chrome是Webkit的內(nèi)核，有一個(gè) -webkit-text-size-adjust 的私有 CSS 屬性，通過它即可實(shí)現(xiàn)字體大小不受瀏覽器影響。

div {
   -webkit-text-size-adjust: none;
   font-size: 9px;
}

但是需要注意，在新版的谷歌瀏覽器中已經(jīng)不支持該屬性，只有在谷歌瀏覽器 27 版本及之前的版本才支持。

5.2、使用 transform: scale() 來達(dá)到效果

新版谷歌瀏覽器已經(jīng)不支持 -webkit-text-size-adjust 私有屬性的使用，我們可以使用 -webkit-transform: scale(); 來縮小或者放大包含字體的元素來達(dá)到縮小放大字體的效果。

請(qǐng)注意，該方式實(shí)際上是放大縮小了包含字體的元素，而不是真正放大縮小了字體，但是也能達(dá)到放大縮小字體的效果。

div {
   font-size: 12px;
   -webkit-transform: scale(0.5);
}

/*transform 屬性只支持塊級(jí)元素，如果需要作用于行元素，需要設(shè)置行元素為 inline-block */
span {
   font-size: 12px;
   display: inlie-block;
   -webkit-transform: scale(0.5);
}

使用該方式有一個(gè)缺點(diǎn)，那就是元素所占據(jù)的空間并不會(huì)隨著放大或者縮小后而發(fā)生改變，也就是說該元素所占據(jù)的空間的大小仍然是在放大縮小之前的。你可能會(huì)發(fā)現(xiàn)該元素已經(jīng)縮小了，但是它所占據(jù)的空間并不沒有縮小。

我們可以通過使用負(fù)數(shù)的 margin 來彌補(bǔ)這一缺點(diǎn)。

6、如何設(shè)置只作用于谷歌瀏覽器的樣式

有時(shí)候我們可能想要設(shè)置一些樣式只作用于谷歌瀏覽器，而不作用于 IE 瀏覽器。比如說：我們?cè)O(shè)置了一些樣式，它在 IE 瀏覽器中起作用（比如設(shè)置字體大小小于 12px），但是在谷歌瀏覽器中不起作用，那么我們就需要將一些特定的樣式作用于谷歌瀏覽器中，而且我們并不想這些特定樣式作用于 IE 中。這時(shí)我們可以使用下面的方式：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
       /* 在下面寫你需要作用于 Webkit 內(nèi)核瀏覽器的樣式 */ 
      .aa {
         color: red;
      }
 
}

7、如何針對(duì)IE瀏覽器單獨(dú)寫css樣式

7.1、用css hacks

示例：

.box {  
    background: gray; /* 基本的 */
    background: pink\9; /* IE 8 及低于IE8版本 */
    *background: green; /* IE 7 及低于IE7版本 */
    _background: blue; /* IE 6 */
}

7.2、條件注釋

<!--[if IE 6]>
　　<style type="text/css">
 　　　　/* 針對(duì)IE6定義的樣式 */
　　</style>
<![endif]-->

<!--[if IE 6 ]>
    <link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
<![endif]-->

1. [if !IE]> 除IE外都可識(shí)別 <![endif]
2. [if IE]> 所有的IE可識(shí)別 <![endif]
3. [if IE 5.0]> 只有IE5.0可以識(shí)別 <![endif]
4. [if IE 5]> 僅IE5.0與IE5.5可以識(shí)別 <![endif]
5. [if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識(shí)別 <![endif]
6. [if IE 6]> 僅IE6可識(shí)別 <![endif]
7. [if lt IE 6]> IE6以及IE6以下版本可識(shí)別 <![endif]
8. [if gte IE 6]> IE6以及IE6以上版本可識(shí)別 <![endif]
9. [if IE 7]> 僅IE7可識(shí)別 <![endif]
10. [if lt IE 7]> IE7以及IE7以下版本可識(shí)別 <![endif]
11. [if gte IE 7]> IE7以及IE7以上版本可識(shí)別 <![endif]
 
在css里使用如下標(biāo)識(shí)符可以被ie識(shí)別而采用

其他瀏覽器會(huì)忽略if ie

7.3、條件注釋HTML標(biāo)簽

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<style type="text/css">
.box {
    color: #fff;
    padding: 5px 20px;
    background: gray; 
}
.ie8 .box {
    background: pink;
}
.ie7 .box {
    background: green;
}
.ie6 .box {
    background: blue;
}
</style>
</head>
<body>
<div class="box">
Content here
</div>
</body>
</html>

詳細(xì)參考：https://blog.csdn.net/sheng6110/article/details/51085305/、http://www.rzrgm.cn/hello-sandy/p/5251538.html

8、div高度不確定，如何使div內(nèi)文字高度居中

可以使用flex布局。

display: flex;
align-items:center;

不過低版本 IE 可能不兼容 flex 布局，此時(shí)可以使用 absolute + transfrom

div{ 
  position: relative; 
  top:50%; 
  transform:translateY(-50%);  
}

參考：https://blog.csdn.net/jrl12345/article/details/105271138

posted @ 2020-01-22 10:00 wenxuehai 閱讀(388) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

提升自己，才有選擇的能力和勇氣