首页 HTML+CSS

# CSS 布局

页面布局

# 流式布局

在 body 中 每个块级元素依次排列 每个块级元素占满 width

流式

# 浮动布局 (float)

给块级元素设置 Float 属性

0.0

# 高度塌陷和 BFC

注意： 子元素都为 float 时，可能造成父元素高度塌陷，需要清除浮动

  1. 给父元素加高度

  2. 补充块级空标签，给他加 clear 属性

  3. 创建 BFC

    BFC（Block Formatting Context），BFC 全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了 float:left,overflow:hidden 或 position:absolute 样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。也就是说独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，这样就达到了清除浮动的效果，但是 overflow:hidden 本身的意思是溢出的元素隐藏显示，所以说有一定的缺点，大家可以根据情况来使用它。

  4. 父元素添加:after 伪类 加上 content: “”;

如何创建 BFC

1、float 的值不是 none。
2、position 的值不是 static 或者 relative。
3、display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
4、overflow 的值不是 visible

# 五个定位布局（position）

  1. static 静态
  2. relative 相对
  3. absolute 绝对
  4. fixed 固定
  5. sticky 粘性

  • # static

    默认定位，遵循从上到下，从左到右

  • # relative

    相对定位，相对块元素自己本身的位置偏移，但本质位置不变，不会挤占

    image-20221111145141285

  • # absolute

    绝对定位，元素会脱离文档流，其他元素会挤占其空间，本体元素会在挤占它的元素的上方，它的偏移 (left,right… 是相对于它的最近的有 position 的父级元素)—— 子绝父相 。

    image-20221111145625497

    后定义的 absolute 元素会覆盖在先定义的 absolute 元素之上。

    image-20221111150033923

  • # fixed

    固定定位，fixed 和 absolute 这种脱离文档流的定位，会把元素的宽和高设置为内容的宽和高，可以设置元素的 left:0; right:0; 使元素左右占满页面。

  • # sticky

    粘性定位，使元素正常情况下是 relative 定位，但是当滑动页面时，元素接触到页面边界时，变成 fixed 固定在位置；

z-index

表示元素的 z 轴值，值越大越在上层，能覆盖值小的元素

# Display&Visibility

  1. display: none; 隐藏

    设置为 none 的元素直接消失，不会占据空间，不在文档流中。

    与 visibility 有区别，设置 visibility: hidden; 元素不可见，但占据空间。

  2. display:inline; 行级元素

    a. 多个元素占一行

    b. 不能设置宽高

  3. display:block; 块级元素

    a. 独占一行

    b. 可以设置宽和高

  4. display: inline-block; 行级块元素

    a. 多个元素占一行

    b. 可以设置宽高

# 盒子模型 (Box Model)

image-20221111152644800

  1. box-sizing: content-box （默认）

    width = content 的宽度

  2. box-sizing: border-box

    width = content + border + padding

# Flex 布局

  1. display: flex
image-20221111154459120

给父元素设置 flex 布局，父元素内的所有子元素会沿主轴从左到右依次排列

  1. **justify-content ** 用于改变主轴方向的布局

​ 居中

image-20221111154832120

平分空间

image-20221111154907089

两端对齐

image-20221111155050621

  1. align-items 改变交叉轴方向的布局

    image-20221111160016420 image-20221111160044859

  2. flex-direction: column 列模式–交叉轴变主轴，主轴变交叉轴

    image-20221111160136427

  3. 子元素占比，设置子元素的 Flex 的值，调整子元素占比

    image-20221111160221172

# *Grid 布局

display: grid

image-20221111163642964

给父元素设置 grid 布局，父元素内的所有子元素会按照 grid 布局排列

1
2
3
4
5
6
7
8
  /* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
   grid-template-columns: repeat(3,200px);
   /* 分别表示两行的高度 */
   grid-template-rows: 100px 200px;
/* 设置网格间距 grid-gap*/
grid-gap: 10px;
/* grid布局专用单位 fr 类似flex布局中的Flex=n;  使排版1：2：1 */
	grid-template-rows: 1fr 2fr 1fr;

# columns,rows

设置 grid-template-columns 可以生成列栅格

1
2
3
4
5

grid-template-columns: 120px 1fr 2fr;	// 120px 固定列 和 宽度 1:2 的两列

grid-template-rows: repeat(6,100px);  	// 生成6行 每行高度都是 100px

# areas

1
2
3
4
5
6
7
8
9
10
11
12
13
//  父元素设置 
grid-template-areas: 
	"name1 name2"
	"name3 name4"
	"name5 name6"
//  子元素设置 
..1
gird-area: name1;
..2
gird-area: name2;
..3
gird-area: name3;
......

# 看一个案例

要实现以下布局

小屏幕 大屏幕

如果采用 Grid 布局来实现就非常简单，同时还可以搭配媒体查询

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
54
55
56
57
58
59
60
61
62
63
@header-color: #196572;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
header {
	grid-area: header;
}
aside {
	grid-area: aside;
}
main {
    grid-area: main;
}
footer {
    grid-area: footer;
}

header,
aside,
main,
footer {
    display: flex;
	background-color: @header-color;
	border: 5px solid #000000;
    font-size: 6vh;
    font-weight: 600;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 340px) and (max-width: 768px){

.container {
	gap: 2px;
	width: 100vw;
	max-width: 100%;
	height: 100vh;
	display: grid;
	grid-template-rows: 10vh 100px 1fr 10vh; // 屏幕小 变成 4 行 1 列
	grid-template-areas:
		"header"
		"aside"
		"main"
		"footer";
}

@media screen and (min-width: 756px) {
	.container {
		gap: 2px;
		width: 100vw;
		max-width: 100%;
		height: 100vh;
		display: grid;
		grid-template-columns: 240px auto;
		grid-template-rows: 10vh 1fr 10vh;
		grid-template-areas:
			"header header"		// 两个header代表 header 独占这一行
			"aside main"		// 这一行有aside 和 main 两个部分
			"footer footer";	// footer独占
	}
}

# 响应式布局

# MediaQuery 媒体查询

​ min-width 可视宽度

​ min-device-width 设备宽度（只与设备本身有关）

1
2
3
4
5
6
7
8
@media screen and (min-width: 340px) and (max-width: 768px){
    /*样式*/
    /*样式*/
} 
@media screen and (min-device-width: 340px) and (max-device-width: 768px){
    /*样式*/
    /*样式*/
}

# 自适应布局

1
2
3
4
5
6
7
8
9
10
11
//获取设备信息
let userAgent = navigator.userAgent.toLowerCase();
//正则表达式，判断设备类型
let device = /ipad|iphone|midp|rv:1.2.3.4|android/;
if (device.test(userAgent)){
    //匹配到则跳转移动端页面
    window.location.href="move.html";
}else{
    //跳转PC页面
    window.location.href="pc.html";
}