概述
position屬性
position屬性列表
- absolute 屬性
- fixed 屬性
- relative屬性
- static屬性
- inherit 屬性
display屬性
display屬性列表
- none 屬性
- block 屬性
- inline 屬性
- inline-block 屬性
- flex屬性
flex 布局
- 基本概念
- flex 布局子元素的屬性
- flex 子元素可用屬性
float屬性
定義和用法
float屬性列表
- left
- right
- none
- inherit
最新公司分配任務(wù)也小程序和部分公眾號任務(wù)，寫了好多布局藏斩，可是呢玉控，菜鳥就是菜鳥，好多東西都不是很了解妇拯，因此特地寫篇文章詳細(xì)學(xué)習(xí)下css之布局
概述
這里我們詳細(xì)討論css布局的position墩朦，display立美，float三種布局的屬性癣籽，以及每個(gè)布局對父標(biāo)簽和子標(biāo)簽的影響脖苏，以及父子標(biāo)簽采用不同的布局之間的影響擂啥。
position屬性
position屬性列表
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位帆阳。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定哺壶。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位蜒谤。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定山宾。 |
| relative | 生成相對定位的元素，相對于其正常位置進(jìn)行定位鳍徽。因此资锰，"left:20" 會向元素的 LEFT 位置添加 20 像素。該屬性只受left和top屬性影響 |
| static | 默認(rèn)值阶祭。沒有定位绷杜，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值濒募。 |
absolute 屬性
生成絕對定位的元素鞭盟，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定瑰剃。
這里我們用positon的absolute屬性齿诉，那么必須關(guān)注其父類的屬性，因?yàn)樵搶傩允桥c父類有關(guān)系晌姚。
這里最關(guān)鍵的是相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位粤剧。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
.divbg{
position:fixed;
left:100px;
margin-left:100px;
width:300px;
height:300px;
background-color:red;
}
body{
background:blue;
}
</style>
</head>
<body >
<div class="divbg">
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置挥唠。下面的標(biāo)題距離頁面左側(cè) 100px抵恋，距離頁面頂部 150px。</p>
</div>
</body>
</html>
測試結(jié)果
這個(gè)是父標(biāo)簽的position是fixed的宝磨，h2的相對位置是針對div來講的弧关。
如果把父標(biāo)簽的positon去掉。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
.divbg{
left:100px;
margin-left:100px;
width:300px;
height:300px;
background-color:red;
}
body{
background:blue;
}
</style>
</head>
<body >
<div class="divbg">
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
<p>通過絕對定位懊烤，元素可以放置到頁面上的任何位置梯醒。下面的標(biāo)題距離頁面左側(cè) 100px，距離頁面頂部 150px腌紧。</p>
</div>
</body>
</html>
測試結(jié)果
由于我們把div的position的屬性去掉了茸习，布局也發(fā)生變化了。
這時(shí)候h2的布局是針對整個(gè)窗口來說的壁肋。
注意：position的absolute受父類影響号胚，影響的是自身的布局籽慢。
position是absolute屬性修飾的標(biāo)簽有四個(gè)，left,top,bottom,right猫胁。要是這四個(gè)屬性沒有設(shè)置默認(rèn)的是auto箱亿，不是0。(這里暫時(shí)就這么理解吧弃秆，說的不準(zhǔn)確)
auto就是根據(jù)字內(nèi)容的大小自動適配其大小届惋，內(nèi)容是包裹的,auto的屬性可以默認(rèn)不寫。
四個(gè)屬性都有值
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
background-color:yellow;
right:30px;
bottom:20px;
left:100px;
top:150px
}
body{
background:blue;
}
</style>
</head>
<body >
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
</div>
</body>
</html>
要是我們?nèi)サ魊ight 和bottom屬性
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
background-color:yellow;
left:100px;
top:150px
}
body{
background:blue;
}
</style>
</head>
<body >
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
</div>
</body>
</html>
測試結(jié)果是
top right bottom left 四個(gè)屬性是針對父類（第一個(gè)不是static屬性的父類）來說的菠赚。
fixed 屬性
生成絕對定位的元素脑豹，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定衡查。
其實(shí)這個(gè)屬性比較簡單瘩欺，就是相對于窗口來說的“枭可以這么理解俱饿，父類就是窗口。
<html>
<head>
<style type="text/css">
.three{
position: absolute;
background-color:yellow;
right:30px;
bottom:20px;
left:20px;
top:30px;
}
p.one
{
position:fixed;
left:20px;
top:30px;
}
p.two
{
position:fixed;
top:30px;
right:20px;
}
</style>
</head>
<body>
<div class="three">
<p class="one">一些文本塌忽。</p>
<p class="two">更多的文本拍埠。</p>
</div>
</body>
</html>
這里的left，bottom砚婆，right械拍，top是針對窗口來講的。
注意：position的fixed只受窗口影響装盯，影響的是自身的布局。窗口是固定不變的甲馋。
relative屬性
生成相對定位的元素埂奈，相對于其正常位置進(jìn)行定位。因此定躏，"left:20" 會向元素的 LEFT 位置添加 20 像素账磺。該屬性只受left和top屬性影響。
基本使用
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:20px;
top:30px;
background:red;
}
body{
background:blue;
}
</style>
</head>
<body>
<h2 class="pos_left">這個(gè)標(biāo)題相對于其正常位置向左移動</h2>
</body>
</html>
測試結(jié)果
我們發(fā)現(xiàn)H2標(biāo)簽的內(nèi)容距離left 和top分別都有移動痊远，如果去掉left和top屬性如下
其實(shí)position的relative是針對自身來說的垮抗，相對于自身原來的位置做的偏移。
注意碧聪，這里position的relative屬性是針對自身的冒版，不是針對父類的。而自身標(biāo)簽的邊框大小是受width和height影響的逞姿。
static屬性
默認(rèn)值辞嗡。沒有定位闻书，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）蛾派。
這是默認(rèn)值，其實(shí)每個(gè)標(biāo)簽都是含有position屬性的，只是這個(gè)屬性要是static可以不用添加冀值。但是static屬性會導(dǎo)致top，bottom,left,right和z-index 屬性不生效
不生效的屬性舉例
<html>
<head>
<style type="text/css">
. pos_right{
top:30px;
left:30px
}
body{
background:red;
}
</style>
</head>
<body>
<h2 class="pos_right">這個(gè)標(biāo)題相對于其正常位置向右移動</h2>
</body>
</html>
該屬性就是正常布局政敢，位置是根據(jù)父類規(guī)定方向進(jìn)行布局廷区。
inherit 屬性
規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
這個(gè)屬性感覺用的很少丰泊，不過就算是少我們也應(yīng)該知道其作用吧达址。
繼承么？假設(shè)父類的positon是absolute趁耗，那么該類屬性就是absolute沉唠，同理假設(shè)父類的positon屬性是fixed,那么該類屬性就是fixed。
<html>
<head>
<style type="text/css">
.three{
position: fixed;
background-color:yellow;
right:20px;
bottom:20px;
left:20px;
top:20px;
}
p.one
{
padding:0px;
margin:0px;
position: inherit;
left:20px;
top:30px;
background:blue;
}
p.two
{
padding:0px;
margin:0px;
position: inherit;
right:20px;
background:blue;
}
body{
background:red
}
</style>
</head>
<body>
<div class="three">
<p class="one">一些文本苛败。</p>
<p class="two">更多的文本满葛。</p>
</div>
</body>
</html>
這里我們能看出來不單單繼承了positon屬性，其他屬性也繼承了罢屈。但是我們可以在該屬性覆蓋父類屬性的值嘀韧。
display屬性
display 屬性規(guī)定元素應(yīng)該生成的框的類型。
注釋：如果規(guī)定了 !DOCTYPE缠捌，則 Internet Explorer 8 （以及更高版本）支持屬性值 "inline-table"锄贷、"run-in"、"table"曼月、"table-caption"谊却、"table-cell"、"table-column"哑芹、"table-column-group"炎辨、"table-row"、"table-row-group"聪姿、以及 "inherit"碴萧。
這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。對于 HTML 等文檔類型末购，如果使用 display 不謹(jǐn)慎會很危險(xiǎn)破喻，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對于 XML盟榴，由于 XML 沒有內(nèi)置的這種層次結(jié)構(gòu)曹质，所有 display 是絕對必要的。
注釋：CSS2 中有值 compact 和 marker，不過由于缺乏廣泛的支持咆繁，已經(jīng)從 CSS2.1 中去除了讳推。
display屬性涉及block 和inline兩個(gè)概念
block和inline這兩個(gè)概念是簡略的說法，完整確切的說應(yīng)該是 block-level elements (塊級元素) 和 inline elements (內(nèi)聯(lián)元素)玩般。block元素通常被現(xiàn)實(shí)為獨(dú)立的一塊银觅，會單獨(dú)換一行；inline元素則前后不會產(chǎn)生換行坏为，一系列inline元素都在一行內(nèi)顯示究驴，直到該行排滿。
大體來說HTML元素各有其自身的布局級別（block元素還是inline元素）：
- 常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等匀伏。
- 常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等洒忧。
display屬性列表
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素够颠，此元素前后會帶有換行符熙侍。 |
| inline | 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素履磨，元素前后沒有換行符蛉抓。 |
| inline-block | 行內(nèi)塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作為列表顯示剃诅。 |
| run-in | 此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示巷送。 |
| compact | CSS 中有值 compact，不過由于缺乏廣泛支持矛辕，已經(jīng)從 CSS2.1 中刪除笑跛。 |
| marker | CSS 中有值 marker，不過由于缺乏廣泛支持聊品，已經(jīng)從 CSS2.1 中刪除飞蹂。 |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符杨刨。 |
| inline-table | 此元素會作為內(nèi)聯(lián)表格來顯示（類似 <table>）晤柄，表格前后沒有換行符。 |
| table-row-group | 此元素會作為一個(gè)或多個(gè)行的分組來顯示（類似 <tbody>）妖胀。 |
| table-header-group | 此元素會作為一個(gè)或多個(gè)行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個(gè)或多個(gè)行的分組來顯示（類似 <tfoot>）惠勒。 |
| table-row | 此元素會作為一個(gè)表格行顯示（類似 <tr>）赚抡。 |
| table-column-group | 此元素會作為一個(gè)或多個(gè)列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個(gè)單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個(gè)表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個(gè)表格標(biāo)題顯示（類似 <caption>） |
| inherit | 規(guī)定應(yīng)該從父元素繼承 display 屬性的值纠屋。 |
| flex | 2009年涂臣，W3C提出了一種新的方案—-Flex布局，可以簡便、完整赁遗、響應(yīng)式地實(shí)現(xiàn)各種頁面布局署辉。目前，它已經(jīng)得到了所有瀏覽器的支持岩四，這意味著哭尝，現(xiàn)在就能很安全地使用這項(xiàng)功能。 |
上面屬性比較多剖煌，我們依次的將上述屬性做個(gè)簡單的demo來測試材鹦。
none屬性
如果display設(shè)置值死none，那么此元素不會被顯示耕姊。
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
body{background:red}
</style>
</head>
<body>
<p>本例中的樣式表把段落元素設(shè)置為內(nèi)聯(lián)元素桶唐。</p>
<p>而 div 元素不會顯示出來！</p>
<div>div 元素的內(nèi)容不會顯示出來茉兰！</div>
</body>
</html>
就是將元素隱藏尤泽，不占用文檔空間
block 屬性
此元素將顯示為塊級元素，此元素前后會帶有換行符规脸。
<html>
<head>
<style type="text/css">
span
{
display: block
}
body{
background:red
}
</style>
</head>
<body>
<span>本例中的樣式表把 span 元素設(shè)置為塊級元素坯约。</span>
<span>兩個(gè) span 元素之間產(chǎn)生了一個(gè)換行行為。</span>
</body>
</html>
聲明為block就是可以讓元素?fù)Q行了
block特性
- 使元素變成塊級元素燃辖，獨(dú)占一行鬼店，在不設(shè)置自己的寬度的情況下，塊級元素會默認(rèn)填滿父級元素的寬度.
- 能夠改變元素的height黔龟，width的值.
- 可以設(shè)置padding妇智，margin的各個(gè)屬性值，top氏身，left巍棱，bottom，right都能夠產(chǎn)生邊距效果.
inline屬性
默認(rèn)蛋欣。此元素會被顯示為內(nèi)聯(lián)元素航徙，元素前后沒有換行符。
這個(gè)屬性是默認(rèn)屬性陷虎，默認(rèn)元素是依次排列的到踏。
這個(gè)可以參考 none屬性的例子。不做介紹尚猿。這都是常用的比較簡單的屬性啦窝稿。
inline特性
- 使元素變成行內(nèi)元素，擁有行內(nèi)元素的特性凿掂，即可以與其他行內(nèi)元素共享一行伴榔，不會獨(dú)占一行.
- 不能更改元素的height，width的值，大小由內(nèi)容撐開.
- 可以使用padding踪少，margin的left和right產(chǎn)生邊距效果塘安，但是top和bottom就不行.
inline-block
行內(nèi)塊元素。（CSS2.1 新增的值）
inline-block特性
- 使元素變成行內(nèi)元素援奢，擁有行內(nèi)元素的特性兼犯，即可以與其他行內(nèi)元素共享一行，不會獨(dú)占一行.
- 能夠改變元素的height萝究，width的值.
- 可以設(shè)置padding免都，margin的各個(gè)屬性值，top帆竹，left绕娘，bottom，right都能夠產(chǎn)生邊距效果.
測試代碼
<html>
<head>
<style type="text/css">
div {display: inline-block}
.one{
height:100px;
background:red;
padding:0px;
margin:0px;
width:200px;
}
.two{
background:blue;
padding:0px;
margin:0px;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
<p>換行了</p>
</body>
</html>
[這里有篇文章講解inline-block和float之間的區(qū)別]
flex 屬性
2009年栽连，W3C提出了一種新的方案—-Flex布局险领，可以簡便、完整秒紧、響應(yīng)式地實(shí)現(xiàn)各種頁面布局绢陌。目前，它已經(jīng)得到了所有瀏覽器的支持熔恢，這意味著脐湾，現(xiàn)在就能很安全地使用這項(xiàng)功能。
Flex是Flexible Box的縮寫叙淌，意為”彈性布局”秤掌，用來為盒狀模型提供最大的靈活性。
flex布局可以是塊布局也可以是行內(nèi)布局
- 行內(nèi)布局 display: inline-flex;
- 塊布局： display: flex;
注意鹰霍，設(shè)為Flex布局以后闻鉴，子元素的float、clear和vertical-align屬性將失效茂洒。
flex 布局
基本概念
采用Flex布局的元素孟岛，稱為Flex容器（flex container），簡稱”容器”督勺。它的所有子元素自動成為容器成員渠羞，稱為Flex項(xiàng)目（flex item），簡稱”項(xiàng)目”智哀。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）堵未。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end盏触；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)水平排列赞辩。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size雌芽，占據(jù)的交叉軸空間叫做cross size。
flex 布局子元素的屬性
- flex-direction 設(shè)置主軸和以及方向
- flex-wrap 設(shè)置子元素布局換行情況
- flex-flow 該屬性是flex-direction 和flex-wrap 縮寫
- justify-content 設(shè)置子元素在主軸的對其方式
- align-items 定義子元素在交叉軸的對齊方式
- align-content 定義有多跟主軸的對齊方式辨嗽。
flex-direction屬性
他有四個(gè)值
- row（默認(rèn)值）：主軸為水平方向世落，起點(diǎn)在左端。
- row-reverse：主軸為水平方向糟需，起點(diǎn)在右端屉佳。
- column：主軸為垂直方向，起點(diǎn)在上沿洲押。
-
column-reverse：主軸為垂直方向武花，起點(diǎn)在下沿。
flex-wrap屬性
默認(rèn)情況下杈帐，項(xiàng)目都排在一條線（又稱”軸線”）上体箕。flex-wrap屬性定義，如果一條軸線排不下挑童，如何換行累铅。
還有三個(gè)值
- nowrap 不換行（默認(rèn))
- wrap 換行，第一行在上方一次向下
- wrap-reverse; 換行站叼，第一行在下方
假設(shè)一共有14個(gè)元素
flex-flow 屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式娃兽，默認(rèn)值為row nowrap。
.box{
flex-flow:row wrap;
}
justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式尽楔。
有五個(gè)值
- flex-start
- flex-end
- center
- space-between
-
space-around;
align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對齊投储。
該屬性的值有五個(gè)
- flex-start 交叉軸的起點(diǎn)對齊
- flex-end 交叉軸的終點(diǎn)對齊
- center 交叉軸的中點(diǎn)對齊
- baseline 項(xiàng)目的第一行文字的基線對齊
-
stretch 如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
主軸是row橫向排列翔试，交叉軸是column縱向排列
這里需要注意的是默認(rèn)值是stretch轻要，會將子元素拉伸，因此垦缅，這里想要子元素不變形冲泥，那么必須要設(shè)置子元素的bounds了。
align-content屬性
- flex-start：與交叉軸的起點(diǎn)對齊壁涎。
- flex-end：與交叉軸的終點(diǎn)對齊凡恍。
- center：與交叉軸的中點(diǎn)對齊。
- space-between：與交叉軸兩端對齊怔球，軸線之間的間隔平均分布嚼酝。
- space-around：每根軸線兩側(cè)的間隔都相等。所以竟坛，軸線之間的間隔比軸線與邊框的間隔大一倍闽巩。
- stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸钧舌。
flex 子元素可用屬性
flex 子元素可以使用的元素有下列6個(gè)
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order屬性
order屬性定義自身的排列順序。數(shù)值越小涎跨，排列越靠前洼冻，默認(rèn)0。
.item{
order:1
}
測試代碼
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
order:1;
}
.two{
padding:0px;
margin:0px;
background:red;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例隅很，默認(rèn)為0撞牢，即如果存在剩余空間，也不放大叔营。
.item{
flex-grow:1;
}
如果所有項(xiàng)目的flex-grow屬性都為1屋彪，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2绒尊，其他項(xiàng)目都為1畜挥，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
測試代碼
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
}
.two{
padding:0px;
margin:0px;
background:red;
flex-grow:1;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例垒酬，默認(rèn)為1砰嘁，即如果空間不足，該項(xiàng)目將縮小勘究。
.item{
flex-shrink:1;
}
如果所有項(xiàng)目的flex-shrink屬性都為1矮湘，當(dāng)空間不足時(shí)，都將等比例縮小口糕。如果一個(gè)項(xiàng)目的flex-shrink屬性為0缅阳，其他項(xiàng)目都為1，則空間不足時(shí)景描，前者不縮小十办。
負(fù)值對該屬性無效。
測試代碼
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
flex-shrink:0;
}
.two{
padding:0px;
margin:0px;
background:red;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
<div class="two">inline-block 元素two</div>
<div class="two">inline-block 元素two</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前超棺，項(xiàng)目占據(jù)的主軸空間（main size）向族。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間棠绘。它的默認(rèn)值為auto件相，即項(xiàng)目的本來大小。
.item{
flex-basis:320;
}
測試代碼
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
flex-basis:30px;
}
.two{
padding:0px;
margin:0px;
background:red;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫氧苍，默認(rèn)值為0 1 auto夜矗。后兩個(gè)屬性可選。
.item{
flex:none
}
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)让虐。
建議優(yōu)先使用這個(gè)屬性紊撕，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會推算相關(guān)值赡突。
align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性辩稽。默認(rèn)值為auto，表示繼承父元素的align-items屬性逞泄，如果沒有父元素拜效，則等同于stretch。
.item{
align-self:auto
}
該屬性有以下值
- auto
- flex-start
- flex-end
- center
- baseline
-
stretch
float屬性
定義和用法
float 屬性定義元素在哪個(gè)方向浮動紧憾。以往這個(gè)屬性總應(yīng)用于圖像到千，使文本圍繞在圖像周圍赴穗，不過在 CSS 中般眉，任何元素都可以浮動。浮動元素會生成一個(gè)塊級框柿汛，而不論它本身是何種元素络断。
如果浮動非替換元素项玛，則要指定一個(gè)明確的寬度襟沮；否則，它們會盡可能地窄净刮。
注釋：假如在一行之上只有極少的空間可供浮動元素淹父，那么這個(gè)元素會跳至下一行怎虫，這個(gè)過程會持續(xù)到某一行擁有足夠的空間為止。
該屬性屬于自身屬性蘸际。
| 值 | 描述 |
|---|---|
| left | 元素向左浮動粮彤。 |
| right | 元素向右浮動导坟。 |
| none | 默認(rèn)值惫周。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置喷橙。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 float 屬性的值贰逾。 |
left屬性
元素向左浮動似踱。
測試代碼
<html>
<head>
<style type="text/css">
.img
{
float:right;
background:red;
height:30px;
width:50px;
}
</style>
</head>
<body>
<p>在下面的段落中核芽，我們添加了一個(gè)樣式為 <b>float:right</b> 的圖像酵熙。結(jié)果是這個(gè)圖像會浮動到段落的右側(cè)匾二。</p>
<p>
<div class='img'></div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
right屬性
元素向右浮動皮璧。
用法同left屬性
none屬性
默認(rèn)值分飞。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置羡疗。
任何元素叨恨，不寫值都默認(rèn)是不float的挖垛。
inherit屬性
規(guī)定應(yīng)該從父元素繼承 float 屬性的值晕换。
position display float之間的關(guān)系
position display float 都是用于元素布局的闸准，但是與之有關(guān)系的元素各不相同夷家。例如position的absolute受父元素的影響敏释，而positon的relative只與自身有關(guān)系
| position | display | float | 父類 | 自身 | 子類 | 備注 |
|---|---|---|---|---|---|---|
| absolute | --- | --- | YES | NO | NO | 根據(jù)父類決定自己的位置 |
| fixed | --- | --- | NO | NO | NO | 至于窗口有關(guān) |
| relative | --- | --- | NO | YES | NO | 相對于自己的偏移 |
| static | --- | --- | NO | NO | NO | 默認(rèn)屬性 |
| inherit | --- | --- | YES | YES | NO | 是繼承關(guān)系义屏，因此與自身或者父類關(guān)系不明確 |
| --- | none | --- | NO | YES | NO | 修飾自己是否課件 |
| --- | block | --- | NO | YES | NO | 顯示為塊 |
| --- | inline | --- | NO | YES | NO | 默認(rèn)屬性 |
| --- | nline-block | --- | NO | YES | NO | |
| --- | flex | --- | NO | YES | YES | 該屬性配合一些屬性會影響子類的布局以及子類在flex單獨(dú)布局 |
| --- | --- | left | NO | YES | NO | 向左移動 |
| --- | --- | right | NO | YES | NO | 向右移動 |
| --- | --- | none | NO | NO | NO | 默認(rèn)屬性 |
| --- | --- | inherit | NO | YES | NO | 繼承父類的float屬性 |
position的默認(rèn)元素是static闽铐，
display的默認(rèn)元素是inline兄墅，
float 的默認(rèn)元素是none
