一、标准流

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

二、浮动

作用：让块元素水平排列
属性名：float
属性值：

• left：左对齐
• right：右对齐

浮动的盒子会脱标

1.清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动（清除浮动带来的影响）
方法一：额外标签法

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

方法二：单伪元素法

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

方法三：双伪元素法

.clearfix::before,
.clearfix::after{
	content:"";
	display: table;
}

.clearfix::after{
	clear:both;
}

方法四：overflow

• 父元素添加CSS属性overflow:hidden

2.浮动总结

• 浮动属性float，left表示左浮动，right表示右浮动
• 特点
  1.浮动后的盒子顶对齐
  2.浮动后盒子具备行内块特点
  3.父级宽度不够，浮动的子级会换行
  4.浮动后盒子脱标
• 清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
  1.双伪元素法
• 拓展：浮动的本质作用是实现图文混排效果

三、flex布局

1.Flex认识
Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
2.Flex组成
设置方式：给父元素设置display:flex,子元素可以自动挤压或拉伸
组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴/交叉轴：默认在垂直方向

3.Flex主轴对齐方式
属性名：justify-content

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

4.Flex侧轴对齐方式
属性名

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

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

5.修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
属性值

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上到下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从上到下

6.弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
7.弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下所有弹性盒子都在一行显示。
属性名：flex-wrap
属性值

• wrap：换行
• nowrap：不换行（默认）

8.行对齐方式
属性名：align-content
属性值：

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

注意：
对单行的弹性盒子不起作用！

四、项目目录及准备工作

1.项目目录
网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、图片、JavaScript等等。

2.版心效果

.wrapper{
	margin:0 auto;
	width:1200px;
}

3.网页制作思路

1. 布局思路：先整体再局部，从内到外，从上到下，从左到右
2. CSS实现思路
   1.画盒子，调整盒子范围–>宽高背景色
   2.调整盒子位置–>flex布局、内外边距
   3.控制图片、文字内容样式

五、网站制作

1.header区域-布局
通栏：宽度与浏览器窗口相同的盒子
标签结构：通栏>版心>logo+导航+搜索+用户

版心使用display: flex;

2.logo制作技巧
logo功能：

• 单击跳转到首页
• 搜索引擎优化：提升网站百度搜索排名

实现方法：

• 标签结构：h1>a>网站名称（搜索关键字）
• CSS样式：

.logo a {
	display: block;
	width: 195px;
	height: 41px;
	background-image:url(../images/logo.png);
	/*隐藏文字*/
	font-size: 0;
}

3.导航制作技巧（nav）
导航功能

• 单击跳转页面

实现方法：

• 标签结构：ul>li*3>a

• 优势：避免堆砌a标签，网站搜索排名降低
  

• 布局思路
  li 设置 右侧margin
  a 设置 左右padding

4.搜索区域（search）
实现方法：

• 标签结构：.search>input+a/button

5.用户区域（user）
实现方法：

• 标签结构：.user>a>img+span

4.banner区域
结构：通栏banner>版心>.left+.right

左侧侧导航（left）
实现方法：

• 标签结构：.left>ul>li*9>a
• 布局思路：
  a默认状态：背景图为白色右箭头

右侧课程表（right）
实现方法：

• 标签结构：.right>h3+.content

5.精品推荐区域
实现方法：

• 标签结构：.recommend>h3+ul+a.modify
• 布局思路：flex布局

6.精品课程区域区域

实现方法：

• 标签结构：.hd+.bd
• 布局思路：盒子模型

六、定位

作用：灵活改变盒子在网站中的位置
实现：

• 定位模式：position
• 边偏移：设置盒子的位置

1.相对定位
position：relative

1.改变位置的参照物是自己原来的位置
2.不脱标，占位
3.标签显示模式特点 不变

2.绝对定位
position：absolute
使用场景：子级绝对定位，父级相对定位

1.脱标，不占位
2.参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改位置
3.显示模式特点改变：宽高生效（具备行内块的特点）

3.定位居中
实现步骤：
1.绝对定位
2.水平、垂直边偏移为50%
3.子级向左、上移动自身尺寸的一半

• 左、上的外边距为 - 尺寸的一半
• transform：translate(-50%, -50%)

4.固定定位
position：fixed
场景：元素的位置在网页滚动时不会改变

1.脱标，不占位
2.参照物：浏览器窗口
3.显示模式特点 具备行内块特点

5.堆叠层级
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序

6.字体图标
展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：

• 灵活性：灵活的修改样式，例如：尺寸颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：先下载再使用

七、CSS修饰属性

1.垂直对齐方式vertical-align
属性名：vertical-align
属性值

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

2.过渡transition
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费的时间（s）
提示：

• 过渡的属性可以是具体的CSS属性
• 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
• transition设置给元素本身

3.透明度opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0-1

• 0：完全透明（元素不可见）
• 1：不透明
• 0-1之间小数：半透明

4.光标类型cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

八、网站各个不同部分制作

1.快捷导航
结构：通栏>版心>导航ul
布局：flex-end

2.header区域
结构：.header>logo+导航（nav）+搜索（search）+购物车（cart）

3.footer区域
服务区域：.footer>服务> 帮助中心>版权

4.banner区域
结构：通栏>版心>轮播图（ul.pic）+侧导航（subnav>ul）+圆点指示器（ol）

5.新鲜好物（goods）
结构：标题（title）+内容（bd）
提示：多区域样式共用

6.热门品牌（brand）
标题结构：左侧（left）+右侧箭头（显示在标题外部：定位）
7.生鲜区域
标题结构：
右侧（right）>菜单（ul）+查看全部