css篇(筆記)

11699847034_6b43d779b8_z

今天Designrock從w3cfuns中看到了一篇不錯的筆記想要分享給大家,裡面是幾乎大家常遇到的一些問題和來我自己都沒想到過的問題,分享給大家希望大家也是能多看看多學習!

Css篇:
1.有哪項方式可以對一個DOM設置它的CSS樣式? 

外部樣式表,引入一個外部css文件
內部樣式表,將css代碼放在<head> 標籤內部
內聯樣式,將css樣式直接定義在HTML 元素內部

 
2.CSS都有哪些選擇器?

派生選擇器(用HTML標籤申明)
id選擇器(用DOM的ID申明)
類選擇器(用一個樣式類名申明)
屬性選擇器(用DOM的屬性申明,屬於CSS2,IE6不支持,不常用,不知道就算了)
除了前3種基本選擇器,還有一些擴展選擇器,包括

後代選擇器(利用空格間隔,比如div .a{ })
群組選擇器(利用逗號間隔,比如p,div,#a{ })
那麼問題來了,CSS選擇器的優先級是怎麼樣定義的?

基本原則:
一般而言,選擇器越特殊,它的優先級越高。也就是選擇器指向的越準確,它的優先級就越高。

複雜的計算方法:
用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
#xxx li 優先級 100 +1
那麼問題來了,看下列代碼,<p>標籤內的文字是什麼顏色的?
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>

<body>

<p class=’classB classA’> 123 </p>

</body>
答案:red。與樣式定義在文件中的先後順序有關,即是後面的覆蓋前面的,與在<p class=’classB classA’>中的先後關係無關。

 

 

3.CSS中可以通過哪些屬性定義,使得一個DOM元素不顯示在瀏覽器可視範圍內?

最基本的:
設置display屬性為none,或者設置visibility屬性為hidden
技巧性:
設置寬高為0,設置透明度為0,設置z-index位置在-1000

 

 

4.超鏈接訪問過後hover樣式就不出現的問題是什麼?如何解決?

答案:被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: LVHA(link,visited,hover,active)

 

 

5.什麼是Css Hack? ie6,7,8的hack分別是什麼?

答案:針對不同的瀏覽器寫不同的CSS code的過程,就是CSS hack。
示例如下:
#test{
width:300px;
height:300px;

background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink​​; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;}
} /*chrome and safari*/

 

 

6.請用Css寫一個簡單的幻燈片效果頁面

答案:知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。
/**HTML**/
div.ani

/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: “loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes “loops" {
0% {
background:url(1.jpg) no-repeat;
}
25% {
background:url(2.jpg) no-repeat;
}
50% {
background:url(3.jpg) no-repeat;
}
75% {
background:url(4.jpg) no-repeat;
}
100% {
background:url(5.jpg) no-repeat;
}
}

 
7.行內元素和塊級元素的具體區別是什麼?行內元素的padding和margin可設置嗎?

塊級元素(block)特性:
總是獨占一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性:
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變(也就是padding和margin的left和right是可以設置的),就是裡面文字或圖片的大小。
瀏覽器還有默認的天生inline-block元素(擁有內在尺寸,可設置高寬,但不會自動換行),有哪些?
答案:<input> 、<img> 、<button> 、<texterea> 、<label>。

 

 

8.什麼是外邊距重疊?重疊的結果是什麼?

答案:

外邊距重疊就是margin-collapse。
在CSS當中,相鄰的兩個盒子(可能是兄弟關係也可能是祖先關係)的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為折疊,並且因而所結合成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算規則:
兩個相鄰的外邊距都是正數時,折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時,折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時,折疊結果是兩者的相加的和。

 
9.rgba()和opacity的透明效果有什麼不同?

答案:
rgba()和opacity都能實現透明效果,但最大的不同是opacity作用於元素,以及元素內的所有內容的透明度,而rgba()只作用於元素的顏色或其背景色。 (設置rgba透明的元素的子元素不會繼承透明效果!)

 

 

10.css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什麼?

答案:
垂直方向:line-height
水平方向:letter-spacing
那麼問題來了,關於letter-spacing的妙用知道有哪些麼?
答案:可以用於消除inline-block元素間的換行符空格間隙問題。

 

 

11.如何垂直居中一個浮動元素?

// 方法一:已知元素的高寬
#div1{
background-color:#6699FF;
width:200px;
height:200px;

position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}

//方法二:未知元素的高寬

#div1{
width: 200px;
height: 200px;
background-color: #6699FF;

margin:auto;
position: absolute; //父元素需要相對定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
那麼問題來了,如何垂直居中一個<img>?(用更簡便的方法。)
#container //<img>的容器設置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}

 
12.px和em的區別。

px和em都是​​長度單位,區別是,px的值是固定的,指定是多少就是多少,計算比較容易。 em得值不是固定的,並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

 
13.描述一個”reset”的CSS文件並如何使用它。知道normalize.css嗎?你了解他們的不同之處?

重置樣式非常多,凡是一個前端開發人員肯定有一個常用的重置CSS文件並知道如何使用它們。他們是盲目的在做還是知道為什麼這麼做呢?原因是不同的瀏覽器對一些元素有不同的默認樣式,如果你不處理,在不同的瀏覽器下會存在必要的風險,或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格,但僅提供了一套合理的默認樣式值。既能讓眾多瀏覽器達到一致和合理,但又不擾亂其他的東西(如粗體的標題)。
在這一方面,無法做每一個複位重置。它也確實有些超過一個重置,它處理了你永遠都不用考慮的怪癖,像HTML的audio元素不一致或line-height不一致。

 
14.Sass、LESS是什麼?大家為什麼要使用他們?

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性,如變量,繼承,運算, 函數. LESS 既可以在客戶端上運行(支持IE 6+, Webkit, Firefox),也可一在服務端運行(借助Node.js)。
為什麼要使用它們?
結構清晰,便於擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說,封裝對瀏覽器語法差異的重複處理,減少無意義的機械勞動。
可以輕鬆實現多重繼承。
完全兼容CSS 代碼,可以方便地應用到老項目中。 LESS 只是在CSS 語法上做了擴展,所以老的CSS 代碼也可以與LESS 代碼一同編譯。

 
15.display:none與visibility:hidden的區別是什麼?

display : 隱藏對應的元素但不擠占該元素原來的空間。
visibility: 隱藏對應的元素並且擠占該元素原來的空間。
即是,使用CSS display:none屬性後,HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性後,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所佔據的空間位置仍然存在。

 

文章來源:http://www.w3cfuns.com/blog-5452328-5401451.html

廣告

2 thoughts on “css篇(筆記)

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s