css

geekidentity 發(fā)布于2019-08-30 15:53 / 462人閱讀

摘要：一和都可以為頁面引入，區(qū)別方式方式祖先的差別，屬于標簽，而完全是提供的一種方式。繼承父元素屬性的值十有哪些性特征。給超出高度的標簽設置或者設置行高小于你設置的高度

一. link和import都可以為頁面引入css，區(qū)別？
link方式：
@import 方式

① 祖先的差別，link屬于XHTML標簽，而@import完全是css提供的一種方式。link標簽除了可以加載css外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能加載css了。

② 加載順序的區(qū)別。當一個頁面被加載的時候，link引用的css會同時被加載，而@import引用的css會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載css的頁面時開始會沒有樣式（就是閃爍），網(wǎng)速慢時更為明顯

③ 兼容性的差別，@import是css2.1提出的所有老瀏覽器不支持。@import只有在IE5以上的才能識別，而link標簽無此問題

④ 使用DOM控制樣式時的差別，當使用JavaScript控制DOM改變樣式時，只能使用link標簽，@import不是DOM可以控制的

二. css盒子模型，與低版本IE的盒子模型區(qū)別
標準盒子模型（IE6以上版本和firefox，chrome等）：寬度 = 內(nèi)容寬度（content）+border+padding+margin

低版本IE盒子模型(IE6和以下的版本)：寬度 = 內(nèi)容寬度（content+border+padding）+margin

三. box-sizing屬性（content-box默認值與W3C標準盒子模型一致，元素外盒寬高=content+padding+border+margin，css中設置的width只是包含content的寬;border-box與IE低版本的盒子模型一致，外盒寬高 =content（content+padding+border）+margin），css中設置的width包含content+padding+border寬度；inherit默認繼承父類盒子模型。

四.css選擇器有哪些？哪些屬性可以繼承
css選擇器：id選擇器（#id），類選擇器（.class），標簽選擇器(div p h1-h6 em strong等)，相鄰選擇器(h1+p)，子選擇器(ul>li),后臺選擇器(li a),通配符選擇器(*),屬性選擇器(a[name=’content’]),偽類選擇器(a:hover,li:nth-child)

可繼承的屬性：font-size,font-weightfont-family等以font開頭的屬性,color

不可繼承的屬性：borderpadding margin width height 等

優(yōu)先級（就近原則）:!important>[id>class>tag]

!important比內(nèi)聯(lián)優(yōu)先級高

五. css優(yōu)先級算法如何計算
！important最高

內(nèi)聯(lián)樣式：1000

Id選擇器：100

類選擇器偽類選擇器屬性選擇器：10

標簽選擇符：1

通用選擇器，子選擇器，相鄰同胞選擇器：0

六. css3新增偽類有哪些
p:first-of-type 對應p:first-child 父元素的第一個元素

p:last-of-type 對應p:last-child 父元素的最后一個元素

p:only-of-type 對應p:only-child 父元素的唯一的子元素

p:nth-of-type(2) 對應p:nth-child(2) 父元素的第二個子元素

p:nth-last-of-type 對應p:nth-last-child(2) 父元素第二個子元素，從最后一個元素開始計數(shù)

:enabled :disabled 表單控件的禁用狀態(tài)

：checked單選框或復選框被選中

:not :not(p)選擇非p元素的每個元素

:root 選擇文檔的根元素

:empty p:empty 選擇沒有子元素的每個p元素

:target #news:target 選擇當前活動的#news元素

[attr^=value] a[name^=’abc’]匹配屬性name的值以abc開頭的所有a元素

[attr$=value] a[name^=’abc’]匹配屬性name的值以abc結(jié)束的所有a元素

[attr*=value] a[name^=’abc’]匹配屬性name的值包含abc的所有a元素

::selection 被用戶選取元素部分

七. div如何垂直水平居中

八. display有哪些值？說明作用
① display:none;

② display:block;(塊級元素，多帶帶占一行，塊級元素都是從上向下排列，設置width，height，padding，margin均有效)

③ display:inline;(內(nèi)聯(lián)元素從左向右排列，設置width，height無效，寬高根據(jù)自身的文字高度和長度。padding和margin設置上下值無效，左右值有效，padding-top和padding-bottom不會影響它的高度，但是會影響他的背景高度。)

hhh

④ display:inline-block(結(jié)合了block和inline兩個元素特征，不多帶帶占一行，并且設置寬高都有效，padding，margin不管上下還是左右都有效)

④和⑤，inline和inline-block元素之間的空白（解決方案:1.設置父元素的font-size:0，子元素自行設置元素字體大小，如果要有兼容性問題結(jié)合letter-spacing或word-spacing去除間隙；2：編寫inline元素和inline-block元素時，直接寫在一行）

⑥display:table;display:table-cell將元素類似表格元素垂直水平居中顯示

⑦display:flex 詳見http://www.ruanyifeng.com/blo...^%$

九：position的值

static（默認）：按照正常文檔流進行排列，忽略top,bottom,left,right或者z-index
relative（相對定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。
inherit繼承父元素position屬性的值
十：css3有哪些性特征。參考https://segmentfault.com/a/11...

十一：用純css創(chuàng)建一個三角形的原理？
首先需要把元素的寬高設置為0，然后設置邊框樣式。border分為border-top,border-right,border-bottom,border-left。詳細參考http://www.cnblogs.com/jack-c...

  .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;
    }

十二：常見兼容性問題
1.去掉瀏覽器間隙問題

*{
margin:0;
padding:0;
box-sizing:border-box;
}

2.圖片間的空隙，只要是display:inline;display:inline-block;元素分行寫都會有間隙，設置父元素font-size:0 如果還有間隙，可設置 letter-spacing: 和;word-spacing: 的值為負數(shù)

.content{
width: 800px;
height: 800px;
font-size: 0;
 }
.img{
    width: 100px;
    height: 100px;
}

3.E8及IE更低版本不支持opacity rgba

 .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.塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margi比設置的大
常見癥狀：在IE6下后面的一塊被頂?shù)较乱恍?br>解決方案：在float的標簽樣式控制中加入display:inline;將其轉(zhuǎn)換成行內(nèi)屬性
5.設置較小高度標簽(一般小于10px),在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden,或者設置行高line-height小于你設置的高度