整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局。
.box{
display: flex;
}
行內(nèi)元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
采用Flex布局的元素，稱(chēng)為Flex容器（flex container），簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex項(xiàng)目（flex item），簡(jiǎn)稱(chēng)"項(xiàng)目"。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
以下6個(gè)屬性設(shè)置在容器上。
3.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4個(gè)值。
3.2 flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線(xiàn)（又稱(chēng)"軸線(xiàn)"）上。flex-wrap屬性定義，如果一條軸線(xiàn)排不下，如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三個(gè)值。
（1）nowrap（默認(rèn)）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。
3.5 align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。
3.6 align-content屬性
align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
該屬性可能取6個(gè)值。
以下6個(gè)屬性設(shè)置在項(xiàng)目上。
4.1 order屬性
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
.item {
order: <integer>;
}
4.2 flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話(huà)）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
4.3 flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。
負(fù)值對(duì)該屬性無(wú)效。
4.4 flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。
4.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。
4.6 align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致。
來(lái)源：阮一峰大神的博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align:center;
color:#001D26;
}
h4{
color:#900
}
p{
font-size:16px;
color:#3E4B53;
text-indent:2em;
}
a:link{
color:skyblue;
}
a:hover{
color:red;
}
body{
background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
}
</style>
</head>
<body>
<p>
<h1> 憶江南 </h1>
</p>
<a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
<p>
(1)江南好，風(fēng)景舊曾諳。(2)日出江花紅勝火，春來(lái)江水綠如藍(lán)，(3)能不憶江南。
</p>
<h4>作者介紹</h4>
<p>
白居易（772-846），字樂(lè)天，太原（今屬山西）人。唐德宗朝進(jìn)士，元和三年（808）拜左拾遺，后貶
江州（今屬江西）司馬，移忠州（今屬四川）刺史，又為蘇州（今屬江蘇）、同州（今屬山西大荔）刺史。晚居
洛陽(yáng)，自號(hào)醉吟先生、香山居士。其詩(shī)政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人重的佼佼者，
所作對(duì)后世影響甚大。
</p>
<h4>注釋</h4>
<p>
(1)據(jù)《樂(lè)府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。
又名《望江南》、《夢(mèng)江南》等。分單調(diào)、雙調(diào)兩體。單調(diào)二十七字，雙調(diào)五十四字，
皆平韻。
(2)諳（音安）：熟悉。
(3)藍(lán)：藍(lán)草，其葉可制青綠染料。
</p>
<h4>品評(píng)</h4>
<p>
此詞寫(xiě)江南春色，首句“江南好”，以一個(gè)既淺切又圓活的“好”字，攝盡江南的種種佳處，
而作者的贊頌之意與向往之情也盡寓其中。同時(shí)，唯因“好”之已甚，方能“憶”之不休，因此，
詞句又已暗逗結(jié)句“能不憶江南”，并與之相關(guān)闔。此句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”，
并非得之傳聞，而是作者出牧杭州時(shí)的親身體驗(yàn)與親身感受。這就既落實(shí)了“好”字，又照應(yīng)了“憶”字，
不失為勾通一篇意脈的精彩筆墨。三兩句對(duì)江南之“好”進(jìn)行形象化的演繹，突出渲染紅花、江水紅綠相映
的明艷色彩，給人以光彩奪目的強(qiáng)烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者
善于著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽(yáng)的作者對(duì)江南春色的無(wú)限贊嘆與懷念，又造成一種悠遠(yuǎn)而又
深長(zhǎng)的韻味，把讀者帶入余情搖漾的境界中。
</p>
</body>
</html>示為
盒模型：
(1)border 相關(guān)的屬性：
border-style 屬性是用來(lái)設(shè)置邊框樣式的，我們可以直接使用 border-style 來(lái)設(shè)置四個(gè)邊框的樣式，也可以分別設(shè)置上下左右四個(gè)邊框的屬性。
我們來(lái)舉個(gè)例子吧！
我們?cè)?body 標(biāo)簽中添加一對(duì)段落標(biāo)簽。將段落元素邊框的上、右、下、左四個(gè)部分的邊框類(lèi)型分別設(shè)置為實(shí)線(xiàn)、點(diǎn)狀、虛線(xiàn)和雙線(xiàn)。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}
</style>
</head>
<body>
<p>
王耶浪Web開(kāi)發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（2）border-width 屬性：
border-width 屬性是用來(lái)設(shè)置邊框?qū)挾鹊模覀兛梢灾苯邮褂?border-width 來(lái)設(shè)置四個(gè)邊框的寬度，也可以分別設(shè)置上下左右四個(gè)邊框的屬性。
例子，
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 6px;
}
</style>
</head>
<body>
<p>
王耶浪Web開(kāi)發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（3）border-color 屬性：
border-color 屬性是用來(lái)設(shè)置邊框顏色的，我們可以直接使用 border-color 來(lái)設(shè)置四個(gè)邊框的寬度，也可以分別設(shè)置上下左右四個(gè)邊框的屬性。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
width: 420px;
height: 200px;
border: 1px solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
</style>
</head>
<body>
<p>
王耶浪Web開(kāi)發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（4）border 屬性和 padding 屬性，以及使用這兩個(gè)屬性做練習(xí)：
border 是邊框?qū)傩裕菑?fù)合屬性，其用法如下所示：
border: 上右下左的值;
border-top: 上邊框值;
border-right: 右邊框值;
border-bottom: 下邊框值;
border-left: 左邊框值;padding 屬性是一個(gè)復(fù)合屬性，代表我們盒子模型中的填充，也就是內(nèi)容區(qū)域外部的空白區(qū)域。
其使用格式如下所示：
padding: 上右下左;
padding-top: 頂部填充值;
padding-left: 左邊填充值;
padding-right: 右邊填充值;
padding-bottom: 底部填充值;例子，
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top: thin solid red;
border-right: medium dotted green;
border-bottom: dashed thick blue;
border-left: double 6px yellow;
padding: 10px;
}
</style>
</head>
<body>
<p>
王耶浪Web開(kāi)發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（5）margin 屬性：
margin 屬性是用來(lái)設(shè)置元素的外邊距：
使用格式：
margin: 上邊距 右邊距 下邊距 左邊距;也可以省略寫(xiě)。
當(dāng)左右邊距值相同時(shí)，寫(xiě)法如下：
margin: 上邊距 左右邊距 下邊距;當(dāng)上下邊距值相同，左右邊距值相同時(shí)，寫(xiě)法如下：
margin: 上下邊距 左右邊距;當(dāng)上下左右邊距值均相同時(shí)，寫(xiě)法如下：
margin: 屬性值;從上面的內(nèi)容，我們可以看出 margin 屬性是個(gè)復(fù)合屬性，我們可以分開(kāi)設(shè)置上下左右的邊距，寫(xiě)法如下：
/*上邊距*/
margin-top: 屬性值;
/*左邊距*/
margin-left: 屬性值;
/*右邊距*/
margin-right: 屬性值;
/*下邊距*/
margin-bottom: 屬性值;例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid blue;
}
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>王耶浪Web開(kāi)發(fā)學(xué)習(xí)筆記</p>
</div>
</body>
</html>顯示為，
margin 屬性來(lái)改變 p 元素相對(duì)于 div 元素的位置。修改代碼如下：
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
margin: 25px 50px;
}顯示為，
（6）display 的常用屬性：
display 屬性可以用來(lái)設(shè)置元素在頁(yè)面上的排列方式，也可用來(lái)隱藏元素。
display 屬性值的說(shuō)明如下表所示。
屬性值 | 說(shuō)明 |
block | 元素以塊級(jí)方式展示。 |
inline | 元素以?xún)?nèi)聯(lián)方式展示。 |
inline-block | 元素以?xún)?nèi)聯(lián)塊的方式展示。 |
none | 隱藏元素。 |
block 屬性值可以讓行內(nèi)元素以塊級(jí)元素的方式顯示在頁(yè)面上。
其使用格式如下：
display: block;還記得前面學(xué)過(guò)的行內(nèi)元素的概念嗎？ 行內(nèi)元素就是可以和其他元素同處一行的元素，例如 span 標(biāo)簽元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>王耶浪</span><span>Web開(kāi)發(fā)學(xué)習(xí)筆記</span>
</body>
</html>顯示為，
原本 span 標(biāo)簽是行內(nèi)元素，卻因?yàn)樵O(shè)置 display: block; 導(dǎo)致「王耶浪」與「Web開(kāi)發(fā)學(xué)習(xí)筆記」分開(kāi)了。
inline 屬性值可以讓像 div 這樣的霸道塊，接納其他元素來(lái)自己的地盤(pán)。
其使用格式如下：
display: inline;例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>王耶浪</div>
<div>Web開(kāi)發(fā)學(xué)習(xí)筆記</div>
</body>
</html>顯示為，
塊內(nèi)元素和行內(nèi)元素有其獨(dú)特的優(yōu)勢(shì)，在某些情況下，我們想讓一個(gè)元素既具有塊內(nèi)元素的特點(diǎn)，又具備行內(nèi)元素的特點(diǎn)。這就要請(qǐng)出 inline-block 屬性值來(lái)施展這個(gè)魔法了。
其使用格式如下：
display: inline-block;哪些情況下可以用到這個(gè)屬性？
比如，用 a 標(biāo)簽來(lái)實(shí)現(xiàn)導(dǎo)航的時(shí)候，a 標(biāo)簽可以讓元素在一行顯示，但若想給每個(gè) a 標(biāo)簽加上高和寬時(shí)發(fā)現(xiàn)沒(méi)有任何效果。這時(shí)用 display: inline-block，a就具備塊的特性了。
例子,
eb前端css支持6種定位模型
靜態(tài)
絕對(duì)
固定
相對(duì)
浮動(dòng)
相對(duì)浮動(dòng)
設(shè)定位置
position:static;可以取消元素的定位設(shè)置,使之恢復(fù)為原先在常規(guī)流中的顯示方式.static是默認(rèn)值.
position:relative;可以使元素相對(duì)于常規(guī)流的位置偏移一定距離.
position:absolute;可以使元素相對(duì)于常規(guī)流的位置或最近定位祖先元素的位置偏移一定的距離.
position:fixed;可以使元素相對(duì)于窗口偏移一定的距離.
z-index可以設(shè)置元素的堆疊順序,數(shù)值越大,元素越靠上.
如果有想從事前端這行不知道怎么學(xué)習(xí)的，或者對(duì)于前端學(xué)習(xí)效率很慢的可以來(lái)我的群570946165，群文件里有全套系統(tǒng)學(xué)習(xí)資料，也問(wèn)題可以隨時(shí)問(wèn)！
最近定位祖先元素
如果設(shè)定位置的元素沒(méi)有定位祖先元素,那么<body>就成為定位祖先元素,換言之,<body>是默認(rèn)設(shè)定位置元素.
最近定位元素必須是有效的祖先元素(relative|absolute|fixed),css不支持相對(duì)于文檔中任意元素進(jìn)行定位的方法.
position:relative;是一個(gè)非常好的創(chuàng)建定位祖先元素的方法,因?yàn)樗粫?huì)離開(kāi)常規(guī)流.使用這種方法,能夠創(chuàng)建出既保持常規(guī)流又實(shí)現(xiàn)絕對(duì)定位的布局
原子顯示
設(shè)定了位置的元素是原子顯示的,這意味著它的靜態(tài)后代元素,行內(nèi)內(nèi)容和背景之間不可能出現(xiàn)外部元素.通過(guò)使用相對(duì)定位,絕對(duì)定位和固定定位模式,就可以將元素設(shè)置為原子顯示,設(shè)置為overflow:scroll|auto的塊級(jí)元素也是原子顯示的
而沒(méi)設(shè)定位置的靜態(tài)塊級(jí),當(dāng)發(fā)生重疊時(shí),他們的行內(nèi)內(nèi)容不會(huì)重疊,但是他們的邊框和背景
會(huì)發(fā)生重疊,但文字不會(huì).z-index適用于所有元素,默認(rèn)auto
z-index不是全局屬性,而是相對(duì)于設(shè)置了數(shù)字值z(mì)-index的最近定位祖先元素而定.根元素html會(huì)創(chuàng)建根堆疊上下文.每一個(gè)指定數(shù)字值z(mì)-index的設(shè)定位置元素都會(huì)創(chuàng)建一個(gè)本地的局部的堆疊上下文.
靜態(tài)定位元素按照文檔出現(xiàn)順序從后往前進(jìn)行堆疊.
設(shè)定位置元素忽略文檔元素出現(xiàn)順序,而是根據(jù)z-index值由小到大的順序從后往前堆疊.負(fù)值的設(shè)定位置元素位于靜態(tài)定位元素和非設(shè)定位置浮動(dòng)元素之下
一 web前端靜態(tài)定位模型
position:static;默認(rèn)是static;
靜態(tài)元素的開(kāi)始位置由前一個(gè)靜態(tài)元素的位置確定.靜態(tài)元素的尺寸,內(nèi)邊距,邊框,和外邊距
決定了下一個(gè)元素的開(kāi)始位置.
相鄰元素的垂直外邊距會(huì)合并在一起,最終的外邊距是兩個(gè)相鄰元素外邊距的較大值
將左右外邊距設(shè)置為auto,可以使已設(shè)定尺寸的靜態(tài)塊級(jí)元素居中顯示.
二 web前端絕對(duì)定位模型
position:absolute;百分?jǐn)?shù)是相對(duì)于最近定位祖先元素的尺寸而言,而非父元素的尺寸.
將元素的left,right,top,bottom,設(shè)置為auto,可以使它恢復(fù)原先在常規(guī)流中的位置.
與浮動(dòng)元素不同,絕對(duì)元素不會(huì)自動(dòng)排列.不會(huì)受其他元素影響,也不會(huì)影響別的元素.
如果一個(gè)元素的所有子元素都設(shè)置為絕對(duì)定位,那么它的高度會(huì)變?yōu)?span>0,所有它的子元素都離開(kāi)了常規(guī)流.
如果不存在定位祖先元素,會(huì)根據(jù)<body>來(lái)定位
絕對(duì)定位居中,一般元素
對(duì)于靜態(tài)行內(nèi)元素,如em,strong,span等,但是不包括行內(nèi)可替換元素(input,img,textarea等),使用絕對(duì)定位模式absolute時(shí),width和right可以使用為了要居中,需要額外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,這里left和right必須是0才行.
三 固定定位模型
position:fixed;可以將任意元素變?yōu)楣潭ㄎ恢迷?/p>
切記:固定定位的元素位置是相對(duì)于窗口而定,而非相對(duì)于最近定位祖先`,而且元素不會(huì)隨頁(yè)面滾動(dòng)而滾動(dòng).
因?yàn)樗窍鄬?duì)頁(yè)面來(lái)定位,所以不需要最近定位祖先
設(shè)置時(shí)最好以top,left來(lái)進(jìn)行偏移定位,當(dāng)同時(shí)設(shè)置top,left,bottom,right時(shí),會(huì)優(yōu)先使用top和left的值,只有當(dāng)top和left不存在時(shí),bottom和right才會(huì)生效
四 web前端相對(duì)定位
position:relative;
使用left和top來(lái)改變?cè)匚恢?left和top默認(rèn)是auto,auto會(huì)使相對(duì)定位元素保持在常規(guī)流中原有位置.
使用float可以使一些元素成為浮動(dòng)元素,通過(guò)relative可以浮動(dòng)元素設(shè)置為相對(duì)定位,相對(duì)浮動(dòng)元素仍然位于浮動(dòng)元素所在的常規(guī)流中,可以使用left和top設(shè)置它在流中的偏移位置.
任何元素都可以設(shè)置position:relative;從而其絕對(duì)定位的后代元素都可以相對(duì)于它進(jìn)行定位.
使用float:none;默認(rèn)是none,可以覆蓋元素的其他浮動(dòng)規(guī)則,也可以避免繼承浮動(dòng)
使用float:left;和float:right;可以使元素離開(kāi)常規(guī)流.
五 web前端浮動(dòng)定位與復(fù)位
浮動(dòng)元素不會(huì)影響塊級(jí)框的位置,而只影響行內(nèi)元素
clear:left;clear:right;clear;both;
任意元素都可以設(shè)置為浮動(dòng)元素,clear適用于表格,塊級(jí)元素和浮動(dòng)元素
clear 不適用于行內(nèi),絕對(duì)定位或固定定位的元素、
如果有想從事前端這行不知道怎么學(xué)習(xí)的，或者對(duì)于javascript學(xué)習(xí)效率很慢的可以來(lái)我的群570946165，群文件里有全套系統(tǒng)學(xué)習(xí)資料，也問(wèn)題可以隨時(shí)問(wèn)！
六 web前端相對(duì)浮動(dòng)定位
只有positon:relative;和position:static;適用于浮動(dòng)元素.而設(shè)定為absolute和fixed時(shí),顯示結(jié)果是不確定的.
零散
在css中,如果參數(shù)值是0的話(huà),不要加單位,
瀏覽器在渲染一個(gè)元素內(nèi)容之前,會(huì)先渲染它的框,順序是從背景顏色開(kāi)始,然后是背景圖片,接著是邊框,最后,瀏覽器會(huì)在框之上渲染框的內(nèi)容
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
