CSS布局（Display、Position、Overflow、Float）

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