布局說明
基本布局屬性
Display（顯示）
display屬性設(shè)置一個元素應(yīng)如何顯示巨坊。
display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說此改，該元素不但被隱藏了趾撵，而且該元素原本占用的空間也會從頁面布局中消失
display:block-顯示為塊級元素
display:inline-顯示為內(nèi)聯(lián)元素
display:inline-block-顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)邊距等屬性
Visibility(可見)
visibility屬性指定一個元素應(yīng)可見還是隱藏
visibility:hidden可以隱藏某個元素带斑，但隱藏的元素仍需占用與未隱藏之前一樣的空間鼓寺。也就是說，該元素雖然被隱藏了勋磕，但仍然會影響布局。
visibility:collape一般的元素的表現(xiàn)與visibility:hidden一樣敢靡，也即其會占用空間挂滓。但如果該元素是與table相關(guān)的元素，列如table row啸胧、table column赶站、table column group幔虏、table column group等，其表現(xiàn)卻跟display:none一樣贝椿，也即其占用的空間會釋放想括。
Position（定位）
position屬性指定了元素的定位類型
1、staticHTML元素的默認值烙博，即沒有定位瑟蜈，遵循正常的文檔流對象
2、fixed固定定位元素的位置相對于瀏覽器窗口是固定位置
1渣窜、Fixed定位使元素的位置與文檔流無關(guān)铺根，因此不占據(jù)空間
2、Fixed定位的元素和其它元素重疊
// 右上角顯示
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
3乔宿、relative相對定位元素的定位時相對其正常位置
1位迂、移動相對定位元素，但它原本所占的空間不會改變
// 從元素的原始左側(cè)位置減去 20 像素详瑞。（左移20px）
h2.pos_left
{
position:relative;
left:-20px;
}
4掂林、absolute絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素坝橡，那么它的位置相對于html
1泻帮、absolute定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間
2刑顺、absolute定位的元素和其它元素重疊
5、sticky粘性定位基于用戶的滾動位置來定位
1饲常、粘性定位的元素是依賴于用戶的滾動，在postion:relative與position:fixed定位之間切換贝淤。它的行為就像position:relative;而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像position:fixed播聪；它會固定在目標(biāo)位置
// Top為0 的時候固定在那
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Overflow(溢出)
overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情
注意：overflow屬性值工作于指定高度的塊元素上
1朽基、visible內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外(默認值)
2离陶、hidden內(nèi)容會被修剪，并且其余內(nèi)容是不可見的
3招刨、 scroll內(nèi)容會被修剪霎俩，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容
4、auto如果內(nèi)容被修剪打却，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容
Float(浮動)
float會使元素向左或向右移動杉适，其周圍的元素也會重新排列。往往是用于圖像柳击，但它在布局時一樣非常有用猿推。使元素的位置與文檔流無關(guān)捌肴，因為不占據(jù)空間
// 圖片浮動顯示
.image-list {
float:left;
margin:5px
}
Clear（清除浮動）
clear屬性指定元素兩側(cè)不能出現(xiàn)浮動元素
元素浮動后蹬叭，周圍的元素會重新排列哭靖，為了避免這種情況，使用clear屬性
// text_line 元素左右兩邊不能出現(xiàn)浮動元素
.text_line
{
clear:both;
}
z-index（順序）
z-index設(shè)置元素的堆疊順序
可定義為一個值(整數(shù)數(shù)字),越大代表越置前试幽，如可定義為：z-index:9999筝蚕。若定義為-1铺坞，代表為最底層
flex布局 & grid布局
- flex布局
display: flex
display: inline-flex
Flex 布局是軸線布局，只能指定"項目"針對軸線的位置济榨，可以看作是一維布局坯沪。
參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html - grid布局
display: grid
display: inline-grid
Grid 布局則是將容器劃分成"行"和"列"擒滑，產(chǎn)生單元格腐晾，然后指定"項目所在"的單元格丐一，可以看作是二維布局藻糖。Grid 布局遠比 Flex 布局強大库车。
參考:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
圣杯布局 & 雙飛翼布局
左右兩欄固定寬度，中間部分自適應(yīng)的三欄布局柠衍，其原理差不多洋满，都有負邊距的應(yīng)用珍坊，就是middle的實現(xiàn)不一樣。
關(guān)于負邊距的理解： https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html.
- 圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.header {
width: 100%;
height: 30px;
background: red;
}
.content {
overflow: hidden;
padding: 0 100px;
}
.footer {
width: 100%;
height: 30px;
background: red;
}
.middle {
position:relative;
width: 100%;
float: left;
height: 80px;
background: green;
}
.left {
position:relative;
width: 100px;
float: left;
left:-100px;
height: 80px;
margin-left: -100%;
background: yellow;
}
.right {
position:relative;
width: 100px;
float: left;
right:-100px;
height: 80px;
margin-left: -100px;
background: pink
}
</style>
</head>
<body>
<div class="header">header-start header header header header header header-end</div>
<div class="content">
<div class="middle"> middle-start middle middle middle middle middle middle middle middle middle middle middle-end </div>
<div class="left">left-start left left left left left left left left left left left left left left left-end </div>
<div class="right"> right-start right-end</div>
</div>
<div class="footer"></div>
</body>
</html>
- 雙飛翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.header {
width: 100%;
height: 30px;
background: red;
}
.content {
overflow: hidden;
}
.footer {
width: 100%;
height: 30px;
background: red;
}
.middle {
width: 100%;
float: left;
}
.inner-middle{
height: 80px;
margin: 0 100px;
background: green;
}
.left {
width: 100px;
float: left;
height: 80px;
margin-left: -100%;
background: yellow;
}
.right {
width: 100px;
float: left;
height: 80px;
margin-left: -100px;
background: pink
}
</style>
</head>
<body>
<div class="header">header-start header header header header header header-end </div>
<div class="content">
<div class="middle">
<div class="inner-middle">middle-start middle middle middle middle middle middle middle middle middle middle middle-end</div>
</div>
<div class="left">left-start left left left left left left left left left left left left left left-end </div>
<div class="right"> right-start right-end</div>
</div>
<div class="footer"></div>
</body>
</html>
