企业网站cms源码_互联网服务商_优化seo是什么_汕头seo推广外包

文章目录

Flex布局
- 01-标准流
- 02-浮动Float(了解)
- - 基本使用
  - 脱标的特点
  - 产品区域布局
  - - HTML标签
    - CSS样式
  - 清除浮动
  - - 场景搭建
    - 法一：额外标签法
    - 法二：单伪元素法
    - 法三：双伪元素法(推荐)
    - 法四：overfow法
  - 浮动总结
- 03-Flex布局
- - float与Flex对比
  - Flex组成
  - 相关属性名
  - 创建flex容器 display
  - 主轴对齐方式 justify-content(弹性容器)
  - 侧轴对齐方式 align-items(弹性容器)和align-self(弹性盒子)
  - - align-items父盒子
    - align-self子元素(弹性盒子)
  - 修改主轴方向flex-direction(弹性容器)
  - 弹性盒子换行flex-wrap(弹性容器)
  - 弹性伸缩比flex(弹性盒子属性重点)
  - 行内对齐方式align-content(弹性容器)
  - flex-flow复合属性：
  - order(默认0)
  - flex拓展
  - - flex-grow：拉伸(默认0)
    - flex-shrink：收缩(默认1)
    - flex-basis：宽度(默认0)
    - flex：复合写法

Flex布局

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

在这里插入图片描述

02-浮动Float(了解)

基本使用

浮动就是让元素脱离标准流，简称脱标

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐
right：右对齐

浮动使用left：左对齐 .one和.two全部脱标

<style>/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;float: left;}
</style><div class="one">one</div>
<div class="two">two</div>

在这里插入图片描述

浮动使用right：右对齐 .one和.two全部脱标

<style>/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;float: right;}
</style><div class="one">one</div>
<div class="two">two</div>

在这里插入图片描述

**脱标 ** 下图.one浮动，不在占用标准流的位置(像油飘在水上一样)，这就是脱标了。.two没有使用浮动，即没有脱标，所以左上角开始标准流排布。

<style>/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;}
</style><div class="one">one</div>
<div class="two">two</div>

在这里插入图片描述

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

脱标的特点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.father{margin: 100px auto;height: 300px;width: 300px;background-color: pink;}.son1{height: 100px;width: 300px;background-color: skyblue;}.son2{/* float: left; */height: 100px;font-weight: 700;font-size: 20px;color: red;}.son3{background-color: #efefef;}</style></head>
<body><div class="father"><div class="son1">我是第一个</div><span class="son2">我是第二个</span><div class="son3">我是第三个</div></div>
</body>
</html>

在这里插入图片描述

加入浮动后的特点

1.相对于现在的位置浮动，不占位 (绝对定位会用这个特点)

2.图文混排(文字在图片周围)

.son2{/* 将浮动注释取消 */float: left;height: 100px;font-weight: 700;font-size: 20px;color: red;}

在这里插入图片描述

产品区域布局

在这里插入图片描述

HTML标签

<!-- 版心：左右，右面：8个产品 → 8个 li -->
<div class="product"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</div>

CSS样式

<style>* {margin: 0;padding: 0;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;}.left {float: left;width: 234px;height: 628px;background-color: skyblue;}.right {float: right;width: 978px;height: 628px;background-color: brown;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: orange;}/* 第四个li和第八个li 去掉右侧的margin */.right li:nth-child(4n) {margin-right: 0;}/* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

在这里插入图片描述

<style>.father {margin: 10px auto;width: 1200px;/*  这个父级盒子.father高度取消 那么子元素 .left .right盒子无法撑起 这个父盒子 *//* height: 300px; */background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}</style><div class="father"><div class="left"></div><div class="right"></div>
</div>
<div class="bottom"></div>

当.father的高度取消掉如下图。通过检查元素发现不存在高度，说明确实浮动的盒子没有撑起父盒子，父盒子.father "脱标’'了

在这里插入图片描述

清除浮动(解决上面脱标)的方法

额外标签法
单伪元素法
双伪元素法
overfow法

法一：额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

<!DOCTYPE html>
<html lang="en">
<head>
<title>css-day06-练习</title><style>.father {margin: 10px auto;width: 1200px;background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}/* 这里 */.clearfix{clear: both;}</style>
</head>
<body><div class="father"><div class="left"></div><div class="right"></div><!-- 这里面加个clearfix --><div class="clearfix"></div></div><div class="bottom"></div></body>
</html>

在这里插入图片描述

法二：单伪元素法

使用伪元素，相当于方法一在父元素内容的最后添加一个块级元素注意content: “”;必须有

准备 after 伪元素

.clearfix::after {content: "";display: block;clear: both;
}

父级使用 clearfix 类
```
<div class="father clearfix"></div>
```

整合一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.father {margin: 10px auto;width: 1200px;background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}/* 放在这里，谁用给谁就行 */ .clearfix::after {content: "";display: block;clear: both;}</style>
</head>
<body><!-- 请看day03的类选择器的部分 --><div class="father clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></body>
</html>

法三：双伪元素法(推荐)

准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}/* after 清除浮动 */
.clearfix::after {clear: both;
}

父级使用 clearfix 类
```
<div class="father clearfix"></div>
```

合并

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.father {margin: 10px auto;width: 1200px;background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}/* before 解决外边距塌陷问题 *//* 双伪元素法 */.clearfix::before,.clearfix::after {content: "";display: table;}/* after 清除浮动 */.clearfix::after {clear: both;}</style>
</head>
<body><!-- 请看我发表的博客的类选择器 --><div class="father clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></body>
</html>

法四：overfow法

.father {margin: 10px auto;width: 1200px;background-color: pink;/* 浮动问题是父级无法被子级撑开 使用overflow: hidden 属性 浏览器就会检查父级范围*/overflow: hidden;
}

浮动总结

在这里插入图片描述

浮动本质是用于图文混排，给图片加浮动，文字会在旁边显示。当时是因为没有更好的技术。所以盒子浮动布局很繁琐，所以就引出了接下来要学的Flex布局

03-Flex布局

由上一节的浮动总结可知为什么浮动被淘汰了。但是我们为什么要学Float布局呢，这是因为浮动为css的定位学习做准备。

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

float与Flex对比

使用float ：会脱标而且不好控制间距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{/* height: 300px; */border: 1px solid #000;}.box div{float: left;/*控制间距*/margin: 50px;width: 200px;height: 100px;background-color: pink;}.bottom{height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div></div><div class="bottom"></div></body>
</html>

在这里插入图片描述

使用flex ：不脱标而且好控制间距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{/* height: 300px; *//* 使用flex布局 */display: flex;justify-content: space-between;border: 1px solid #000;}.box div{/* float: left;margin: 50px; */width: 200px;height: 100px;background-color: pink;}.bottom{height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div></div><div class="bottom"></div></body>
</html>

在这里插入图片描述

Flex组成

设置方式：给父元素设置 display: flex(df即可输出)，子元素可以自动挤压或拉伸

即使子盒子设置了宽度。当元素过多也会被挤压(所以说是弹性盒子)，后面会学不被积压的属性

在这里插入图片描述

当子盒子不设置高度，子元素可以自动拉伸

在这里插入图片描述

组成部分：

弹性容器(父盒子)
弹性盒子(子盒子)
主轴：默认在水平方向。弹性盒子(子盒子)沿着主轴方向排列
侧轴 / 交叉轴：默认在垂直方向

在这里插入图片描述

描述	属性
创建flex容器	display:flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式(行与行之间)当flex-wrap：wrap生效	align-content

创建flex容器 display

属性值	说明
flex	块级的弹性盒子
inline-flex	行级的弹性盒子
-webkit-flex	苹果和谷歌的兼容性

主轴对齐方式 justify-content(弹性容器)

属性名：justify-content

属性值	效果
flex-start	默认值, 弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子之间, 两侧盒子贴着两边
space-around	弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子两侧，两侧盒子与两边有距离
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;justify-content: flex-start;height: 300px;border: 1px solid #000;}.box div{width: 200px;height: 100px;background-color: pink; }</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

根据以上代码变换justify-content:的值进行展示

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between; 父级剩余的尺寸分配间距，间距相等。
justify-content: space-around; 间距出现在弹性盒子两侧，弹性盒子之间的间距是两侧间距的二倍。
space-evenly; evenly是均匀地意思，弹性盒子之间的间距 == 两侧间距。

侧轴对齐方式 align-items(弹性容器)和align-self(弹性盒子)

align-items父盒子

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置，即给父盒子设置属性）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置，即给子盒子设置属性）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

这里是给弹性容器添加

align-items: stretch;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;/* 弹性盒子在侧轴(即垂直方向)没有尺寸才能拉伸  比如下面的.box div注释掉高度 才会拉伸。浏览器默认是justify-items的值是 stretch;*/align-items: stretch;height: 300px;border: 1px solid #000;}.box div{width: 200px;/* height: 100px; */background-color: pink; }</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

align-items: center;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;/* 弹性盒子在侧轴(即垂直方向) 垂直居中当弹性盒子没有高度按照弹性盒子内容填充的高度*/align-items: center;height: 300px;border: 1px solid #000;}.box div{width: 200px;height: 100px;background-color: pink; }</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

align-items: self-start;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;/* 弹性盒子在侧轴(即垂直方向)从起点开始依次排列当弹性盒子没有高度，按照弹性盒子内容填充高度*/align-items: self-start;height: 300px;border: 1px solid #000;}.box div{width: 200px;height: 100px;background-color: pink; }</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

align-items: self-end;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;/* 弹性盒子在侧轴(即垂直方向)从终点开始依次排列当弹性盒子没有高度按照内容填充*/align-items: self-end;height: 300px;border: 1px solid #000;}.box div{width: 200px;height: 100px;background-color: pink; }</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

align-self子元素(弹性盒子)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;align-items: self-start;height: 300px;border: 1px solid #000;}.box div{width: 200px;height: 100px;background-color: pink; }/* 不仅仅是ul下的li可用 */.box div:nth-child(1){align-self: center;}</style>
</head>
<body><div class="box"><!-- 给第一个盒子单独加 --><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

修改主轴方向flex-direction(弹性容器)

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值	效果
row	水平方向，从左向右(默认)
column	垂直方向，从上向下（注意侧轴主轴交换）
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;/*  这主轴变侧轴，侧轴变主轴 */flex-direction: column;/* 主轴在垂直，视觉效果：垂直居中 */justify-content: center;/* 侧轴在水平，视觉效果：水平居中 */align-items: center;height: 300px;border: 1px solid #000;}.box div{width: 200px;height: 100px;}/* 不仅仅是ul下的li可用 */.box div:nth-child(1){background-color: skyblue;}.box div:nth-child(2){background-color: gold;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div></div>
</body>
</html>

在这里插入图片描述

弹性盒子换行flex-wrap(弹性容器)

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

wrap：换行（弹性盒子不会被挤压）
nowrap：不换行（默认）会被挤压(即使弹性盒子设置了宽度也会被挤压)

弹性伸缩比flex(弹性盒子属性重点)

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

1 不加flex布局如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{height: 300px;border: 1px solid #000;}.box div{/* height: 100px; */background-color: pink;}.box div:nth-child(1){width: 200px;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

2 加入flex布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */display: flex;height: 300px;border: 1px solid #000;}.box div{/* height: 100px; */background-color: pink;}.box div:nth-child(1){width: 200px;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

3 当第二个弹性盒子加入flex

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */display: flex;height: 300px;border: 1px solid #000;}.box div{background-color: pink;}.box div:nth-child(1){width: 200px;}/* 水平方向剩余尺寸=1920px-第一个弹性盒子宽200px-第二个弹性盒子内容所占宽度-第三个弹性盒子内容所占宽度 第二个弹性盒子宽度 =  水平方向剩余尺寸/1*/.box div:nth-child(2){flex:1}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

4 当第二，三个弹性盒子加入flex

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */display: flex;height: 300px;border: 1px solid #000;}.box div{background-color: pink;}.box div:nth-child(1){width: 200px;}/* 水平方向剩余尺寸=1920px-第一个弹性盒子宽200px-第二个弹性盒子内容所占宽度-第三个弹性盒子内容所占宽度 第二个弹性盒子宽度 =  1*水平方向剩余尺寸/(1+2)第三个弹性盒子宽度 =  2*水平方向剩余尺寸/(1+2)*/.box div:nth-child(2){flex:1}.box div:nth-child(3){flex:2}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

5 加入flex-direction: column; 主轴侧轴反过来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-弹性伸缩比</title><style>/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */.box {display: flex;flex-direction: column;height: 300px;border: 1px solid #000;}.box div {/* height: 100px; */background-color: pink;}.box div:nth-child(1) {width: 200px;}.box div:nth-child(2) {flex: 1;}.box div:nth-child(3) {flex: 2;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

行内对齐方式align-content(弹性容器)

属性名：align-content （需要设置父元素的高才生效）

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，，空白间距均匀分在弹性盒子之间, 两侧盒子贴着两边
space-aroud	弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子两侧，两侧盒子与两边有距离
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

注意：该属性对单行弹性盒子模型无效。

默认结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-day06-练习</title><style>.box{display: flex;flex-wrap: wrap;justify-content: space-between;/* 这里使用align-content:value */height: 400px;border: 1px solid #000;}.box div{width: 200px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div></div>
</body>
</html>

在这里插入图片描述

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-space-around;
align-content: space-evenly;

flex-flow复合属性：

这个属性是flex-direction 和 flex-wrap复合写法

flex-flow:row nowrap;
flex-flow:column wrap-reverse;

order(默认0)

适用于：flex子项和flex容器中的绝对定位子元素
用整数值来定义排列顺序，数值小的排在前面。可以为负值

flex拓展

flex-grow：拉伸(默认0)

自身收缩数/收缩总和*剩余空间

flex-shrink：收缩(默认1)

(自身宽度自身收缩数)/(sum每个(宽度收缩数))*超出的空间

flex-basis：宽度(默认0)

px：像素值
%：百分值
auto（默认）：无特定宽度值，取决于其它属性值
content：基于内容自动计算宽度

flex：复合写法

flex-grow|flex-shrink|flex-basis
flex:1 1 300px;

企业网站cms源码_互联网服务商_优化seo是什么_汕头seo推广外包

文章目录

Flex布局

01-标准流

02-浮动Float(了解)

基本使用

脱标的特点

产品区域布局

HTML标签

CSS样式

清除浮动

场景搭建

法一：额外标签法

法二：单伪元素法

法三：双伪元素法(推荐)

法四：overfow法

浮动总结

03-Flex布局

float与Flex对比

Flex组成

相关属性名

创建flex容器 display

主轴对齐方式 justify-content(弹性容器)

侧轴对齐方式 align-items(弹性容器)和align-self(弹性盒子)

align-items父盒子

align-self子元素(弹性盒子)

修改主轴方向flex-direction(弹性容器)

弹性盒子换行flex-wrap(弹性容器)

弹性伸缩比flex(弹性盒子属性重点)

行内对齐方式align-content(弹性容器)

flex-flow复合属性：

order(默认0)

flex拓展

flex-grow：拉伸(默认0)

flex-shrink：收缩(默认1)

flex-basis：宽度(默认0)

flex：复合写法