css佈局基本知識

一，. 頁面導入樣式時，使用link和@import有什麼區別？

語法的角度：

link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；

而@import是CSS提供的語法，只能用於加載CSS;

瀏覽器解析的角度

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載(標準瀏覽器);

兼容性問題

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題。

總之，link要優於@import,由此決定了它的適應性更廣，加載性更快，兼容性更強。

二.清空浮動的方法有哪些？哪一個更好？

 

方式一:使用overflow屬性來清除浮動

 

.ovh{

overflow:hidden;

 

　}

 

 先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

 

 注意：通常狀況下也不會使用這種方式，由於overflow:hidden有一個特色，離開了這個元素所在的區域之後會被隱藏（overflow:hidden會將超出的部分隱藏起來）.

 

 方式二:使用額外標籤法

　.clear{

 

 　clear:both;

　}

 

在浮動的盒子之下再放一個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響.

 

a.內部標籤：會將這個浮動盒子的父盒子高度從新撐開.

 b.外部標籤：會將這個浮動盒子的影響清除，可是不會撐開父盒子.

注意：通常狀況下不會使用這一種方式來清除浮動。由於這種清除浮動的方式會增長頁面的標籤，形成結構的混亂.

 

 方法三:使用僞元素來清除浮動(after意思:後來,之後)

 

 .clearfix:after{

 

 centent:"";//設置內容爲空

　height:0;//高度爲0

　line-height:0;//行高爲0

 

　display:block;//將文本轉爲塊級元素

 

　visibility:hidden;//將元素隱藏

　clear:both//清除浮動

} 

　.clearfix{

 

 　zoom:1;爲了兼容IE

 

}

三.CSS 選擇符及繼承性和優先級算法，僞類

可繼承性

可繼承屬性

font-size font-family color,ul,li,dd,dt;

不可繼承的屬性

border padding margin width height

優先級

就近原則:同權重狀況下樣式定義最近者爲準,載入樣式以最後載入的定位爲準;

優先級算法: !important > id > class > tag

四. CSS3新增僞類

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

五.display vs position

display:block|inline-block|list-item|none

position

absolute :生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

fixed :（老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。

relative:生成相對定位的元素，相對於其正常位置進行定位。

static :默認值。沒有定位，元素出如今正常的流中, （忽略 top, bottom, left, right z-index 聲明）

inherit: 規定從父元素繼承 position 屬性的值。

六. CSS3新特性

CSS3實現圓角（border-radius:8px），

陰影（box-shadow:10px），

對文字加特效（text-shadow、）

線性漸變（gradient）

旋轉（transform）

ransform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)

skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增長了更多的CSS選擇器 多背景 rgba

七.聖盃雙飛翼佈局

聖盃：Html:

<div id="header">Header</div>

<div id="bd">

    <div id="main">main</div>

    <div id="left">left</div>

    <div id="right">Right</div>

</div>

<div id="footer">Footer</div>

Css:

body{

    margin: 0px;

    padding: 0px;

}

#header,#footer{

    width:100%;

    background: #666;

    height:50px;

}

#bd{

    padding-left:150px;

    padding-right:190px;

background: red;}

#left{

    background: #E79F6D;

    width:150px;

    float:left;

    margin-left:-100%;

    position: relative;

    right:150px;}

#main{

    background: #D6D6D6;

    width:100%;

    float:left;}

#right{

    width: 190px;

    float: left;

    background:greenyellow;

margin-left: -190px;

    position: relative;

    left: 190px;

}

雙飛翼：html：

<div id="header">Header</div>

<div id="main">

    <div id="inner">

        Main

    </div>

</div>

<div id="left">Left</div>

<div id="right">Right</div>

<div id="footer">Footer</div>

Css：

body{

    padding:0;

    margin:0

}

#header,#footer{

    width:100%;

    background: #666;

    height:50px;

    clear: both;

}

#main {

    background: #D6D6D6;

    width: 100%;

    float: left;

}

#inner{

    margin-left:150px;

    margin-right:190px;

}

#left{

    background: #E79F6D;

    width:150px;

    float:left;

    margin-left:-100%;

}

#right{

    background: #77BBDD;

    width:190px;

    float:left;

    margin-left:-190px;

}

八負margin的做用：

 

實現聖盃雙飛翼佈局

增長未設置寬度的元素的自身寬度

去掉浮動列表的右邊框

和絕對定位一塊兒實現水平垂直居中

去除列表最後一個li元素的border-bottom

 

去掉浮動列表的右邊框：

<div id="wrap">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</div>

Css：

*{

    margin: 0;

    padding: 0;

}

#wrap{

    background-color:orange;

    width: 320px;

    height: 320px;

    overflow: hidden;

 

}

ul{

    zoom:1;

    margin-right: -10px;

}

li{

    float: left;

    width: 100px;

    height: 100px;

    margin-right: 10px;

    margin-bottom: 10px;

    list-style: none;

    background-color: red;

}

和定位一塊兒實現水平垂直居中：

#box{

    width: 100px;

    height: 100px;

    background-color: brown;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -50px;

    margin-left: -50px;

}

 

實現水平垂直居中

 

用絕對定位實現

 

#box{

        width: 100px;

        height: 100px;

        background-color: red;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-left: -50px;

        margin-top:-50px;

    }

用絕對定位和auto實現

 

#box{

        width: 100px;

        height: 100px;

        background-color: red;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

    }

用絕對定位和transform反向偏移實現：

 

#box{

        width: 100px;

        height: 100px;

        background-color: red;

        position: absolute;

        top: 50%;

        left: 50%;

        transform:translate(-50%,-50%);

        -webkit-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

    }

用flex實現

 

首先要設置父容器 display: flex，而後再設置 justify-content: center 實現水平居中，最後設置 align-items: center 實現垂直居中。

 

#dad {

display: flex;

justify-content: center;

align-items: center

}

九，src和herf的區別：

herf：指向網絡資源所在位置，用於超連接。

src：指向外部資源，指向的內容會嵌入到文檔中當前位置，在請求src資源時會將其指向的資源下載並應用到文檔中。

十，標準盒模型和IE盒模型的區別：

標準：content部分不包括其餘

IE:width包括了boder和padding