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