布局 - display+float+position 属性display 转换元素显示类型；float 浮动并排布局显

display 转换元素显示类型

块元素 Block

块级元素在网页中就是以块（Block）的形式显示，所谓块就是元素显示为矩形区域
默认情况下，块级元素都会在占据一行，按顺序从上至下排列
块级元素都可以定义自己的宽度和高度
块级元素一般都作为其它元素的容器，它可以容纳其它内联元素和其它块级元素，通常把这种容器比喻为一个盒子
常见块级元素：div p ul ol dl dt dd h1~h6
行内元素转换为块级元素的3种方法：A.display:block; B.position:absolute; C.float:left;

/* 块级元素具有的属性,块元素正是因为有了这两个属性的其中一个，才是块级元素 */
display:block;
display:list-item;

内联元素/行内元素 Inline

内联元素的表现形式始终以行内逐个进行显示，就是横着排列
内联元素没有自己的形状，不能定义它的宽度和高度，它显示的宽度和高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状
内联元素也会遵循盒模型基本规则，但是对于margin和padding的上下边距的属性值不生效，例如，span行内元素，只能设置左右边距，不能设置上下边距，即margin和padding的上下边设置无效
常见内联元素：a b em i span strong

/* 行内元素具有的属性 */
display:inline;

行内块元素 Inline-Block

内联块元素同时具备内联元素、块级元素的特点
常见内联块元素：img input

/* 行内块元素具有的属性 */
display:inline-block;

display:none; VS visibility:hidden;

相同点：都是隐藏元素的方法

不同点：

display:none; 不占位隐藏，会影响到布局，导致回流；visibility:hidden; 占位隐藏，只是CSS中样式不显示，导致重绘
display:none; 不具有继承属性，元素的display属性设为none其后整棵子树都不可见；visibility:hidden; 具有继承属性，父元素的visibility为hidden时，但是子元素的visibility为visible时，则子元素依旧可见，若子元素visibility不存在时，则子元素继承父类属性，显示为不可见。

回流与重绘：

回流：网页中元素的大小和位置发生改变时，需要重新对网页的结构进行布局，这个过程就被称为回流（网页最少会发生一次回流，网页最开始被渲染的时候），回流的情况例如：块元素大小和位置被改变、浮动后高度塌陷。
重绘：只改变样式，不会影响网页的布局，只改变样式，例如：改变字体的颜色，字体的粗细等，不会影响页面的布局。

display:inline-talble 和 display:table-cell 并排自适应排列

float 浮动

布局方式

float 浮动的意义1：并排布局显示块级元素
float 浮动的意义2：让文本环绕显示，环绕的就是浮动元素

div1{
    float: left ;
}
div2{
    float: right ;
}
div3{
    float: none ;
}

高度塌陷

高度塌陷：高度塌陷简单说就是，父级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .crashbox{
            border: 1px solid black;
        }
        .box1,.box2{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: green;
            float: left;
        }
        .box2{
            background: gray;
            float: left;
        }
        /* box1 和 box2 都浮动了，
        但是 box1 和 box2 的父元素 crashbox 没有设置 height 高度，
        则由于子元素都浮动了，导致其没有子元素撑开空间，出现了高度塌陷，变成了一黑线 */
        .adjacentbox{
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="crashbox">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="adjacentbox"></div>
</body>
</html>

高度塌陷.png

清楚浮动 - 关键代码

/* 方法一：在发生了高度塌陷的crashbox盒子，写死height高度 */
.crashbox{height:200px;}
/* 方法二：在紧邻兄弟元素处添加clear:both; */
.adjacentbox{clear:both;}
/* 方法三：在浮动元素的父元素盒子上添加overflow:hidden;该属性会将其设置为BFC，从而让浮动元素计算高度*/
.crashbox{overflow:hidden;}

清除浮动.png

/* 方式四（万能办法） - 
   通过::after 在因浮动元素导致高度塌陷的父元素上添加伪元素，
   添加的该伪元素是高度塌陷的子元素，
   因此也就是浮动元素的兄弟元素*/
.crashbox::after{
    /* 只是为了清楚浮动，因此伪元素不要添加任何内容 */
    content: "oo";
    /* 让伪元素具有块级属性，否则行内属性会围绕着浮动元素显示，就不能清除浮动 */
    display: block;
    /* 核心代码，让伪元素清楚左右两边的浮动 */
    clear: left;
    /* 不占据只是空间，也不让伪元素显示 */
    width: 0;
    height: 0;
    visibility:hidden;
}

属性	说明
clear:none;	允许浮动排列
clear:left;	不允许左边浮动排列
clear:right;	不允许右边浮动排列
clear:both;	不允许浮动排列

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置

position 定位

属性	说明	文档流	偏移（top left right bottom）时的参照物
position:static;	默认值	默认	不支持 top left right bottom 设置
position:absolute;	绝对定位	脱离	A. 当没有父元素或者父元素没有定位，参照物是浏览器的第一屏 B.有父元素且父元素有定位，参照物才会是父元素`子绝父相` C.设置该属性后，行内元素可以变成块级元素
position:relative;	相对定位	不脱离	自己的初始位置
position:fixed;	固定定位	脱离	浏览器的当前窗口 `适合广告位`
position:sticky;	粘性定位

position定位.gif

z-index 属性

当某个元素的 z-index 未显式定义或者被指定为 auto 时，该元素不会产生新的局部层叠上下文。当后面的元素使用了position属性，如果与前面的元素有重叠，就会覆盖前面的元素，那这个时候就根据z-index的取值决定哪一个显示在前，z-index取值可以为负数。

示例 1 导航栏吸顶及下拉列表三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .headline{
            display: block;
            text-align: center;
            font:normal bolder 20px/25px aria;
            margin: 5px;
        }
        .headline span{
            display: block;
            font:normal normal 15px/20px aria;
            text-align: left;
            text-indent: 2em;
        }
        nav{
            width: auto;
            height: 60px;
            background-color: lightgreen;
            padding-left: 20%;
            position: sticky;
            top: 0;
        }
        .navItem{
            width: 100px;
            text-align: center;
            line-height: 60px;
            font-weight: bold;
            color: white;
            float: left;
            position: relative;
        }
        .navItem span{
            display: inline-block;
            margin: 0 6px;
            border: 6px solid transparent;
            border-top: 6px solid white;
            position: relative;
            top: 3px;
        }
        .navItem:hover{
            background-color: plum;
            cursor:pointer;
        }
        .navItem:hover span{
            border-bottom: 6px solid white;
            border-top: 6px solid transparent;
            top: -3px;
        }
        .navItem ul{
            list-style-type: none;
            display: none;
        }
        .navItem:hover ul{
            display: block;
            position: absolute;
            top: 60px;
            min-width: 100%;
            white-space: nowrap;
            background-color: plum;
        }
        .navItem ul li{
            padding: 0 5px;
        }
        .navItem ul li:hover{
            background-color: white;
            color: plum;
        }
        article{
            padding: 20px;
            border-bottom: 1px solid lawngreen;
        }

    </style>
</head>
<body>
    <header class="headline">
        Headline News Advertisement<br/>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, praesentium error dolor maiores numquam magnam consequuntur eius? Sed illum dolorum perferendis minus fugit commodi, est veniam quae quia cum nam!</span>
    </header>
    <nav>
        <div class="navItem recommend">推荐<span></span>
            <ul>
                <li>lorem list</li>
                <li>lorem list</li>
                <li>lorem list</li>
            </ul>
        </div>
        <div class="navItem chosen">精选<span></span>
            <ul>
                <li>lorem lorem list</li>
                <li>lorem lorem list</li>
                <li>lorem list</li>
            </ul>
        </div>
        <div class="navItem favorate">收藏<span></span>
            <ul>
                <li>lorem list</li>
                <li>lorem list</li>
                <li>lorem list</li>
            </ul>
        </div>
        <div class="navItem customDefine">自定义<span></span>
            <ul>
                <li>lorem list</li>
                <li>lorem list</li>
                <li>lorem list</li>
            </ul>
        </div>
        <div style="clear: both;"></div>
    </nav>    
    <article>
        &emsp;&emsp;Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iusto, fugit ratione dicta tenetur veniam corrupti minus doloribus ad culpa rem dolore! Dolores, voluptas. Eum est corporis ea magni officiis.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aperiam quod accusamus nisi, doloribus obcaecati magni possimus quo consequatur. Maxime veritatis blanditiis quisquam? Blanditiis quam, sunt odit harum sit facilis!
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi quibusdam nihil voluptates harum a, ipsa dolorum omnis. Numquam laborum ipsam pariatur deleniti quibusdam dolor soluta, magnam explicabo reprehenderit, molestias id.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, perspiciatis qui. Eligendi, nihil temporibus provident soluta repellat vel explicabo recusandae quod perspiciatis vitae enim eum nulla deserunt sapiente ad dolor.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, sint at totam quibusdam assumenda, ratione distinctio amet quas ipsum illum quos odio enim ipsa rerum neque repellat! Officiis, rerum autem.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit pariatur quidem neque necessitatibus, possimus eos nam dignissimos autem quam accusamus iusto perspiciatis fuga amet repudiandae quos ipsum delectus quod impedit.
    </article>
    <article>
        &emsp;&emsp;Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iusto, fugit ratione dicta tenetur veniam corrupti minus doloribus ad culpa rem dolore! Dolores, voluptas. Eum est corporis ea magni officiis.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aperiam quod accusamus nisi, doloribus obcaecati magni possimus quo consequatur. Maxime veritatis blanditiis quisquam? Blanditiis quam, sunt odit harum sit facilis!
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi quibusdam nihil voluptates harum a, ipsa dolorum omnis. Numquam laborum ipsam pariatur deleniti quibusdam dolor soluta, magnam explicabo reprehenderit, molestias id.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, perspiciatis qui. Eligendi, nihil temporibus provident soluta repellat vel explicabo recusandae quod perspiciatis vitae enim eum nulla deserunt sapiente ad dolor.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, sint at totam quibusdam assumenda, ratione distinctio amet quas ipsum illum quos odio enim ipsa rerum neque repellat! Officiis, rerum autem.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit pariatur quidem neque necessitatibus, possimus eos nam dignissimos autem quam accusamus iusto perspiciatis fuga amet repudiandae quos ipsum delectus quod impedit.
    </article>

</body>
</html>

导航栏吸顶及三角形.gif

示例 2 通过position实现水平垂直居中

对于需要居中对齐排列的元素来说，水平方向上可以使用 margin:0 auto; 实现，但是，垂直方向上没有办法通过auto实现，因此需要采用其它措施

/* 关键代码 */
width: 300px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
margin-top:-125px;
margin-left:-150px;