浮动 Folat

作用：把 块级标签放在同一行上

用在块级，行级和行内块不需要
通常是用 float: left;，也有右浮动
右浮动是从右往左写的
浮动:脱离原来的文档流，并且失去他所占的空间，其他的标签会挤上去（浮动的方向是从屏幕到你眼睛的方向）
浮动带来的影响
浮动的元素不占原来的空间，下面的元素会挤上来（浏览器设计：文本不会被浮动的元素盖住）
消除浮动带来的影响**

在浮动元素的 父元素上加属性 overflow: hidden; W3C 提出的方法
消除浮动第二种方法：在浮动的元素里建一个空的div，即没有高的div，然后给其一个类cle，然后在这个类属性中加上 clear: both;/*清除浮动*/，代码片如下：

html

.cle{
        clear: both;/*清除浮动*/
    }
    
    <div class="fa">
   		 <div class="son">1</div>
   		 <div class="son">2</div>
   		 <div class="son">3</div>
 	     <div class="cle"></div>		
    </div>
    <div class="text"></div>

没有浮动的：

有浮动的：同行显示

布局方案：弹性盒子 Flex (CSS 3.0)

通常用来 快速布局，优点是 不需要清除浮动 ，其 display:flex; 属性给 父元素。

弹性盒子有 弹性容器 Flex-container 和 弹性子元素 Flex-item

IE6、7、8 都不适用，因为这几个版本不支持 CSS 3.0

Flex 是 CSS 3.0

属性有如下：

设置 水平距离 justify-content: center; 还有flex-end,flex-start，space-between自动取间距-左中右,(space-around 左中右，左右有空隙，3块儿或三块以上，1块在最左边，2块是在左右两端)
设置 垂直距离 align-items: center;
反转（相当于右浮动 flex-direction: row-reverse;
纵向排列 flex-direction: column;
纵向反向排列 flex-direction: column-reverse;

创建步骤如下:
首先创建两个类 Flex-item，Flex-container，分别是弹性子元素，弹性盒子
在Body中加入以下类

html

<div class="Flex-container">
    <div class="Flex-item">
        1
    </div>

    <div class="Flex-item Sec">
        2
    </div>

    <div class="Flex-item">
        3
    </div>
</div>

在 Style 中写类的属性，==布局的属性要放在 父对象，也就是弹性盒子里，Flex-container中，这个要记一下

html


 <style>
     .Flex-item{
         width: 100px;
         height: 100px;
         background-color: deepskyblue;
     }

     .Sec{
         background-color: pink;
     }

     .Flex-container{
         width: 500px;
         height:500px;
         border: 1px salmon solid;
         display: flex;      /*弹性盒子必须要设置的*/
                             /*父元素设置就好*/
         /* flex-direction: row-reverse;   */     /*反转，相当于右浮动*/
         /*column纵向排列，column-reverse纵向反转排列*/

         /*设置水平距离*/
         justify-content: center;        /*居中对齐*/
         /*flex-end,flex-start*/
         /*space-between自动取间距-左中右，*/
         /*space-around 左中右，左右有空隙，3块儿或三块以上，1块在最左边，2块是在左右两端*/

         /*设置垂直距离*/
         align-items: center;
         /*flex-end在最下面开始*/
         /*center中间*/

     }
 </style>

写完之后的样式如下图

弹性盒子内容补充

首先我们知道弹性盒子是解决块级元素同行的问题。

弹性盒子的换行 flex-wrap: wrap;
用来 修改 flex-wrap 的属性 align-content: flex-start;
要区分好 垂直距离 align-items: center;
弹性盒子也可以设置垂直居中，这就用到了以上两个的组合

css

1 2	flex-wrap: wrap; align-content: space-between;

布局方案：圣杯（浮动+负边距）

布局方案：双飞翼布局（浮动+负边距）

效果如下

代码如下

html

<head>
    <title>双飞翼</title>
    <style>
        .box{
            width: 100%;
            height: 200px;
            background-color: skyblue;
        }
        .text{
            float: left;
            margin: 0 300px 0 300px;
            height: 200px;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: #7aff9b;
            /*margin-left 一个负值，就会挤到上边*/
            margin-left: -100%;

        }
        .right{
            width: 300px;
            height: 200px;
            background-color: #ffb48f;
            /*右边的框，只需给他的margin-left一个负的宽度，就能挤上去*/
            margin-left: -300px;
            opacity: 0.6;
        }
        .col{
            float: left;
        }
    </style>
<body>
<div class="box col">
    <div class="text">
        main
    </div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</body>

理解核心

左面的框给的是 margin-left: -100%; 一个负的一行

右边的给了它负的宽度，所以就挤了上去

布局方案：品字形

类似这个样子，但是着实有点丑…
但是 重要的是学习思路！！

html

<style>
        .div1,.div2,.div3{
            width: 100px;
            height: 100px;
            background-color: #7aff9b;
        }
        .div1{
            margin: 0 auto;
        }
        .div2{
            display: inline-block;
            margin-left: 50%;
        }
        .div3{
            display: inline-block;

            /*这里给他2倍它的宽度*/
            margin-left: -200px;
        }
    </style>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>

布局方案：阿里面试

请写出如下布局，要求不允许用定位，所有的分区都在同一级(也就是这五个div是兄弟节点）

html

<style>
       .d1{
           width: 70%;
           height: 300px;
           float: left;
           background-color: skyblue;
       }
       .d2{
           width: 30%;
           height: 150px;
           
           /*理解这里的浮动*/
           float: right;
           background-color: orange;
       }
       .d3{
           width: 30%;
           height: 450px;
           
            /*理解这里的浮动*/
           float: right;
           background-color: salmon;
       }
       .d4{
           width: 35%;
           height: 300px;
           float: right;
           background-color: saddlebrown;
       }
       .d5{
           width: 35%;
           height: 300px;
           float: left;
           background-color: aqua;
       }
   </style>
   
   <body>
   <div class="box">
       <div class="d1">1</div>
       <div class="d2">2</div>
       <div class="d3">3</div>
       <div class="d4">4</div>
       <div class="d5">5</div>
   </div>
</body>

布局方案：网格 grid（CSS 3.0）*

号称是最牛逼的布局方案！
牛逼在哪里呢？一步一步来看~

实例：九宫格

首先用网格来做个九宫格试试

html

<head>
    <meta charset="UTF-8">
    <title>网格测试</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*九宫格：网格容器*/
        .container{
            /*设置容器为网格*/
            display: grid;

            /*列宽*/
            grid-template-columns: repeat(3,100px);

            /*行高*/
            grid-template-rows: repeat(3,100px);

            /*间距：第一个值为行之间的间距、第二个为列之间的间距*/
            gap: 10px 10px;
        }
        .item{
            /*设置所有块的属性*/
            background-color: skyblue;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
    </div>
</body>

看，利用网格能够快速的布局

使用方法

基础：单位

fr：倍数关系，例如 grid-template-columns: 1fr 2fr; 就是$\cfrac{第一列宽度}{第二列宽度}$ = $\cfrac{1}{2}$
em：相对单位，相对于父元素的单位
rem：也是相对单位，但是它相对于的是 根元素，也就是 Html

设置列宽 & 属性中的写法

规定每个列的宽度：grid-template-columns: 100px 100px 100px; ，后面写几个代表有多少列，比方上面的九宫格，就是三列
九宫格3列的快速写法就是 grid-template-columns: repeat(3,100px); 用 repeat(次数，长度);，代表重复 3 次的 100px
属性里也可以写 auto，代表自适应，（比方说 grid-template-columns: 100px auto 100px;，代表中间列的宽度自适应）
属性里可以写 minmax()，规定列宽的 最小值和最大值，（例如：grid-template-columns: 1fr 2fr minmax(500px,1000px);）
属性里可以写 auto-fill，顾名思义，这玩意叫做自动填充，尽量填满通常跟 repeat 结合使用（例如：grid-template-columns: repeat(auto-fill,100px);）

行高

行高用属性 grid-template-rows: repeat(3,100px);
属性中的用法同理列宽

间距

列间距：grid-column-gap: 20px;
行间距：grid-row-gap: 20px;
组合属性：gap: 行间距列间距; （例如 gap: 40px 10px;）

线

区域线都是从1开始，依次排列的
这里全当听个响，下面会有例子，慢慢理解

grid-column-start: 1; 列线第一根线开始
grid-column-end: c-end; 列线 c区域的结束
grid-row-start:c-start; 行线 c区域开始
grid-row-end: f-end; 行线 f区域结束
组合写法 grid-area: 1/2/3/4; 分别代表 row-start / column-start / row-end / column-end
其他写法
grid-column-start: span 2; 跨度 2 列

划分区域 & 为区域取名字

比方说我们要给九宫格的每一块设置一个名字

grid-template-areas: "a b c" "d e f" "g h i"; ，可以用这个关键字给九宫格的每个区域划分名字，想起什么名字就起什么名字
注意格式，比方说九宫格你可以这么写代码

也可以这么写，都行，看个人了

划分的区域如下所示，对应着起名字的相应位置
取完名字我们就可以随便的把玩网格

换位置

我想把内容为1的div移动到上图中的 c 区域

css

1
2
3

.item1{ 
           grid-area: c;
       }

html


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格测试</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*网格容器*/
        .container{
            /*设置容器为网格*/
            display: grid;

            /*列宽*/
            grid-template-columns: repeat(3,100px);

            /*行高*/
            grid-template-rows: repeat(3,100px);

            /*间距：第一个值为行之间的间距、第二个为列之间的间距*/
            gap: 10px 10px;

            /*区域起名字随便起，注意格式就好*/
            grid-template-areas: "a b c""d e f""g h i";
        }
        .item{
            /*设置所有块的属性*/
            background-color: skyblue;
        }
        .item1{
            /*关键代码：item1是内容为1的div块*/
            /*grid-area: c; 是把这块放到c区域*/
            grid-area: c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
    </div>
</body>
</html>

交换的效果如下

玩弄区域线 => 换位置

有没有其他的方法可以换位置呢？答案是有的

首先需要了解一下这个

我写了以下的方法

css

.item1{
	/*移动第一块*/
          /*设置列的开始*/
          grid-column-start: c-start;
          
          /*列结束*/
          grid-column-end: c-end;
          
          /*行开始*/
          grid-row-start:c-start;
          
          /*行结束*/
          grid-row-end: f-end;
      }

样式如下

玩弄线 => 换位置

那我不用区域线设置的名字，用自带的线的顺序可不可以换位置呢？

css

.item1{
	/*我要把第一块放到区域c中*/
          /*第一行，第三列，第二行，第四列，逆时针绕圈圈*/
          grid-area: 1/3/2/4;
      }

再来一个你们练练

css

.item1{
          /*我要把第1块放到c和f区域中*/
          grid-area: 1/3/3/4;
      }

自动补全 & 优先规定

grid-auto-flow: row dense; ：代表以行为标准（默认，比方说我九宫格，那么第一行就是 abc，如果是以列为标准，那么第一列就是 abc）
dense 叫自动补全，如果这个区域能够填充元素的话，就把他挤上去

网格子元素的内容

子元素中的内容

justify-items: center;：水平居中内容
align-items: center; ：垂直居中内容
组合属性 place-items: start end; （先是水平start，然后是垂直的end）
place-self: center; 只设置自己本身的属性，给子元素加这个属性就行
注意：这些属性也是加给 网格容器 的。

css

1 2	justify-items: center; align-items: center;

网格子元素

justify-content: space-evenly; ：等间距的水平间隔
align-content: space-evenly; 等间距的垂直间隔
place-content：组合属性
容器变成 “行级”
css
1
display: inline-grid;

盒子模型

盒子有4层，由里到外分别是 content，padding，border-top ,和 margin

行级标签 不能设置 margin-top，这是行级标签和块级标签的另一个区别
水平叠加
垂直方向 两个元素间距取 margin-top 和 margin-bottom 的最大值，谁大用谁的
组合 Margin
一个值的时候是上下左右的距离
两个值的时候是上下，左右的距离
三个值的时候是上，左右，下
四个值的时候是 上右下左，顺时针
盒子阴影 box-shadow: 10px 10px 20px ; 它的值分别是x轴，y轴，模糊，大小比例，颜色

父元素塌陷问题
问题描述：当子元素想与父元素的上边界产生些距离的时候，通常的做法是==给子元素加个Matgen-Top，但是这么加之后 没有效果。==

css

#fa{
        width: 555px;
        height: 555px;
        background-color: black;
    }
    #son{
        width: 222px;
        height: 222px;
        background-color: hotpink;
        margin-left: 15px;  /*没啥问题*/
        margin-top: 15px;   /*他会有问题*/
    }

效果如下

解决方法：

给父元素加 Border，边框颜色通常是跟父元素的背景颜色一致
给父元素加 Overflow : hidden
加 Padding

延伸知识点 :

css

1
2
3

*{
    margin: 0px;/*取消浏览器的默认值*/
}

变态盒子模型（ IE ）& W3C盒子模型

IE 6 在当时很屌，所以自己玩了一套规则，然而随着时间推移，一个人终归玩不转一群人
IE 8 已经向 W3C 靠拢了。

IE 盒子的规则是自己规定的宽高 = 内容区 + padding + border ，这样的话如果 padding 增加，那么内容区的大小就会减少。
W3C 我们设的宽高值是 内容区的，所以改变 padding 值不会改变内容区的大小。
之间的转换用 box-sizing: border-box; 默认W3C的 content-box

边框 Border

边框有组合形式 border: 1px solid black; 值分别是边框宽度，边框的样式，边框的颜色，其顺序可以改变。
边框其实是个三角形 ！如下图所示，上面的边我改成透明的了

边框宽度 border-width: 100px;
边框样式 border-style: solid;
样式还有 dash 虚线，double 双线，dotted 点点，solid 实线
边框颜色 border-color: deepskyblue;
边框圆角处理 border-radius: 10%;
想要做个正圆的话，先设置宽高相等，然后让其值为50%

Padding

内容区与边界的距离，也遵循上右下左。

padding会把盒子撑大

css

div{
            width: 333px;
            height: 333px;
            border: 1px solid pink;
            padding-left: 20px;/*padding会把盒子撑大*/
            /*真实宽度height + border*2 + padding-left*/
        }

真实宽度 = height + border*2 + （padding-left）

Margin

行级标签不能设置 margin-top 也不能设置 padding-top

html


<style>
       .Span_text{
           margin-left: 10px;
           margin-top: 10px;
       }
   </style>


<span>这是</span>
   <span class="Span_text">一个测试</span>

浮动 Folat

浮动带来的影响

消除浮动带来的影响**

布局方案：弹性盒子 Flex (CSS 3.0)

弹性盒子内容补充

布局方案：圣杯（浮动+负边距）

布局方案：双飞翼布局（浮动+负边距）

理解核心

布局方案：品字形

布局方案：阿里面试

布局方案：网格 grid（CSS 3.0）*

实例：九宫格

使用方法

基础：单位

设置列宽 & 属性中的写法

行高

间距

线

其他写法

划分区域 & 为区域取名字

换位置

玩弄区域线 => 换位置

玩弄线 => 换位置

自动补全 & 优先规定

网格子元素的内容

网格子元素

容器变成 “行级”

盒子模型

变态盒子模型 （ IE ）& W3C盒子模型

边框 Border

Padding

Margin

变态盒子模型（ IE ）& W3C盒子模型