css樣式學習小知識 - fangsmile－IT工程師數位筆記本

文章出處

1. 使用百分比設置寬高

自適用寬高的，有分割的區域，可以適用百分比：30% 70%

如果有一部分是固定的寬度或者高度，可以使用：height: calc( 100% - 36px );

2. input進度條

<input type="range" value=0 style=""> 進度條，可以隨意拖拽，定位。

這兩個樣式設置拖拽后顏色，background-size: 0% 100%;

background-color: #ccc;

3. 多行文字設置溢出

-webkit-line-clamp下多行文字溢出點點點...

.box {
    width: 400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

4. <img> 標簽的 longdesc

HTML <img> 標簽的 longdesc 屬性：

使用 longdesc 屬性，指向一個包含圖像描述信息的頁面

5. css實現高度height隨寬度width變化保持比例不變

如何通過CSS實現高度 height 隨寬度 width 變化而變化，保持長寬比例不變，寬度是根據父元素寬度變化的？

在保持元素寬高比恒定的情況下，要使得元素可以和父元素同比縮放。此時會用到 padding。

需要知道的是：一個元素的 padding，如果值是一個百分比，那這個百分比是相對于其父元素的寬度而言的，padding-bottom 也是如此。

使用 padding-bottom 來代替 height 來實現高度與寬度成比例的效果，將 padding-bottom 設置為想要實現的 height 的值。同時將其 height 設置為 0 以使元素的“高度”等于 padding-bottom 的值，從而實現需要的效果。

此時CSS代碼如下：

div {
float: left;
margin: 10px 5%;
padding-bottom: 20%;
width: 20%;
height: 0;
}

這里寬高比是1比1，實現的是正方形，并且實現同比縮放。

http://www.jianshu.com/p/83a84445d967

6. 子元素使用了float之后，父元素為何高度沒了

我知道的一共有三種辦法

1.直接給父元素一個值（蠢辦法）
3.在父元素上加 overflow:hidden
3.在父級元素內加入 clearfix class

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

具體是因為：子元素浮動后，脫離了文檔流

7. font-face字定義Web字體

font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中

http://www.runoob.com/cssref/css3-pr-font-face-rule.html

如果用戶已經安裝這個字體，設置使用本機字體的話，使用local

1 @font-face {
2 font-family: 'Green Sans Web';
3 src:
4     local('Green Web'),
5     local('GreenWeb-Regular'),
6     url('GraublauWeb.ttf');
7 }

8.背景圖片固定顯示

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。

值	描述
scroll	默認值。背景圖像會隨著頁面其余部分的滾動而移動。
fixed	當頁面的其余部分滾動時，背景圖像不會移動。
inherit	規定應該從父元素繼承 background-attachment 屬性的設置。