day21总结：CSS布局（2019-05-15）

1.什么是标准流

在没有给标签通过CSS布局的时候，标签在浏览器中有一套默认的布局规则，这个规则就是标准流布局

2.标准流布局规则

1）块级标签

一个占一行（不管标签本身的宽度），设置宽高有效，默认宽度是父标签的宽度，默认高度是内容的高度
例如：p，h1-h6，hr，div，...

2）行内标签

一行可以有多个，默认大小就是内容的大小，设置宽高无效
例如：a，font，label，span，...

3）行内块标签

一行可以显示多个，默认大小就是内容的大小，设置宽高有效
例如：input，button，img，...

3.display属性

可以改变标签布局规则
block：块级标签
inline：行内标签
inline-block：行内块标签
none：隐藏

4. 脱流 / 脱标

只要标签脱流，标准流的规则全部失效，不管什么样的标签在脱离标准流的情况下都是按照以下规则进行布局：一行可以显示多个，默认大小是内容大小，设置宽高有效
浮动和定位都可以让标签脱流

5. 浮动：float属性

left（左浮动）
right（右浮动）

6. 浮动内容环绕现象

被环绕标签浮动，环绕的内容的容器标签不浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--浮动内容环绕现象:
            被环绕标签浮动，环绕的内容的容器标签不浮动
        -->
        <div id="" style=" width: 100px; height: 100px; float: left;">
            <img style="width: 50px;height: 50px;" src="img/luffy.jpg"/>
        </div>
        <div id="" style="width: 400px;">
            
            无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
            显然标准流已经无法满足需求，这就要用到浮动。
            浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
            1.什么是浮动元素的脱离文档流?
            首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的标准流（网页的正常排版顺序）。
            脱离文档流: 就是脱离正常的网页排版顺序。成为浮动流（浮动后的元素就是浮动流）。
            简单来说当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是脱离文档流。
        </div>
    </body>
</html>

7. 清除浮动

清除浮动就是清除因为浮动而产生的高度塌陷问题

1）高度塌陷

当父标签不浮动，并且不设置固定高度，而子标签浮动，就会产生高度塌陷的问题

2）清除浮动的方法

空盒子法：在高度会塌陷的标签的最后添加一个空的div,并且设置这个空的div的样式的clear属性为both
设置高度会塌陷的标签的样式的overflow属性为hidden
万能清除法：给高度会塌陷的标签的after状态添加样式{display:block;clear:both;content:"";visibility:hidden;height:0;}，再给高度会塌陷的标签添加样式属性zoom的值为1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            /*方法1*/
            .clear1{
                clear: both;
            }
            /*方法2*/
            .clear2{
                 overflow: hidden;
            }
            /*方法3*/
            .clear3:after{
                display:block;
                clear:both;
                content:"";
                visibility:hidden;
                height:0;
            }
            .clear3{
                zoom: 1;
            }
        </style>

    </head>

8. 定位：

1）position属性

选中定位的标签的参考对象
initial / static：不定位，默认值；但是body的不是它们
absolute：绝对定位, 相对第一个position属性不是initial/static的父标签进行定位
relative：相对定位，相对标准流定位（相对于原标签在标准流中的位置进行定位）
fixed：相对浏览器定位
sticky：定位保持网页中最后一个块在最后面（网页滚动的时候在浏览的最下面，网页不超过一屏在内容的最下面）

2）left \ right \ top \ bottom

设置当前标签的左右上下到参考对象的左右上下的距离
注意：在不给position属性的时候直接设置left \ right \ top \ bottom属性无效

9. 盒子模型：

html中每个可见的标签都是一个盒子模型，由content、padding、border、margin组成

1）content

内容，设置宽和高其实是设置盒子内容的大小；添加子标签是添加在内容上；设置背景颜色和背景图都会作用于内容部分

2）padding

内边距（默认没有），内容外面的可见部分（默认没有），有四个方向：padding-left、padding-right、padding-top、padding-bottom；设置padding会让标签变大；设置背景颜色和背景图都会作用于padding部分

3）border

边框，有四个方向（border-bottom/left/right/top），可以单独控制每个方向的大小、颜色、样式
border: 边框宽度边框样式边框颜色（例：border:5px solid #ff0000）
边框样式：solid（实线）/ dashed（虚线）/ dotted（点划线）/ double（双线）

4）margin

外边距，有四个方向，不可见，但是占位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                /*2.padding*/
                /*1)一起设置4个方向的padding值都为50px*/
                /*padding: 50px;*/
                
                /*2)单独设置各个方向的padding*/
                padding-left: 20px;
                padding-top: 20px;
                
                /*3.border
                 * 1）一起设置
                 * 格式 - border: 边框宽度 边框样式 边框颜色
                 * 边框样式 - solid(实线)\dashed(虚线)\dotted
                 */
                border: 2px solid darkblue;
                
                /*2)单独设
                 */
                /*border-left-width: 10px;*/
                border-left: 5px dashed red;
                
                /*4.margin*/
                /*1）一起设置*/
                /*margin: 20px;*/
                margin-left: 20px;
                
                
                
            }
        </style>
    </head>
    <body>
        <div id="div1" style="width: 100px; height: 100px; background-color: hotpink;">
            <p>我是段落</p>
        </div>
        
        <input type="" name="" id="" value="" style="padding-left: 10px;"/>
    </body>
</html>

10.补充

1）设置背景图片

background：图片地址是否平铺水平方向的位置垂直方向的位置背景颜色

2）去掉 / 增加下划线

text-decoration: none
text-decoration: underline

3）水平居中方法

text-align:center
margin-left: auto; margin-right: auto

4）垂直居中方法

line-height:行高（当单行文本的行高等于容器高时，可实现文本在容器中垂直居中）

5）其他

cursor: pointer - 鼠标悬停时候的样式为手指
vertical-align: bottom - 相对于容器底部对齐（垂直方向布局方式）