CSS 小妙招,各種問題總結方法處理

2021-09-20 00:17:59 字數 2735 閱讀 3385

overflow:hidden;  /*超過部分不顯示*/

text-overflow:ellipsis;  /*超過部分用點點表示*/

white-space:nowrap;/*不換行*/

text-overflow: ellipsis; /*有些示例裡需要定義該屬性,實際可省略*/

display: -webkit-box;

-webkit-line-clamp: 2;/*規定超過兩行的部分截斷*/

-webkit-box-orient: vertical;

overflow : hidden;

word-break: break-all;/*在任何地方換行*/

預設的radio樣式非常的難看,並且不容易布局所有我們有時候需要修改為自定義的樣式或者顏色。基本分為五步:

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

word

excel

第二步:生成乙個偽元素,作為美化版的單選按鈕,先給偽元素新增一些樣式,這裡可以自定義樣式效果

input[type="radio"] + label::before
第三步:選中按鈕時候的樣式效果

input[type="radio"]:checked + label::before
第四步:隱藏原來的按鈕

input[type="radio"]
此問題是設定樣式屬性displayinline-block。應用常例是li屬性設定水平放置後出現間隙。

照圖說話;

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

效果就是第一行的效果,第二行是使用js進行新增的li就是正確的margin-right:15px. 而第二行確多出一部分空隙。然後我再次修改html**為:

效果為:

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

寫成一行(不可取也是一種方式,,哈哈哈)

第二中就是有規則分分行,例如我這個就可以這樣寫:

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

4. 不寫結束標籤,就是li的結束標籤不寫即可:

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

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

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

.content_left 

.content_right

這個是實際專案中發現的問題,在乙個大的div中放置兩個子div元素進行左右布局:float: left;和float:right;之後父div沒有適應子元素高度,父元素高度為0;

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

很多時候我們都不注意低版本的文件切換,因為新專案很少要i8以下了。很不幸的遇到了老專案整合或者老專案擴充套件新功能。

例如老專案只支援ie8以下,而你的新頁面是ie9起步,恭喜你拉哈哈。你不會讓使用者去按f12根據不同的頁面切換文件模式的太傻了。那怎麼辦,當然是我們自動切換了。

我們使用x-ua-compatible屬性:ie以後增加的新屬性,用來進行切換ie瀏覽器渲染方式。(當然首先保證你環境存在)

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

老版本在head標籤中增加:

新版本在head標籤中增加:

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

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

box-sizing:這是乙個css3的屬性他用來控制邊框的位置產生在**。

box-sizing:border-box:產生在內容內,簡單來說就是如果你設定乙個div寬和高都是50px,然後設定邊框寬度為1px,如果設定屬性,那麼你可用的內容寬畫素是48px=50px-2px(左右兩個邊框),高同理。

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

出處:

常用的css小妙招,建議新手收藏

input修改游標顏色 input type number input div背景透明色 div 背景顏色 div div文字隱藏,只會隱藏內容,不會影響元素 div 文字隱藏 div div讓元素內容閃爍 divclass div 閃爍 div div keyframes div50 100 邊框...

CSS各種問題積累

1.background與background color 這兩者都可以這麼用 background red background color red 其實background color只是background的乙個子項而已。完整的background包括 background color bac...

Excel 使用小妙招之解決「 」顯示問題

microsoft excel ltsc 2021破解版 for mac excel2021破解版 使用用excel 的朋友都知道,當你輸入的字元已經超過單元格寬度時,會自動顯示 符號,這種情況一般出現在輸入身份證資訊之類的字元內容時,我們可以採取拉伸增加單元格的寬度,讓字元顯示完整,如果不增加單元...