摘要：應(yīng)用常例是屬性設(shè)置水平放置后出現(xiàn)間隙。邊框產(chǎn)生的位置只有兩個(gè)地方，在內(nèi)容內(nèi)，在內(nèi)容外，請(qǐng)看下面介紹。產(chǎn)生在內(nèi)容外，這個(gè)好理解，也是我們最普遍見到的，就是在內(nèi)容外繪制邊框。

1.實(shí)現(xiàn)div文字溢出自動(dòng)省略號(hào)截取

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

2.規(guī)定行數(shù)的截取效果

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

3.修改默認(rèn)radio按鈕樣式

? 默認(rèn)的radio樣式非常的難看，并且不容易布局所有我們有時(shí)候需要修改為自定義的樣式或者顏色?；痉譃槲宀剑?/p>

?第一步：就是我們的html結(jié)構(gòu):

      word
      excel

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

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

第三步：選中按鈕時(shí)候的樣式效果

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);
}

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

4.inline-block屬性間距

現(xiàn)象分析

此問題是設(shè)置樣式屬性displayinline-block。應(yīng)用常例是li屬性設(shè)置水平放置后出現(xiàn)間隙。

照?qǐng)D說話;

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

  
黨的進(jìn)什么文件但還是覺得很受打擊.jpg

  
黨的進(jìn)什么文件但還是覺得很受打擊.jpg

  
黨的進(jìn)什么文件但還是覺得很受打擊.jpg

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

黨的進(jìn)什么文件但還是覺得很受打擊.jpg
黨的進(jìn)什么文件但還是覺得很受打擊.jpg
黨的進(jìn)什么文件但還是覺得很受打擊.jpg

效果為：

這樣就沒有間隙了，看出問題所在了，就是因?yàn)閷懘a元素標(biāo)簽之間的空格所致。但是我們有不能所有的代碼都按照寫在一行，一是不易于讀不易于維護(hù)，二是很亂。

解決方案總結(jié)：

1. 寫成一行（不可取也是一種方式，，哈哈哈）
2. 第二中就是有規(guī)則分分行，例如我這個(gè)就可以這樣寫：

                                    
黨的進(jìn)什么文得很受打擊.jpg

                                    黨的進(jìn)什么文件但還是覺得很受打擊.jpg

                                    黨的進(jìn)什么文件但還是覺得很受打擊.jpg

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

                                   
黨的進(jìn)什么文得很受打擊.jpg
黨的進(jìn)什么文件但還是覺得很受打擊.jpg
黨的進(jìn)什么文件但還是覺得很受打擊.jpg

? ? ? ? 4.?不寫結(jié)束標(biāo)簽，就是li的結(jié)束標(biāo)簽不寫即可：

                                
黨的進(jìn)什么文得很受打擊.jpg

                                
黨的進(jìn)什么文件但還是覺得很受打擊.jpg

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

?5.calc計(jì)算屬性

左右布局中一部分定值一部分比例布局，這個(gè)時(shí)候是不是很糾結(jié)，一部分是需要固定的寬度，另一部分想根據(jù)瀏覽器大小自動(dòng)適應(yīng)。

完美的計(jì)算就是自適應(yīng)部分使用百分百布局，可是又不能100%，因?yàn)橐呀?jīng)被占用了一部分定值。這個(gè)時(shí)候就需要calc計(jì)算屬性了，你可以寫成：100% - 定值 這樣規(guī)定寬度，相當(dāng)于在這個(gè)寬度屬性這里寫了一個(gè)百分百布局只是減去的一些值。

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

?6.左右float布局后父元素沒有自適應(yīng)高度

這個(gè)是實(shí)際項(xiàng)目中發(fā)現(xiàn)的問題，在一個(gè)大的div中放置兩個(gè)子div元素進(jìn)行左右布局：float: left;和float:right;之后父div沒有適應(yīng)子元素高度，父元素高度為0；

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

或者使用雙偽元素法：

/*清除浮動(dòng)*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1; /*IE678*/
}

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

很多時(shí)候我們都不注意低版本的文檔切換，因?yàn)樾马?xiàng)目很少要I8以下了。很不幸的遇到了老項(xiàng)目整合或者老項(xiàng)目擴(kuò)展新功能。

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

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

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

老版本在head標(biāo)簽中增加：

新版本在head標(biāo)簽中增加：

還有一種就是永遠(yuǎn)使用最新版本這樣就不怕瀏覽器升級(jí)了：

?8.邊框?qū)傩缘奈恢?/h2>

我們?cè)诓季值臅r(shí)候往往會(huì)產(chǎn)生邊框?qū)е虏季皱e(cuò)亂的現(xiàn)象，這就是邊框產(chǎn)生的位置導(dǎo)致的。邊框產(chǎn)生的位置只有兩個(gè)地方，在內(nèi)容內(nèi)，在內(nèi)容外，請(qǐng)看下面介紹。

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

?box-sizing:border-box：產(chǎn)生在內(nèi)容內(nèi)，簡單來說就是如果你設(shè)置一個(gè)div寬和高都是50px，然后設(shè)置邊框?qū)挾葹?px，如果設(shè)置屬性，那么你可用的內(nèi)容寬像素是48px=50px-2px（左右兩個(gè)邊框），高同理。

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