摘要:一和都可以為頁(yè)面引入,區(qū)別方式方式祖先的差別,屬于標(biāo)簽,而完全是提供的一種方式。繼承父元素屬性的值十有哪些性特征。給超出高度的標(biāo)簽設(shè)置或者設(shè)置行高小于你設(shè)置的高度
一. link和import都可以為頁(yè)面引入css,區(qū)別?
link方式:
@import 方式
① 祖先的差別,link屬于XHTML標(biāo)簽,而@import完全是css提供的一種方式。link標(biāo)簽除了可以加載css外,還可以做很多其他的事情,比如定義RCC,定義rel連接屬性等;@import就只能加載css了。
② 加載順序的區(qū)別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候,link引用的css會(huì)同時(shí)被加載,而@import引用的css會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載css的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式(就是閃爍),網(wǎng)速慢時(shí)更為明顯
③ 兼容性的差別,@import是css2.1提出的所有老瀏覽器不支持。@import只有在IE5以上的才能識(shí)別,而link標(biāo)簽無(wú)此問(wèn)題
④ 使用DOM控制樣式時(shí)的差別,當(dāng)使用JavaScript控制DOM改變樣式時(shí),只能使用link標(biāo)簽,@import不是DOM可以控制的
二. css盒子模型,與低版本IE的盒子模型區(qū)別
標(biāo)準(zhǔn)盒子模型(IE6以上版本和firefox,chrome等):寬度 = 內(nèi)容寬度(content)+border+padding+margin
低版本IE盒子模型(IE6和以下的版本):寬度 = 內(nèi)容寬度(content+border+padding)+margin
三. box-sizing屬性(content-box默認(rèn)值與W3C標(biāo)準(zhǔn)盒子模型一致,元素外盒寬高=content+padding+border+margin,css中設(shè)置的width只是包含content的寬;border-box與IE低版本的盒子模型一致,外盒寬高 =content(content+padding+border)+margin),css中設(shè)置的width包含content+padding+border寬度;inherit默認(rèn)繼承父類(lèi)盒子模型。
</>復(fù)制代碼
四.css選擇器有哪些?哪些屬性可以繼承
css選擇器:id選擇器(#id),類(lèi)選擇器(.class),標(biāo)簽選擇器(div p h1-h6 em strong等),相鄰選擇器(h1+p),子選擇器(ul>li),后臺(tái)選擇器(li a),通配符選擇器(*),屬性選擇器(a[name=’content’]),偽類(lèi)選擇器(a:hover,li:nth-child)
可繼承的屬性:font-size,font-weightfont-family等以font開(kāi)頭的屬性,color
不可繼承的屬性:borderpadding margin width height 等
優(yōu)先級(jí)(就近原則):!important>[id>class>tag]
!important比內(nèi)聯(lián)優(yōu)先級(jí)高
五. css優(yōu)先級(jí)算法如何計(jì)算
!important最高
內(nèi)聯(lián)樣式:1000
Id選擇器:100
類(lèi)選擇器 偽類(lèi)選擇器 屬性選擇器:10
標(biāo)簽選擇符:1
通用選擇器,子選擇器,相鄰?fù)x擇器:0
六. css3新增偽類(lèi)有哪些
p:first-of-type 對(duì)應(yīng)p:first-child 父元素的第一個(gè)元素
p:last-of-type 對(duì)應(yīng)p:last-child 父元素的最后一個(gè)元素
p:only-of-type 對(duì)應(yīng)p:only-child 父元素的唯一的子元素
p:nth-of-type(2) 對(duì)應(yīng)p:nth-child(2) 父元素的第二個(gè)子元素
p:nth-last-of-type 對(duì)應(yīng)p:nth-last-child(2) 父元素第二個(gè)子元素,從最后一個(gè)元素開(kāi)始計(jì)數(shù)
:enabled :disabled 表單控件的禁用狀態(tài)
:checked單選框或復(fù)選框被選中
:not :not(p)選擇非p元素的每個(gè)元素
:root 選擇文檔的根元素
:empty p:empty 選擇沒(méi)有子元素的每個(gè)p元素
:target #news:target 選擇當(dāng)前活動(dòng)的#news元素
[attr^=value] a[name^=’abc’]匹配屬性name的值以abc開(kāi)頭的所有a元素
[attr$=value] a[name^=’abc’]匹配屬性name的值以abc結(jié)束的所有a元素
[attr*=value] a[name^=’abc’]匹配屬性name的值包含abc的所有a元素
::selection 被用戶(hù)選取元素部分
</>復(fù)制代碼
11
22
33
44
55
66
aa
bb
cc
dd
ee
七. div如何垂直水平居中
</>復(fù)制代碼
八. display有哪些值?說(shuō)明作用
① display:none;
② display:block;(塊級(jí)元素,多帶帶占一行,塊級(jí)元素都是從上向下排列,設(shè)置width,height,padding,margin均有效)
③ display:inline;(內(nèi)聯(lián)元素從左向右排列,設(shè)置width,height無(wú)效,寬高根據(jù)自身的文字高度和長(zhǎng)度。padding和margin設(shè)置上下值無(wú)效,左右值有效,padding-top和padding-bottom不會(huì)影響它的高度,但是會(huì)影響他的背景高度。)
</>復(fù)制代碼
hhh
④ display:inline-block(結(jié)合了block和inline兩個(gè)元素特征,不多帶帶占一行,并且設(shè)置寬高都有效,padding,margin不管上下還是左右都有效)
④和⑤,inline和inline-block元素之間的空白(解決方案:1.設(shè)置父元素的font-size:0,子元素自行設(shè)置元素字體大小,如果要有兼容性問(wèn)題結(jié)合letter-spacing或word-spacing去除間隙;2:編寫(xiě)inline元素和inline-block元素時(shí),直接寫(xiě)在一行)
⑥display:table;display:table-cell將元素類(lèi)似表格元素垂直水平居中顯示
⑦display:flex 詳見(jiàn)http://www.ruanyifeng.com/blo...^%$
九:position的值
static(默認(rèn)):按照正常文檔流進(jìn)行排列,忽略top,bottom,left,right或者z-index
relative(相對(duì)定位):不脫離文檔流,參考自身靜態(tài)位置通過(guò) top, bottom, left, right 定位;
absolute(絕對(duì)定位):參考距其最近一個(gè)不為static的父級(jí)元素通過(guò)top, bottom, left, right 定位;
fixed(固定定位):所固定的參照對(duì)像是可視窗口。
inherit繼承父元素position屬性的值
十:css3有哪些性特征。參考https://segmentfault.com/a/11...
十一:用純css創(chuàng)建一個(gè)三角形的原理?
首先需要把元素的寬高設(shè)置為0,然后設(shè)置邊框樣式。border分為border-top,border-right,border-bottom,border-left。詳細(xì)參考http://www.cnblogs.com/jack-c...
</>復(fù)制代碼
.content{
border-top: 50px solid #f00;
border-right: 50px solid #0f0;
border-bottom: 50px solid #00f;
border-left: 50px solid rgb(85, 201, 255);
height: 0;
width: 0;
}
.right{
width: 0;
height: 0;
border-left: 50px solid #f00;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
}
.left{
width: 0;
height: 0;
border-right: 50px solid #0f0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
}
.top{
width: 0;
height: 0;
border-bottom: 50px solid #f96;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.bottom{
width: 0;
height: 0;
border-top:50px solid #00f;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
十二:常見(jiàn)兼容性問(wèn)題
1.去掉瀏覽器間隙問(wèn)題
</>復(fù)制代碼
*{
margin:0;
padding:0;
box-sizing:border-box;
}
2.圖片間的空隙,只要是display:inline;display:inline-block;元素分行寫(xiě)都會(huì)有間隙,設(shè)置父元素font-size:0 如果還有間隙,可設(shè)置 letter-spacing: 和;word-spacing: 的值為負(fù)數(shù)
</>復(fù)制代碼
.content{
width: 800px;
height: 800px;
font-size: 0;
}
.img{
width: 100px;
height: 100px;
}
3.E8及IE更低版本不支持opacity rgba
</>復(fù)制代碼
.content1{
width: 500px;
height: 100px;
background: red;
opacity: 0.1;
/* background-color: rgba(255, 0, 0, 0.1) */
}
.content2{
border:1px solid #333;
width: 800px;
height: 500px;
}
4.塊屬性標(biāo)簽float后,又有橫行的margin情況下,在IE6顯示margi比設(shè)置的大
常見(jiàn)癥狀:在IE6下后面的一塊被頂?shù)较乱恍?br>解決方案:在float的標(biāo)簽樣式控制中加入display:inline;將其轉(zhuǎn)換成行內(nèi)屬性
5.設(shè)置較小高度標(biāo)簽(一般小于10px),在IE6,IE7中高度超出自己設(shè)置高度。hack:給超出高度的標(biāo)簽設(shè)置overflow:hidden,或者設(shè)置行高line-height小于你設(shè)置的高度
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116692.html
摘要:層疊樣式表二修訂版這是對(duì)作出的官方說(shuō)明。速查表兩份表來(lái)自一份關(guān)于基礎(chǔ)特性,一份關(guān)于布局。核心第一篇一份來(lái)自的基礎(chǔ)參考指南簡(jiǎn)寫(xiě)速查表簡(jiǎn)寫(xiě)形式參考書(shū)使用層疊樣式表基礎(chǔ)指南,包含使用的好處介紹個(gè)方法快速寫(xiě)成高質(zhì)量的寫(xiě)出高效的一些提示。 迄今為止,我已經(jīng)收集了100多個(gè)精通CSS的資源,它們能讓你更好地掌握CSS技巧,使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...
摘要:結(jié)果是選手獲勝,名為的元素,最終的值為。而合理的命名約定,的確是組織代碼的有效策略。它們會(huì)再由轉(zhuǎn)換為適當(dāng)?shù)慕M合。雖然本文為了嚴(yán)謹(jǐn),結(jié)果寫(xiě)了相當(dāng)長(zhǎng)的篇幅,但希望你讀過(guò)之后,還能覺(jué)得是簡(jiǎn)單易懂的。 不要誤會(huì),CSS Modules可不是在說(shuō)css模塊化這個(gè)好像在某些地方見(jiàn)過(guò)的詞,它其實(shí)是特指一種近期才出現(xiàn)的技術(shù)手段。 什么技術(shù)手段呢?請(qǐng)待后文說(shuō)明。 層疊樣式表 我們知道,css的全名叫做層...
摘要:能最大化地結(jié)合現(xiàn)有生態(tài)預(yù)處理器后處理器等和模塊化能力,幾乎零學(xué)習(xí)成本。編碼相關(guān)的所有樣式上例中打印的結(jié)果是注意到是按照自動(dòng)生成的名。實(shí)踐手動(dòng)引用渲染結(jié)果使用可以實(shí)現(xiàn)使用屬性自動(dòng)加載模塊。 文章同步于Github Pines-Cheng/blog 隨著前端這幾年的風(fēng)生水起,CSS作為前端的三劍客之一,各種技術(shù)方案也是層出不窮。從CSS prepocessor(SASS、LESS、Styl...
摘要:一個(gè)叫的人用純重繪并模擬了種不同的移動(dòng)設(shè)備包括可以給你的網(wǎng)站添加不相關(guān)的獨(dú)立組件的一個(gè)庫(kù)。每一個(gè)組件都是針對(duì)移動(dòng)設(shè)備定制的,并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開(kāi)發(fā)移動(dòng)優(yōu)先的網(wǎng)站,并想要網(wǎng)站正常運(yùn)行在低版本的上,可以考慮。 眾所周知,CSS是非常棒的,它使網(wǎng)站看起來(lái)很漂亮,可以為網(wǎng)站添加動(dòng)畫(huà),并讓呈現(xiàn)和內(nèi)容分離。去了解CSS的一切是非常難做到的,它只會(huì)變得更加困難,因?yàn)槲?..
摘要:層疊即表示允許以多種方式來(lái)描述樣式,一個(gè)元素可以被渲染呈現(xiàn)出多種樣式??梢宰寣傩缘淖兓^(guò)程持續(xù)一段時(shí)間,而不是立即生效。比如,將元素的顏色從白色改為黑色,通常這個(gè)改變是立即生效的,使用后,將按一個(gè)曲線(xiàn)速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱(chēng)是 Cascading Style Sheet...
摘要:上例中打印的結(jié)果是對(duì)中的名都做了處理,使用對(duì)象來(lái)保存原和混淆后的對(duì)應(yīng)關(guān)系。結(jié)合實(shí)踐在處直接使用中名即可。如因?yàn)橹粫?huì)轉(zhuǎn)變類(lèi)選擇器,所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領(lǐng)域中進(jìn)化最慢的一塊。由于 ES2015/201...
閱讀 3715·2021-11-23 09:51
閱讀 1376·2021-11-10 14:35
閱讀 4012·2021-09-22 15:01
閱讀 1286·2021-08-19 11:12
閱讀 386·2019-08-30 15:53
閱讀 1695·2019-08-29 13:04
閱讀 3434·2019-08-29 12:52
閱讀 3060·2019-08-23 16:14
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要