【CSS】小妙招，各種問題總結方法處理

1.實現div文字溢出自動省略號截取

       ?    overflow:hidden;??/*超過部分不顯示*/
??　　　　　　text-overflow:ellipsis;??/*超過部分用點點表示*/
??　　　　　　white-space:nowrap;/*不換行*/

2.規定行數的截取效果

       text-overflow: ellipsis; /*有些示例里需要定義該屬性，實際可省略*/
display: -webkit-box; 　　　-webkit-line-clamp: 2;/*規定超過兩行的部分截斷*/ 　　　 -webkit-box-orient: vertical; 　　　 overflow : hidden; 　　 word-break: break-all;/*在任何地方換行*/

3.修改默認radio按鈕樣式

? 默認的radio樣式非常的難看，并且不容易布局所有我們有時候需要修改為自定義的樣式或者顏色。基本分為五步：

?第一步：就是我們的html結構:

      <input id="word" type="radio" name="a" /><label for="word">word</label>
<input id="excel" type="radio" name="a" /><label for="excel">excel</label>

第二步：生成一個偽元素，作為美化版的單選按鈕，先給偽元素添加一些樣式，這里可以自定義樣式效果

input[type="radio"]   label::before {
content: "\a0"; /*不換行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 15px; /*沒有選中時的按鈕大小*/
height: 15px; /*沒有選中時的按鈕大小*/
margin-right: 8px; /*按鈕與文字的間距*/
border-radius: 50%;
border: 1px solid #01cd78;
text-indent: 10px;
line-height: 1;
}

第三步：選中按鈕時候的樣式效果

input[type="radio"]:checked   label::before {
background-color: #01cd78;
background-clip: content-box;
padding: 2px;
width: 11px; /*選中后的按鈕大小*/
height: 11px; /*選中后的按鈕大小*/
}

第四步：隱藏原來的按鈕

input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}

第五步：參考文獻：https://www.cnblogs.com/xinjie-just/p/5911086.html

4.inline-block屬性間距

現象分析

此問題是設置樣式屬性displayinline-block。應用常例是li屬性設置水平放置后出現間隙。

照圖說話;

例如上圖很明顯可以看出第二行間隙比第一行小，第一行為間隙樣例，我本來設置兩個li之間間距為15應該為第二行效果，但是在html寫出代碼：

  <li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio4" type="radio" name="fileRadio"><label for="radio4"></label></li>
<li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio5" type="radio" name="fileRadio"><label for="radio5"></label></li>
<li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>

效果就是第一行的效果，第二行是使用js進行添加的li就是正確的margin-right:15px.?而第二行確多出一部分空隙。然后我再次修改html代碼為：

<li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio4" type="radio" name="fileRadio"><label for="radio4"></label></li><li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio5" type="radio" name="fileRadio"><label for="radio5"></label></li><li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>

效果為：

這樣就沒有間隙了，看出問題所在了，就是因為寫代碼元素標簽之間的空格所致。但是我們有不能所有的代碼都按照寫在一行，一是不易于讀不易于維護，二是很亂。

解決方案總結：

寫成一行（不可取也是一種方式，，哈哈哈）
第二中就是有規則分分行，例如我這個就可以這樣寫：

                                    <li><img /><div>黨的進什么文得很受打擊.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label></li><li><img /><div>
黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label></li><li><img /><div>
黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>

? ? ? ? 3.?借助注釋語句來去除空格

                                   <li><img /><div>黨的進什么文得很受打擊.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label></li><!--
--><li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label></li><!--
--><li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio6" type="radio" name="fileRadio"><label for="radio6"></label></li>

? ? ? ? 4.?不寫結束標簽，就是li的結束標簽不寫即可：

                                <li><img /><div>黨的進什么文得很受打擊.jpg</div><input id="radio1" type="radio" name="fileRadio"><label for="radio1"></label>
<li><img /><div>黨的進什么文件但還是覺得很受打擊.jpg</div><input id="radio2" type="radio" name="fileRadio"><label for="radio2"></label>

? ? ? ? 5.?樣式的問題還是采用樣式解決，哈哈使用文字間距屬性letter-spacing。只需要在間隙元素上設置為0px，然后看多出多少元素在簡單元素的父元素設置負數值就好了。例如我這個就是在li元素設置｛?letter-spacing:0px;｝然后在父元素設置ul｛letter-spacing:-8px｝

?5.calc計算屬性

左右布局中一部分定值一部分比例布局，這個時候是不是很糾結，一部分是需要固定的寬度，另一部分想根據瀏覽器大小自動適應。

完美的計算就是自適應部分使用百分百布局，可是又不能100%，因為已經被占用了一部分定值。這個時候就需要calc計算屬性了，你可以寫成：100% - 定值這樣規定寬度，相當于在這個寬度屬性這里寫了一個百分百布局只是減去的一些值。

.content_left {
background-color: cadetblue; width: 200px; height:100%; border: 1px solid #D0D6D9; } .content_right { background-color: cornflowerblue;
 /*注意使用時計算符號前后要空格*/ width: calc(100% - 215px); height: 100%; margin-left: 10px; border: 1px solid #D0D6D9; }

?6.左右float布局后父元素沒有自適應高度

這個是實際項目中發現的問題，在一個大的div中放置兩個子div元素進行左右布局：float: left;和float:right;之后父div沒有適應子元素高度，父元素高度為0；

解決辦法：父元素div增加：overflow:hidden;

7.根據頁面切換不同的IE文檔模式

很多時候我們都不注意低版本的文檔切換，因為新項目很少要I8以下了。很不幸的遇到了老項目整合或者老項目擴展新功能。

例如老項目只支持ie8以下，而你的新頁面是IE9起步，恭喜你拉哈哈。你不會讓用戶去按F12根據不同的頁面切換文檔模式的太傻了。那怎么辦，當然是我們自動切換了。

我們使用x-ua-compatible屬性：IE以后增加的新屬性，用來進行切換ie瀏覽器渲染方式。（當然首先保證你環境存在）

例如我上面說到的情況就可以這樣處理：

老版本在head標簽中增加：

<head>
<meta http-equiv="x-ua-compatible" content="IE=7,IE=8" />
</head>

新版本在head標簽中增加：

<head>
<meta http-equiv="x-ua-compatible" content="IE=9" />
</head>

還有一種就是永遠使用最新版本這樣就不怕瀏覽器升級了：

<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />

</head>

?8.邊框屬性的位置

我們在布局的時候往往會產生邊框導致布局錯亂的現象，這就是邊框產生的位置導致的。邊框產生的位置只有兩個地方，在內容內，在內容外，請看下面介紹。

?box-sizing：這是一個css3的屬性他用來控制邊框的位置產生在哪里。

?box-sizing:border-box：產生在內容內，簡單來說就是如果你設置一個div寬和高都是50px，然后設置邊框寬度為1px，如果設置屬性，那么你可用的內容寬像素是48px=50px-2px（左右兩個邊框），高同理。

?box-sizing:content-box：產生在內容外，這個好理解，也是我們最普遍見到的，就是在內容外繪制邊框。例如還是上面，設置了50px后，你可用內容寬像素還是50不會變化。這個就是有時候我們設置好兩個并排元素寬相加等于父元素但是第二個會被擠下去的原因。

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=h2k1jaa&title=【CSS】小妙招，各種問題總結方法處理