css選擇器優先級關系,css被固定了的如何設置優先級?
優先級:內聯式 > 嵌入式 > 外部式
對于同一個元素我們同時用了三種方法設置css樣式,那么哪種方法真正有效呢?在下面代碼中就出現了這種情況
1、使用內聯式CSS設置“超酷的互聯網”文字為粉色。
2、然后使用嵌入式CSS來設置文字為紅色。
3、最后又使用外部式設置文字為藍色(style.css文件中設置)。
css設置backgroundcolor無法覆蓋父類?
可以在樣式后面加上!important,如:
backgroundcolor:red!important;
!important 將覆蓋行內csscss優先級:行內css>id選擇器(#)>偽類
怎么把輪播圖的圖片改成用ajax請求的?
1. 清除浮動
我對清除浮動的理解是這樣的,
要想清除浮動,首先要知道什么是浮動,我們在做app,pc端頁面的時候,它里面有這個塊元素和內聯元素,尤其塊元素在布局的時候,文檔流的形式往下刷,這種形勢下呢,每一個塊元素都是獨占一行的,要想改變這種現狀,比如說,abc 我們給ab浮動,ab并列排列,ab浮動之后呢,對c會產生影響,這時候我們就要給c加上clearboth清除浮動,這樣做就是要使ab浮動產生的影響,不要影響到c,這是清除浮動的作用,那么清除浮動往往與什么有關系呢,比如說與我們的一些特效,比如圖片輪播比如tab切換,這些特效的時候,往往需要我們用浮動去控制他,所以這是我們在使用浮動當中,清除浮動的工作內容,另外,清除浮動有很多種方式,比較常見的有clearboth overflowhidden,after偽類,最后,清除浮動有優勢也有缺點,那么我認為他的缺點是,有時候在某些瀏覽器使用的時候會不起作用,會失效,當然說這個缺點不是不可以解決的,可以通過整理上下文,或者使用其他的清除浮動方式來解決。
這就是我對清除浮動的理解。
2. DIV CSS display (block none inline)屬性的用法!
我對DIV CSS中display的看法是這樣的:
display常見的值有四個block、none、inline、inline-block,常見的用法有兩種,一種是元素的隱藏與顯示之間的切換,這是none和block之間的切換,另一種是塊元素和行元素之間的轉換;
第一種用法主要用在一些效果當中,比如說table的切換,又比如說隔行變色,它都是用到這種用法,所以說它與效果有一些關系,另外的話是display:block和display:inline的切換,因為我們知道像span、a等行標簽,在默認情況下改變寬高是沒有效果的,這種時候我們就要把span等行元素轉換成block元素,然后再設置寬高就會行之有效,另外有時候我們需要把像div、form表單等塊元素轉換成inline元素,也是有效的,總之一句話,我們為了實現元素之間的切換常用這個用法。display還有一種比較常用的用法是它經常加position、z-index、overflow:hidden去實現各種各樣的效果,比如說頁面的手風琴效果、圖片無縫輪播的效果等,都是這些屬性聯合起來實現的。
以上就是我對display的看法。
3. 關于網頁編碼的理解!
我對網頁編碼的理解是這樣的:
在國內,我們常用的編碼有3種,分別是utf-8,GB2312,GBK。utf-8是國際標準字符集,它里面包含了一些國際上常用的一些語言,以及一些特殊符號、字符集等;但我們國家也有這種類似的語言協會,它概括的是GBK,叫做中文字符集,它涵蓋了中文,把那些多余的比如希臘文、法文就去掉了,只保留一些常用的,如中文、英文字母,還有一些日文、韓文這些常用的語言,以及一些特殊符號;GB2312我們叫做簡體中文字符集,是在GBK的范圍上又提煉了一些。
以上就是我對網頁編碼的理解。
4. 了解外邊距疊加的相關問題
我對外邊距疊加的理解是這樣的:
首先,外邊距合并指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
觸發條件:a)當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合并。b)當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發生合并。
注釋:只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
以上就是我對外邊距疊加的理解。
5. img的title和alt的異同!
我對img的title和alt的理解是這樣的:
(1)、含義不同
alt:使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明,也就是圖片顯示不了的時候顯示的文字。
title:圖片正常顯示時,鼠標懸停在圖片上方顯示的提示文字。
(2)、在瀏覽器中的表現不同
在firefox和ie8中,當鼠標經過圖片時title值會顯示,而alt的值不會顯示;只有在ie6中,當鼠標經過圖片時title和alt的值都會顯示。
以上就是我對img的title和alt的理解。
6. 請例舉css中position的參數和作用?
我對css中position的理解是這樣的:
position是用來定位的,常見的值有四個,它們分別是:static、absolute、fixed、relative。
static是相對于默認位置去定位的,fixed是相對于瀏覽器窗口定位的,而我們最常用的有兩個,一個是absolute,一個是relative,relative是相對定位,是相對于自身的原來的位置定位的,不會對文檔流產生影響,也就是說A和B兩個元素堆疊放置的時候,如果給A元素relative屬性,加top和left值以后對B是沒有影響的,但A漂移走了;absolute是絕對定位,如果父元素有position屬性,這個元素相對于父元素定位的,如果父元素沒有position屬性,這個元素相對于body定位的,而且它這個定位會對后面的元素產生元素,它是脫離文檔流的,脫離文檔流以后其他元素是會來補缺的,把這個位置填充掉。總而言之,position和display一樣也是常用在各種特效當中,我們常用的就是absolute和relative,它經常和overflow:hidden、z-index、left、top等屬性聯合使用,去實現一些圖片堆疊的效果,比如說常見的折頁效果,輪播圖等效果都用到這個屬性。
position在使用的過程中有兩個問題需要注意,第一、因為我們的瀏覽器分為IE和非IE瀏覽器,在標準的W3C盒模型下和IE盒模型下像素的解釋是不一樣的,這就說明一個問題,在定位的時候,如果同樣都是left:100px,那到了IE6、IE7下就可能不是left:100px,而變成left:102px了,這可了不得,是致命的缺點,所以要在left前加*,來解決這一問題。第二,我們在使用position時最關鍵的一點是,在配合其他屬性的時候一定要注意position是使用相對定位還是絕對定位,包括父元素是相對定位還是絕對定位。
以上就是我對css中position的理解。
7. css選擇器的權重和優先規則!
對于優先級我是這么理解的,
包括選擇器的樣式,包括調用樣式的一些方式的判斷,決定了樣式有一些執行次序的問題,從優先級的角度來說的話,誰的優先級最高呢,當然是內聯的優先級最高,在這種情況下,比如說id class派生有其他的一些優先級的排序方式,所以他的優先級一般是按照這樣的排序方式來進行。當然在這個里面,執行完優先級以后,他還有一個權值的問題,內聯樣式的權值是1000,ID是100,class是10,標簽是1,那么這些優先級包括這個權值的問題,兩個結合起來,我們一般呢,在寫項目的時候也有可能是這樣的,一個元素又有id又有class或者又有一些其他的選擇方式,那么在選中這些元素以后呢,他所有的選擇方式其實是一種結合使用的方式,這個時候就要講究優先的次序了,所以頁面中寫樣式的時候他就會前后次序清晰,不會出現樣式沖突這種現象
這就是我對樣式優先級和權值的一個理解。
8. 內聯和!important哪個優先級高?
我的理解是這樣的:
首先,肯定是!important優先級高。
!important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權,。語法格式{ cssRule !important },即寫在定義的最后面,例如:box{color:red !important;}
在CSS中,通過對某一樣式聲明! important ,可以更改默認的CSS樣式優先級規則,使該條樣式屬性聲明具有最高優先級,也就是相當于寫在最下面。
ie7,ie8,firefox,chrome等高端瀏覽器下,已經可以識別 !important屬性, 但是IE 6.0仍然不能完全識別.!important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里),IE 6.0認為!important優先級較高,否則當含!important的樣式屬性被同一個{}里的樣式覆蓋時,IE 6.0認為!important較低!
以上就是我對這個問題的理解。
9. table標簽中border,cellpadding,td 標簽中colspan , rowspan分別起什么作用?
我是這樣理解這個問題的:
table border:表格邊框, table-cellpadding: 單元格填充
td colspan:單元格縱向合并(列與列), table-rowspan: 單元格橫向合并(行與行)
以上就是我對這個問題的理解。
10. 實現三列布局的三種方法,具體描述?
我是這樣理解這個問題的:
(1)、絕對定位法
這或許是三種方法里最直觀,最容易理解的:左右兩欄采用絕對定位,分別固定于頁面的左右兩側,中間的主體欄用左右margin值撐開距離。于是實現了三欄自適應布局。
(2)、margin負值法
首先,中間的主體要使用雙層標簽。外層div寬度100%顯示,并且浮動(本例左浮動,下面所述依次為基礎),內層div為真正的主體內容,含有左右210像素的margin值。左欄與右欄都是采用margin負值定位的,左欄左浮動,margin-left為-100%,由于前面的div寬度100%與瀏覽器,所以這里的-100%margin值正好使左欄div定位到了頁面的左側;右側欄也是左浮動,其margin-left也是負值,大小為其本身的寬度即200像素。
(3)自身浮動法
應用了標簽浮動跟隨的特性。左欄左浮動,右欄右浮動,主體直接放后面,就實現了自適應。
以上就是我對這個問題的理解。
11. IE與寬度和高度的問題
我是這樣理解這個問題的:
IE 不認得min-這個定義,但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了,如果只用寬度和高度,正常的瀏覽器里這兩個值就不會變,如果只用min-width和min-height的話,IE下面根本等于沒有設置寬度和高度。
比如要設置背景圖片,這個寬度是比較重要的。要解決這個問題,可以這樣:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
以上就是我對這個問題的理解。
12. 頁面的最小寬度
我是這樣理解這個問題的:
min -width是個非常方便的CSS命令,它可以指定元素最小也不能小于某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把width當 做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個<div> 放到 <body> 標簽下,然后為div指定一個類,
以上就是我對這個問題的理解。
13. DIV浮動IE文本產生3象素的bug
我是這樣理解這個問題的:
左邊對象浮動,右邊采用外補丁的左邊距來定位,右邊對象內的文本會離左邊有3px的間距.
*html #left{ margin-right:-3px; //這句是關鍵}
以上就是我對這個問題的理解。
14. 高度不適應
我是這樣理解這個問題的:
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節,特別是當內層對象使用margin 或padding 時。
解決方法2個:在P對象上下各加2個空的div對象CSS代碼:.1{height:0px;overflow:hidden;}
為DIV加上border屬性。
以上就是我對這個問題的理解。
15. 如何對齊文本與文本輸入框
我是這樣理解這個問題的:
加上 vertical-align:middle;
以上就是我對這個問題的理解。
16. web標準中定義id與class有什么區別嗎
我是這樣理解這個問題的:
id和class都是元素中的屬性,這也是每個元素都有的屬性,他們是應用的很多領域中的,第一個應用的領域是css領域,在css領域中,有id選擇器和class選擇器,id的優先級要高于class,id選擇器是#加id,class選擇器是 . 加class,此外id的權重是100,class的權重是10,id要大于class;除了這個領域外在原生js中也是有使用的,而且使用的范圍還是很大的,一個是getElementById,一個是getElementsByClassName,而且在封裝像jQuery等其他語言中,也是有封裝類似于id、類似于class這種選擇器的,另外他們最核心的區別是用id選擇器只能選擇單個元素,而用class選擇器可以選擇多個元素,在js中,如果用class選擇的元素,往往是要遍歷元素才有效,才能在頁面渲染到這些數據,這就是他們倆之間的一些區別。所以在做項目的時候id和class我都用,但是我用的更多的是class,因為頁面上雷同的元素太多了,所以class用的更多一些。
以上就是我對這個問題的理解。
17. LI中內容超過長度后以省略號顯示的方法
我是這樣理解這個問題的:
此方法適用與IE與OP瀏覽器
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
以上就是我對這個問題的理解。
18. 為什么web標準中IE無法設置滾動條顏色了
我是這樣理解這個問題的:
解決辦法是將body換成html
以上就是我對這個問題的理解。
19. 怎么樣才能讓層顯示在FLASH之上呢
我是這樣理解這個問題的:
解決的辦法是給FLASH設置透明
<param name="wmode" value="transparent" />
以上就是我對這個問題的理解。
20. 怎樣使一個層垂直居中于瀏覽器中
我是這樣理解這個問題的:
要使一個層垂直居中于瀏覽器中,有4種方法
1. 行高,缺點,需要高度,只能文字
2. 定位+margin負值,缺點,需要高度
3. 彈性盒子,缺點,css3新增屬性,不太兼容
4. 轉table,缺點,ie6不支持,利用table垂直居中的特性,配合vertical-align,垂直居中
5. Css+定位
以上就是我對這個問題的理解。
21. Div居中問題
我是這樣理解這個問題的:
div設置 margin-left, margin-right 為 auto 時已經居中,IE 不行,IE需要設定body居中,首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。
以上就是我對這個問題的理解。
22. 鏈接(a標簽)的邊框與背景
我是這樣理解這個問題的:
a 鏈接加邊框和背景色,需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
以上就是我對這個問題的理解。
23. 超鏈接訪問過后hover樣式就不出現的問題
我是這樣理解這個問題的:
被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A
Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
以上就是我對這個問題的理解。
24. 游標手指cursor
我是這樣理解這個問題的:
cursor: pointer 可以同時在 IE FF 中顯示游標手指狀, hand 僅 IE 可以
以上就是我對這個問題的理解。
25. UL的padding與margin
我是這樣理解這個問題的:
ul標簽在FF中默認是有padding值的,而在IE中只有margin默認有值,所以先定義 ul{margin:0;padding:0;}就能解決大部分問題
以上就是我對這個問題的理解。
26. FORM標簽
我是這樣理解這個問題的:
這 個標簽在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,所以后 面就不會為這個頭疼了.
以上就是我對這個問題的理解。
CSS的類選擇器和id選擇器各有什么優勢?
ID用于標識頁面上的特定元素(比如站點導航),而且必須是唯一的。 ID也可以用來標識持久的結構性元素,例如主導航或內容區域。ID還可以用來標識一次性元素,例如某個鏈接或表單元素。一個ID只能應用于頁面上的一個元素。
class同一個類名可以應用于頁面上任意多個元素,因此類的功能強大的多。類非常適合表示內容的類型或其他相似的條目。
在實際開發中,要根據實際使用情況來決定是使用哪種樣式。對于單一元素的在單一界面的展示樣式可以推薦是用id來定位。多余多個界面公用,或者同一界面多個元素風格一致,樣式統一使用class類要方便的多。
下面就是最簡單的一個小例子:
展示效果: