大家好，我是《未来》的作者。 本期分享的内容是Web前端系列课程。 该系列共有29个阶段。 坚持学习3个月，成为Web后端前辈！
志同道合的朋友和我一起学习交流吧！
第二阶段CSS311浮动及应用
1 文档流程介绍
漂浮
正常流（Normal flow）也叫标准流、单据流
前面我们说过，网页布局的核心是利用CSS来放置包。 如何将包放在正确的位置？
CSS中有三种定位机制：普通流（标准流）、浮动和定位
htmi语言标准流中另一个非常重要的概念！ 或者正常流程，或者文档流程。 普通流实际上是指网页中的标签元素通常按照从上到下、从左到右的顺序排列。 例如css3 流布局，块级元素会占据单行，行内元素会按顺序排列； 根据这些大前提进行的布局绝对无一例外地称为正常流程布局。
2 浮动用于文字环绕效果
浮动最早是用来控制图片的，让其他元素（尤其是文字）可以达到“包围图片”的效果。
后来我们发现浮动有一个很有趣的东西：它可以让任何袋子排列成一排。 为此，我们逐渐偏离主题，利用浮动的特点来安排布局。 （CSS3早已成为我们真正的网页布局，我们会详细讲解CSS3）
3 体验漂浮
元素的浮动是指设置了浮动属性的元素将脱离标准正常流程的控制，移动到其父元素中指定位置的过程。
在CSS中，浮动是通过float属性来定义的，其基本语句格式如下：
选择器 { float: 属性值; }
4 浮动表示悬浮
浮出标准流量，不占位置，并且会影响标准流量。 标准流可以被遮蔽。 浮动仅左右浮动。
5 Floating首先需要添加标准流parent
Float首先创建了包含块（包）的概念。 也就是说，浮动元素总是与其最近的父元素对齐。 但不会超出内行距的范围。
6 个与父包对齐的浮动功能
7 种浮动功能袋排列
浮动元素的排列位置与前一个元素（块级）相关。 如果前一个元素有浮动，则A元素的底部将与前一个元素的底部对齐； 如果前一个元素是标准流，则 A 元素的底部将与前一个元素的顶部对齐。
对于位于父包上方的子包，如果其中一个子包有漂浮物，则其他子包必须漂浮。 这会将显示对齐为一行。
8 浮动影响包显示模式
元素浮动后，该元素将具有内联块元素的特性。 元素的大小完全取决于定义的大小或默认内容。
float根据元素写入的位置显示对应的float。
9 浮动摘要
浮动的目的是让多个块级元素可以显示在同一行上。
float浮动漏电专用（图片表示）
漂浮：添加了漂浮物的元素袋是漂浮的，漂浮在其他标准流量袋中。
泄漏：增加了一个浮袋，不占空间，浮起来，原来的位置泄漏到标准流袋。
特别：特别注意，首先浮动包需要和标准流的父级一起使用，其次要特别注意浮动可以让元素显示模式表现为内联块特性。
10版心及布局流程
在阅读报纸时，我们不难发现，虽然报纸内容较多，但经过合理排版后，版面依然清晰，易于阅读。 同样，在制作网页时，如果想让页面结构清晰、条理清晰，也需要对网页进行“排版”。
“中心”是指网页主要内容所在的区域。 一般是在浏览器窗口中水平居中显示css3 流布局，常见的长度值有960pX、980px、1000px、1200px等。
布局过程
为了提高网页制作的效率，在布局时一般需要遵循一定的布局流程，如下：
1. 确定页面的中心（可见区域）。
2.分析页面中的行模块和每个行模块中的列模块。
3. 创建 HTML 页面和 CSS 文件。
4、CSS初始化，然后开始利用包模型的原理，通过DIV+CSS布局来控制网页的各个模块。
11 固定长度且居中的柱
12 两栏左置右宽型
快捷方式生成框架：
按tab键生成如下框架：
13 Banner平均分布
不明白的朋友，不要郁闷。 我会在后续分享中继续讲解。 只要你按照我分享的课程从头到尾，每篇文章读三遍就可以了。 一个月后，当你再看以前的文章时，你会觉得很简单。
发表评论