-HTML5移动前端开发基础与实战（第2版）（微课版）-PPT 模块3

模块3

CSS本模块将前端开发中最常用、最实用的CSS布局功能进行详细讲解。CSS可以说是前端开发的重中之重，相对来说HTML元素可以快速掌握，而CSS的布局经验需要花时间积累。HTML5移动前端开发基础与实战（微课版）熟悉CSS的基本语法。知识目标熟悉BOX模型。1熟练使用CSS选择器。2熟练使用CSS常用属性。职业目标3熟练掌握position属性、Float布局、Flex布局。4熟练属性。5熟练掌握通过JavaScript操作CSS的方法。6了解CSS的2D变换、3D旋转及动画。培养团队作能力。培养遵章守纪、无私敬业的品格。素质目标CSS指层叠样式表(CascadingStyleSheets)。最核心的就是样式，样式定义了如何显示HTML元素，解决了内容与表现分离的问题。使用外部样式表可以提高工作效率，外部样式表通常存储在CSS文件中。3.1

常用CSS3.1.1CSS基本语法及使用CSS的几种方式元素选择器，以“HTML元素”的形式进行申明。ID选择器，以“#”+id值的形式进行申明。样式选择器，以“.”+class值的形式进行申明。使用CSS的方式：CSS内联样式、CSS内部样式、CSS外部样式。熟悉几种选择器熟悉CSS内联样式，样式声明在元素内部。演练3.1CSS内部样式，元素选择器。演练3.2ID选择器。演练3.3样式选择器。演练3.4编写样式文件，学习使用外部样式。演练3.5使用多列布局（CSSMultiColumnLayoutModule）能方便实现类似报纸、杂志那种多列排版的方式。如果指定列数，则按指定列数布局。如果未指定列数，那么浏览器将会动态的根据容器的宽度进行分配。3.1.2多列布局熟悉多列布局。演练3.63.1.3display属性block块级元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width，height属性。但即使设置了宽度,仍然是独占一行。inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width，height属性无效。inline元素的margin和padding属性：水平方向的padding-left、padding-right、margin-left、margin-right会产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。display属性规定元素应该生成的框的类型。3.1.3display属性：block、inline、inline-block、none熟悉Display属性。演练3.7常见的块级元素有div、p、h1~h6、ol、ul、table等。常见的内联元素有label、textarea、img、br、select、span、a等。通过display:inline和display:block的设置，可以改变元素的布局级别。inline-block：将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个span元素inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。Input元素的display属性默认为inline-block。none：元素不显示。3.1.4BOX模型BOX模型如图所示。Box模型，熟悉box-sizing:border-box。演练3.83.1.5position属性position属性指定了元素的定位类型。position属性的四个值：认识static、relative、fixed定位。演练3.9熟悉relative定位。演练3.10熟悉absolute定位。演练3.11staticrelativefixedabsolute3.1.6float布局CSS的float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性，

clear属性指定元素两侧不能出现浮动元素。观察浮动效果。演练3.123.1.7flex弹性布局布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于一些布局实现起来比较麻烦。Flex是FlexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。需要注意的是，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称“项目”。熟悉Flex弹性布局。演练3.13用Flex弹性布局实现上中下三层布局，其中顶部和底部顶格设计，中间内容高度占满剩余空间。演练3.143.1.8overflow属性熟悉overflow属性。演练3.15overflow属性定义当对象的内容超过其指定高度及宽度时如何管理内容。基本语法如下：overflow:visible|auto|hidden|scroll属性取值说明：visible：默认值。内容不会被修剪，会呈现在元素框之外。auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。hidden：超过对象尺寸的内容是不可见的。scroll：总是显示滚动条。transparent表示背景透明，可以被延伸到任何一个有color值的属性上。3.1.9transparent属性5G利用transparent属性制作箭头。演练3.163.1.10background相关属性background相关属性演练。演练3.173.1.11JavaScript操作CSS（1）直接设置style的属性。（2）使用setProperty。（3）通过className设置。通过JavaScript操作CSS。演练3.18CSS3常用新功能包括：透明度、文字阴影、圆角、阴影、动画与渐变、媒体查询等。这些新功能将为设计者带来前所未有的方便。3.2CSS3新功能3.2.1圆角、阴影圆角border-radius。演练3.19阴影box-shadow。演练3.203.2.2线性渐变、径向渐变线性渐变linear-gradient。演练3.21径向渐变radial-gradient。演练3.22渐变（gradients）可以让读者在两个或多个指定的颜色之间显示平稳地过渡。3.2.32D变换缩放scale与位移translate。演练3.24旋转rotate与倾斜skew。演练3.23设置旋转元素的基点位置transform-orign。演练3.253.2.43D旋转对比观察rotateX、rotateY、rotateZ是如何旋转的。演练3.26对比观察backface-visibility属性。演练3.27对于3D旋转操作，可以使用rotateX、rotateY、rotateZ，以及rotate3D操作。3.2.5动画编写动画效果，理解动画相关属性的含义。演练3.28显示扑克牌正面，单击后翻转显示扑克牌背面。演练3.29掌握自定义动画的编写过程，熟悉各相关属性的含义。演练3.30自定义动画。演练3.31使用-webkit-mask属性实现图片遮罩效果。演练3.32transition可以为元素从一种样式变换为另一种样式时增加过渡效果。3.2.6viewport在开发移动设备的网站时，最常见的一个动作就是把下面这条语句复制到我们的head标签中：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。3.2.6viewportMediaQueries的作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。@media规则可针对不同媒体类型可以定制不同的样式规则。例如，可以针对：（1）显示器、打印机设置不同的样式规则；（2）设备的不同宽度与高度设置不同的样式规则；（3）根据朝向(智能手机横屏或竖屏)的不同设置不同的样式规则。手机横竖屏切换时设置不同显示效果。演练3.33根据屏幕大小设置不同的样式，实现响应式编程。演练3.34思考理解display属性了吗？能自行编写小例子测试各属性值（特别是block、inline）的效果吗？理解position属性了吗？能自行编写小例子测试各属性值的效果吗？