CSS布局（Display、Position、Overflow、
布局说明
image.png
基本布局属性
Display（显示）
display属性设置一个元素应如何显示。
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
display:block-显示为块级元素
display:inline-显示为内联元素
display:inline-block-显示为内联块元素，表现为同行显示并可修改宽高内边距等属性
Visibility(可见)
visibility属性指定一个元素应可见还是隐藏
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
visibility:collape一般的元素的表现与visibility:hidden一样，也即其会占用空间。但如果该元素是与table相关的元素，列如table row、table column、table column group、table column group等，其表现却跟display:none一样，也即其占用的空间会释放。
Position（定位）
position属性指定了元素的定位类型
1、staticHTML元素的默认值，即没有定位，遵循正常的文档流对象
2、fixed固定定位元素的位置相对于浏览器窗口是固定位置
1、Fixed定位使元素的位置与文档流无关，因此不占据空间
2、Fixed定位的元素和其它元素重叠
// 右上角显示
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
3、relative相对定位元素的定位时相对其正常位置
1、移动相对定位元素，但它原本所占的空间不会改变
// 从元素的原始左侧位置减去 20 像素。（左移20px）
h2.pos_left
{
position:relative;
left:-20px;
}
4、absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
1、absolute定位使元素的位置与文档流无关，因此不占据空间
2、absolute定位的元素和其它元素重叠
5、sticky粘性定位基于用户的滚动位置来定位
1、粘性定位的元素是依赖于用户的滚动，在postion:relative与position:fixed定位之间切换。它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed；它会固定在目标位置
// Top为0 的时候固定在那
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Overflow(溢出)
overflow属性规定当内容溢出元素框时发生的事情
注意：overflow属性值工作于指定高度的块元素上
1、visible内容不会被修剪，会呈现在元素框之外(默认值)
2、hidden内容会被修剪，并且其余内容是不可见的
3、 scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
4、auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
Float(浮动)
float会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。使元素的位置与文档流无关，因为不占据空间
// 图片浮动显示
.image-list {
float:left;
margin:5px
}
Clear（清除浮动）
clear属性指定元素两侧不能出现浮动元素
元素浮动后，周围的元素会重新排列，为了避免这种情况，使用clear属性
// text_line 元素左右两边不能出现浮动元素
.text_line
{
clear:both;
}
z-index（顺序）
z-index设置元素的堆叠顺序
可定义为一个值(整数数字),越大代表越置前，如可定义为：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 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
参考:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
圣杯布局 & 双飞翼布局
左右两栏固定宽度，中间部分自适应的三栏布局，其原理差不多，都有负边距的应用，就是middle的实现不一样。
关于负边距的理解： 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>
image.png
- 双飞翼布局
<!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>
image.png
