【前端04_CSS】布局：浮动、弹性盒子、双飞翼、品字、网格，盒子模型

Lovely Ruby

已于 2024-02-22 11:55:27 修改

阅读量1.4k

点赞数 6

分类专栏：【前端】笔记 # 基础文章标签：浮动弹性盒子Flex 盒子模型双飞翼网格

于 2019-07-25 11:01:45 首次发布

本文链接：https://blog.csdn.net/u010263423/article/details/97234855

版权

【前端】笔记同时被 2 个专栏收录

61 篇文章 2 订阅

订阅专栏

基础

30 篇文章 0 订阅

订阅专栏

浮动 Folat

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

用在块级，行级和行内块不需要
通常是用 float: left;，也有右浮动
右浮动是从右往左写的
浮动:脱离原来的文档流，并且失去他所占的空间，其他的标签会挤上去（浮动的方向是从屏幕到你眼睛的方向）

浮动带来的影响

浮动的元素不占原来的空间，下面的元素会挤上来（浏览器设计：文本不会被浮动的元素盖住）

消除浮动带来的影响**

在浮动元素的 父元素上加属性 overflow: hidden; W3C 提出的方法

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

.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中加入以下类

<!--弹性盒子    布局方案-->
<!--弹性容器 父元素-->
<!--弹性子元素 子元素-->
<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中，这个要记一下

<!--弹性盒子是有弹性的，多了不会换行，只会挤小了  -->
<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;
弹性盒子也可以设置垂直居中，这就用到了以上两个的组合
```
flex-wrap: wrap;	
align-content: space-between;
```

布局方案：双飞翼布局

样式如下：
在这里插入图片描述

//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
</head>
<body>
<div class="box col">
    <div class="text">
        main
    </div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</body>
</html>

复习的时候写了个简化版的，更好看一些

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			.middle{
				width: 100%;
			}
			.left{
				width: 120px;
				margin-left: -100%;
			}
			.right{
				margin-left: -120px;
			}
			.col{
				float: left;
				height: 120px;
			}
			.text{
				padding-left: 120px;
			}
		</style>
	</head>
	<body>
		<!-- 左中右都需要有浮动，而且它的实现是浮动的特性：一行显示不下就换行
		     中间需要  widht: 100%  占满整个屏幕（它是第一个渲染的，放到上面，
			 比方说淘宝的页面，中间的是重要的内容：需要优先渲染的，侧边是导航之类的）
			 
			 左面给他  margin-left: -100%  使它的位置换上来
			 右面给他  margin-left: -宽度  即可
		 -->
		<div class="middle col" style="background-color: yellow;height: 120px;">
			<div class="text">中间的</div>
		</div>
		<div class="left col" style="background-color: saddlebrown;">左边的</div>
		<div class="right col" style="background-color: skyblue;width: 120px;">右边的</div>
	</body>
</html>

理解核心

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

在这里插入图片描述

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

在这里插入图片描述

布局方案：品字形

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

这里引出一个问题：为什么数字2被遮掉点了？
答案是因为，2和3是两个行内块

	<!--如果是这么写的话，行级标签之间就不会有间隔了-->
    <div class="div1">1</div>
    <div class="div2">2</div><div class="div3">3</div>

    <!--如果两个行级标签之间有换行符的话，那么页面的显示上就会有间隔-->
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>

在这里插入图片描述

<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是兄弟节点）

	<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）*

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

实例：九宫格

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

<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 区域

	.item1{ 
            grid-area: c;
        }

<!--整体代码如下-->
<!DOCTYPE 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>

交换的效果如下
在这里插入图片描述

玩弄区域线 => 换位置

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

首先需要了解一下这个
在这里插入图片描述
我写了以下的方法

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

样式如下
在这里插入图片描述

玩弄线 => 换位置

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

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

在这里插入图片描述

再来一个你们练练

		.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; 只设置自己本身的属性，给子元素加这个属性就行
注意：这些属性也是加给 网格容器 的。

	justify-items: center;
	align-items: center;

网格子元素

justify-content: space-evenly; ：等间距的水平间隔
align-content: space-evenly; 等间距的垂直间隔
place-content：组合属性

容器变成 “行级”

	 display: inline-grid;

盒子模型

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

行级标签 不能设置 margin-top，这是行级标签和块级标签的另一个区别
水平叠加
垂直方向 两个元素间距取 margin-top 和 margin-bottom 的最大值，谁大用谁的
组合 Margin
一个值的时候是上下左右的距离
两个值的时候是上下，左右的距离
三个值的时候是上，左右，下
四个值的时候是 上右下左，顺时针
盒子阴影 box-shadow: 10px 10px 20px ; 它的值分别是x轴，y轴，模糊，大小比例，颜色
父元素塌陷问题
问题描述：当子元素想与父元素的上边界产生些距离的时候，通常的做法是给子元素加个Matgen-Top，但是这么加之后 没有效果。
```
#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
- 延伸知识点 :
```
*{
    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会把盒子撑大
```
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
```
<style>
    .Span_text{
        margin-left: 10px;
        margin-top: 10px;
    }
</style>
```
```
<span>这是</span>
<span class="Span_text">一个测试</span>
```

Lovely Ruby

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【前端04_CSS】布局：浮动、弹性盒子、双飞翼、品字、网格，盒子模型

浮动Folat把行级标签放在同一行上只能用在块级，行级和行内块不需要通常是用float: left;右浮动是从右往左写的浮动:脱离原来的文档流，并且失去他所占的空间，其他的标签会挤上去消除浮动带来的影响（W3C）：在浮动元素的父元素加属性没有浮动的：有浮动的：同行显示布局方案：弹性盒子Flex首先创建两个类 Flex-item，Flex-cont...
复制链接

扫一扫