第10章网页布局;10.1布局概述;网页设计中布局方法有多种，本项目重点介绍两种布局方法：浮动布局和弹性布局。;单列布局是网页布局的基础，所有复杂的布局都是在单列布局上演变而来的。;两列布局是将网页内容被分为了左右两部分。这样能够合理利用页面空间，让页面内容看起来更加丰富。;三列布局是两列布局的演变，只是将主体内容分成了左、中、右三部分。;为了提高网页制作的效率，在布局时通常需要遵循一定的布局流程，具体如下。;;;10.1布局概述;;网页模块常用的命名方式-1;相关模块;相关模块;CSS文件;标准文档流组成
块级元素（block）
h1…h6、p、div、列表
行内元素（inline）
span、a、img/、strong...
行内块元素（inline-block）
;值;10.2浮动;float属性的常用属性值有三个，具体如下。;10.2浮动;;10.3清除浮动;在CSS中，常用clear属性清除浮动。;;案例演示;10.3清除浮动;;10.3清除浮动;10.4定位;;;10.4定位;;10.4定位;10.4定位;如果在网页布局时，只对元素应用绝对定位，当用户放大或缩小浏览器窗口时，网页布局可能因某些元素位置改变变得混乱。该怎么办？;10.4定位;10.4定位;10.4定位;浮动和定位练习;10.5弹性布局;10.5弹性布局;10.5弹性布局;10.5弹性布局;（1）弹性布局原理;（2）创建Flex容器;Flex容器属性是指为转换为Flex容器的HTML标签添加的CSS属性，可以设置容器中Flex项目的排列样式。Flex容器属性包括flex-direction属性、flex-wrap属性、flex-flow属性、justify-content属性、align-items属性、align-content属性。;flex-direction属性用于设置主轴上Flex项目的排列方向。;flex-wrap属性用于设置Flex项目是否换行排列。;flex-flow属性是flex-direction属性和flex-wrap属性的复合属性，可以同时设置Flex项目的排列方向和换行效果。;（4）justify-content属性;align-items属性用于设置Flex项目在交叉轴上的对齐方式。;align-content属性将所有行作为一个整体，设置对齐方式。;Flex容器属性用于整体控制Flex项目的排列方式，如果想要单独控制某个Flex项目，就需要为这个Flex项目指定对应的属性，这些属性被称为Flex项目属性。Flex项目属性包括order属性、flex-grow属性、flex-shrink属性、flex-basis属性、flex属性、align-self属性。;order属性用于设置Flex项目的排列位置，属性值为数字。数字越小，该Flex项目排列位置越靠前，默认属性值为0。;flex-grow属性用于设置Flex项目的扩展比例，其属性值为0和正整数。;（2）flex-grow属性;flex-shrink属性用于设置Flex项目的收缩比例，取值为0和正整数。;flex-basis属性用设置Flex项目在扩展或收缩之前的尺寸。flex-basis属性默认取值为auto，此时Flex项目为自身初始大小。通过为flex-basis属性定义像素值、百分比数字或其他任何长度单位的数字，可以改变Flex项目的大小。;（5）flex属性;（5）flex属性;align-self属性用于单独控制某个Flex项目在交叉轴上的对齐方式。align-self属性的默认属性值为auto，表示继承Flex容器的align-items属性。当某个Flex项目设置align-self属性后，Flex容器的align-items属性将不再对该Flex项目生效。;10.6案例-中国非物质文化遗产网;练习-一带一路·零距离