初級前端知識點整合-CSS部分

時間 2020-03-10

標籤初級前端知識整合 css 部分欄目 CSS 简体版

原文原文鏈接

1.CSS實現水平居中：
行內元素：text-align:center;
塊級元素：div{width:100px;height:100px;margin:0 auto};css

CSS實現垂直居中：
子元素爲單行文本的狀況：div{height:100px;line-height:100px};
塊級元素：html

div{
    height:100px;
    width:100px;
    position: relative;
    top: 50%;
    margin-top:-50px;  //設置爲元素高度的一半，而且是負值
}

2.rem與em的區別：
rem是相對於根元素html的font-size而變化，而em是相對於父元素的font-size而變化css3

3.盒子模型：
<1>標準盒模型（W3C盒模型）：
box-sizing爲content-box（默認值）
定義的寬度 width = content
元素顯示的實際寬度 = width+padding+borderweb

div{
    width: 100px;
    border: 10px;
}

那麼這個div盒子顯示的寬度爲110px。瀏覽器

<2>怪異盒模型（IE盒模型）：
box-sizing爲border-box
定義的寬度width = content+padding+border
元素顯示的實際寬度就是width。ide

4.Link和@import導入css的區別：佈局

<style>
    @import url(css文件路徑);
</style>
<link href="css文件路徑" rel="stylesheet" type="text/css" />

最主要的區別在於，link引入的css會和頁面同步加載，而@import引入的css則會等到頁面加載完畢以後開始加載，因此@import會致使頁面閃爍；
link除了能夠導入css以外，還能夠定義RSS、REL等。而@import只能用於加載CSS。
link可使用JS動態引入（JS建立DOM元素添加特性），而@import則不行；
link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC（flash of unstyled content）。flex

5.多行元素的文本省略號：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;優化

6.CSS優化：
選擇器合併，共同的屬性內容提出來，壓縮空間和資源開銷；
精準樣式，例如能使用padding-left就不使用padding；
雪碧圖，減小請求；
壓縮css文件大小，減少資源下載負擔。動畫

7.css雪碧圖:
概念：將多個圖片拼接到一個圖片中。經過background-position:-x,-y; 和元素尺寸調節須要顯示的背景圖案。
優勢：減小HTTP請求次數和圖片大小，提升網頁加載速度；更換背景圖片方便，只需移動背景圖片位置便可。
缺點：圖片合併以及維護麻煩，修改一個圖片可能須要從新佈局整個圖片和樣式。

8.display:none和visibility:hidden的區別和聯繫：
聯繫：都能使元素看不見；
區別：
<1>display:none 會讓元素從渲染樹中消失，渲染的時候不佔用空間；而Visibility:hidden仍會佔用空間，只是元素不可見而已；
<2>display:none是非繼承屬性的，元素消失伴隨着子孫節點消失，修改子孫節點的屬性也沒法顯示；而visibility:hidden實繼承屬性，經過設置visibility:visible可讓子孫節點顯示；
<3>修改常規流中元素的display一般會形成文檔重排，而修改visibility屬性只會形成本元素重繪。

9.FOUC:(flash of unstyled content)用戶定義樣式表在加載以前，瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染完以後再從新顯示文檔，形成頁面的閃爍簡稱FOUC；
把樣式表放到文檔的head中能夠避免FOUC。

10.建立塊級格式化上下文（BFC）及其做用：
<1>建立BFC: ·根元素；

·浮動元素float不爲none；
        ·絕對定位元素，position的值爲absolute或者fixed；
        display值爲inline-block、table、flex之一；
        overflow不爲visible。(hidden/none/auto)

<2>做用：能夠包含浮動元素；

不被浮動元素覆蓋；
    防止父子元素的margin摺疊。

<3>BFC的佈局規則：

·內部的BFC會在垂直方向，一個接一個的放置；
·BOX垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊；
·每一個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從左往右的格式化，不然相反）。即便存在浮動也是如此；
·BFC的區域不會與float box重疊；
·BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之也是如此。
·計算BFC高度的時候，浮動元素也參與計算

<4>BFC的做用及原理：
(1)自適應兩欄佈局

body{
    width: 300px;
    position:relative;
}
.aside{
    width:100px;
    height:150px;
    float:left;
    background: #f66;
}
.main{
    height:200px;
    background:#fcc;
}

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

根據BFC佈局規則第三條：

每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

因此，雖然存在浮動元素aside，但main的左邊依然會與包含塊的左邊相接觸。
根據BFC佈局規則第四條：

BFC的區域不會與float box重疊。

因此能夠經過觸發main生成BFC，來實現自適應兩欄佈局。當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。所以會根據包含塊的寬度，和aside的寬度，自動變窄。效果以下：

.main{
    overflow:hidden;   //給.main加上這個屬性使得其建立BFC，或者前面任意所說的建立BFC方法都行
}

(2)清除內部浮動：

.par {
    border: 5px solid #fcc;
    width: 300px;
 }
 
.child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
}

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

根據BFC佈局規則第六條：

計算BFC的高度時，浮動元素也參與計算

爲達到清除內部浮動，咱們能夠觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。

.par {
    overflow: hidden;
}

(3)防止margin重疊（坍塌）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

根據BFC佈局規則第二條：

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

咱們能夠在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

11.清除浮動的幾種方式：
<1>使用空標籤清除浮動clear:both（缺點：增長無心義的標籤）

<div style="clear:both"></div>   //行內元素無效，必需要用塊級元素

<2>overflow:auto(缺點：內部元素寬高超過父級div時會出現滾動條)
<3>用::after僞元素清除浮動（推薦）

#content:after{                 //清除浮動須要在浮動元素後面，因此給父標籤添加僞元素
    clear:both;                 
    content:"";
    display:block;
}

<div id="content">
     <div class="left">aaa</div>
     <div class="left">bbb</div>
     <div class="left">ccc</div>
    //::after    會在這裏添加僞元素
 </div>

12.爲何要初始化CSS樣式：
由於瀏覽器之間的兼容問題，不一樣瀏覽器對有些標籤的默認值不一樣，若是沒有對CSS初始化每每會出現瀏覽器頁面之間的顯示差別。

css樣式初始化：

//最簡單的可是最耗資源的方法
* {
    padding: 0;
    margin: 0;
    border: 0;
}

/\* 全局樣式 \*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
    margin:0;padding:0;border:0;
}
body{
    background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";
}
ul,ol{
    list-style-type:none;
}
select,input,img,select{
    vertical-align:middle;
}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

13.css3新特性：
·border-radius:圓角
·gradient:漸變
·animation:動畫
·transform:旋轉、縮放、移動或傾斜
·transition:過渡
·shadow:陰影
·新增各類CSS選擇器

14.css3新增僞類：
·p:first-of-type:某元素下的第一個子元素是P元素，選擇全部這類元素的P元素
·p:last-of-type:某元素下的最後一個子元素是p元素，選擇全部這類元素的p元素
·p:only-of-type:某元素下只有一個p元素，選擇全部這類元素的p元素
·p:only-child:某元素下只有一個子元素而且是p元素，選擇全部這類元素的p元素
·p:nth-child(2):某元素下第二個子元素是p元素，選擇全部這類元素的p元素
·p:after:在p元素以後插入內容，也能夠用來作清除浮動
·p:before:在p元素以前插入內容
·input:enabled:選擇每一個啓用的input元素
·input:disabled:選擇每一個禁用的input元素
·input:checked:選擇每一個被選中的input元素

15.css選擇器權重：
!important>行內樣式>#id>.class>元素和僞元素>*>繼承>默認

16.position的值：
·absolute：生成絕對定位元素，相對於static定位之外的第一個父元素進行定位；
·fixed：生成絕對定位元素，相對於瀏覽器窗口進行定位；
·relative：生成相對定位元素，相對於其正常位置進行定位；
·static：默認值，沒有定位，元素出如今正常的文檔流中；
·inherit：規定從父元素繼承position的值。

17.display：inline-block何時不會顯示間隙：
移除空格（代碼之間）、使用margin負值、使用font-size：0、letter-spacing、word-spacing

18.