Day 03 CSS布局

Date:2019.5.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.脱流/脱标

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

二、浮动

1.浮动能够让标签脱流

        <div style="background-color: lightblue; height: 60px; float: left;">div1</div>
        <div style="background-color: lightcoral; height: 60px; float: left;">div1</div>
        <a href="" style="background-color: lavender; width: 200px; float: left;">百度一下</a>

2.浮动原理

        <div style="background-color: lightcoral; height: 100px; width: 20%; float: left;"></div>
        <div style="background-color: rgba(0,255,0,0.4); height: 200px; width: 30%; float: left;"></div>
        <div id="" style="background-color: bisque; width: 100%; height: 100px; display: inline-block;">
            div1
        </div>

3.练习：分析一下代码的效果

<!--情况1-->
        <div style="background-color: green; width: 200px; height: 100px;"></div>
        <div style="background-color: rgba(255,0,0,0.4); width: 400px; height: 250px; float: left;"></div>
        <div style="background-color: yellow; width: 300px; height: 150px;"></div>
        <div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>
<!--情况2-->
        <div style="background-color: green; width: 200px; height: 100px; float: right;"></div>
        <div style="background-color: red; width: 400px; height: 250px;"></div>
        <div style="background-color: rgba(255,255,0,0.4); width: 300px; height: 150px; float: left;"></div>
        <div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>
        
        <div style="width: 100%; height: 100px; background-color: yellowgreen;">

三、浮动应用：

1.文字环绕：

浮动内容环绕现象:被环绕标签浮动，环绕的内容的容器标签不浮动,无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。显然标准流已经无法满足需求，这就要用到浮动。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

1)什么是浮动元素的脱离文档流?

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的标准流（网页的正常排版顺序）。
脱离文档流: 就是脱离正常的网页排版顺序。成为浮动流（浮动后的元素就是浮动流）。
简单来说当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是脱离文档流。-->

2.清除浮动

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

1）高度塌陷

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

2)清除浮动的方法

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

/*方法1*/
            /*.clear1{
                clear: both;
            }*/
/*方法2*/
            /*.clear2{
                 overflow: hidden;
            }*/
            
/*方法3*/
            .clear2:after{
                display:block;
                clear:both;
                content:"";
                visibility:hidden;
                height:0;
            }
            .clear2{
                zoom: 1;
            }

四、定位

1.position属性 - 选中定位的标签的参考对象

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

2.left\right\top\bottom

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

五、盒子模型

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

1)content

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

2)padding

内容外面的可见部分(默认没有),有四个方向; 设置padding会让标签变大；设置背景颜色和背景图都会作用于padding部分

3)border

边框，有四个方向，可以单独控制每个方向的大小、颜色、样式

4)margin

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

day 03 CSS布局