avatar

目录
【前端04_布局】浮动、弹性盒子、双飞翼、品字、网格_、盒子模型

浮动 Folat

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

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

    浮动带来的影响

    浮动的元素不占原来的空间,下面的元素会挤上来(浏览器设计:文本不会被浮动的元素盖住)

    消除浮动带来的影响**

  1. 在浮动元素的 父元素 上加属性 overflow: hidden; W3C 提出的方法
  2. 消除浮动第二种方法:在浮动的元素里建一个空的div,即没有高的div,然后给其一个类cle,然后在这个类属性中加上 clear: both;/*清除浮动*/,代码片如下:
html
1
2
3
4
5
6
7
8
9
10
11
.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-itemFlex-container,分别是弹性子元素,弹性盒子

  • 在Body中加入以下类

html
1
2
3
4
5
6
7
8
9
10
11
12
13
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.item1{
/*移动第一块*/
/*设置列的开始*/
grid-column-start: c-start;

/*列结束*/
grid-column-end: c-end;

/*行开始*/
grid-row-start:c-start;

/*行结束*/
grid-row-end: f-end;
}

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

玩弄线 => 换位置

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

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

在这里插入图片描述

再来一个你们练练

css
1
2
3
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; 只设置自己本身的属性,给子元素加这个属性就行
  • 注意:这些属性也是加给 网格容器 的。
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
1
2
3
4
5
6
7
8
9
10
11
12
#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
1
2
3
4
5
6
7
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
1
2
3
4
5
6
7
8
9
10
11

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


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

文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/62555.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论