【027】Python全栈日记-WEB前端基础（四）

上一篇学了CSS三大类中的盒模型，本次来学习浮动。

 

昨天有人问三大类是干啥的，盒模型是一种基本思路，网页分为一个一个大盒子，大盒子中再嵌套小盒子，而浮动是把这些盒模型给布局，之前使用行列块的排版有时候容易不齐，浮动才是最简单的布局的方法。大家可以去看看那些大站，基本用的都是浮动方法布局。

看个图，蓝色圈是盒模型，紫色圈是浮动布局，红色圈为定位。

 

今日上课代码（http://note.youdao.com/noteshare?id=6e1e8051de96dfe0d5ed2238d830a92a）

 

 

在学习浮动之前先说一下昨天的网易云音乐导航栏制作的作业，我们通过F12查看官网源代码发现。

圈中圈出来的地方是一张图片。

从官网扒下来长这个样子

这就要引入一个新的知识点了，精灵图。

 

一、CSS精灵技术（sprite）

1、精灵技术产生的背景

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

 

2、精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。

 

3、精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图。

 

要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

 

我们可以使用ps或者画图或者任何图片标尺工具量出需要图片在精灵图中的位置，然后

通过背景定位找到，例如：我想显示N，

先使用ps量出n的位置

我们量的n距离左边346px，距离上面264px，但是由于图片的左上角为原点，所以据上面的距离是负数所以为-264px，而且教大家一个偷懒的方法，大概距离测量出来后，按F12，在右侧css栏中找到自己的位置参数，点中按上下也会移动，找到合适的位置在源代码中修改就好了。

效果（我一次做了4个，方法已经教了，自己扩展）

 

二、再讲两个选择器

其实通过前面三天的学习，大家可能已经心里有数啥是选择器了，其实就是在body中挑选标签作修改，但是同样的标签太多，所以就需要各种选择器进行挑选。

 

1、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器 是 并且的意思。 即...又...的意思

比如：p.one  

选择的是：类名为 .one 的p（段落）标签。  

用的相对来说比较少，不太建议使用。

 

2、并集选择器

并集选择器（CSS选择器分组）是各个选择器通过‘逗号’连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

 

记忆技巧：

并集选择器‘和’的意思就是说，只要逗号隔开的，所有选择器都会执行后面样式。

上图表示：.one 和 p  和 #test 这三个选择器都会执行颜色为红色。

通常用于集体声明。

 

 

三、浮动

1、标准流(normal flow)

这个单词很多人翻译为文档流，字翻译普通流或者标准流都可以。

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

 

CSS的定位机制有3种：标准流、浮动和定位。

 

html语言当中另外一个相当重要的概念--标准流

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做标准流布局。

 

 

2、浮动（float）

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

 

后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。

 

3、什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

 

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

HTML中： 

块1

任意标签都可以当作块，a，span…………

CSS中：

属性值：

 

4、浮动详细内幕特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。也就是说，浮动流（加了float）会飘在标准流（没加float）的上面，遮盖标准流

 

浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 例如

模型：

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

 

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

 

 

5、概念总结： 浮动（float）

浮动的目的就是为了让多个块级元素同一行上显示。

 

加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。

特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

 

 

6、版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

 

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

 

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

 

（1）一列固定宽度且居中

最普通的，最为常用的结构

 

（2）两列左窄右宽型

比如小米 小米官网

 

（3）通栏平均分布型

比如锤子 锤子官网

 

 

7、清除浮动（重点）

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，例如浮动留的会遮盖标准流的内容。

但是，你不能说浮动不好 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

 

准确地说，并不是清除浮动，而是清除浮动后造成的影响

 

（1）清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

 

（2）清除浮动的方法

其实本质叫做闭合浮动更好一些。记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

 

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

 

【1】额外标签法（引入的，别用）
W3C推荐的做法

是通过在浮动元素末尾添加一个空的标签例如

 

或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 而且我们要做到css和html剥离开，这样反而放在一起了。我只能说，w3c推荐的方法我不接受，你不值得拥有。。。

 

 

【2】父级添加overflow属性方法（引入的，别用）

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

 

 

【3】使用after伪元素清除浮动（贼牛逼使劲用）

通过after伪元素，我们可以在css中制作html’里的东西

div:after:意思就是在div元素之后插入一个元素

使用方法：

.clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }  

行业统一使用clearfix 作为类名，

不要像我使用div：after，

而是 ：.clearfix:after {  content: "."}

然后div中

同理还有before

效果：

 

所以我们可以通过伪元素来清除浮动

优点：符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

(.clearfix {*zoom: 1;}   /* IE6、7 专有 */)

代表网站： 百度、淘宝网、网易等

 

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

 

（3）大概补充一下：伪元素选择器

Css3新加入的一个选择器，基本功能如下：

 

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

E::first-line 文本第一行；

E::selection 可改变选中文本的样式；

E::after

E::before
 

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

 

":" 与 "::" 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

 

注意

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

 

 

四、阴影

1、盒子阴影

一般很多网页都会有阴影，有时候把鼠标放上去，会出现阴影（参考小米官网）

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

前两个属性是必须写的。其余的可以省略。

外阴影 (outset) 但是不能写默认，想要内阴影需要写inset

 

2、字体阴影

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

格式：
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

前两项是必须写的。 后两项可以选写。

 

3、字体凹凸

没啥可说的，记住就行了

效果：

 

 

 

五、过渡（transition)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

 

在CSS3里使用transition可以实现过度动画，并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

 

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
 

如果有多组属性变化，还是用逗号隔开。

如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

曲线就是如何过度，匀速，加速，等等

匀速（linear） 加速度减小的加速（ease） 加速（ease-in） 减速（ease-out）

先加速后减速（ease-in-out）

 

 

 

六、2D动画 （transform）

 

2D变形(CSS3) transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

 

1、移动 translate(x, y)

translate 移动平移的意思

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

 translateX(x)仅水平方向移动（X轴移动）

 translateY(Y)仅垂直方向移动（Y轴移动）

 

看个用这个方法居中的例子：

让定位的盒子水平居中

 

 

2、缩放 scale(x, y)

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

 

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

scaleX(x)元素仅水平方向缩放（X轴缩放）

scaleY(y)元素仅垂直方向缩放（Y轴缩放）

 

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

 

 

 

3、旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

注意单位是 deg 度数

 

 

transform-origin可以调整元素转换变形的原点

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

 

 

4、倾斜 skew(deg, deg)

该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

 

 

7、动画序列（animation）

光固定的一个变换加上过度效果还是达不到flash的效果，那如何事项连续变换，就像动画片一样呢？

 

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

定义：

含义：

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

用法：

Css：

Body：

效果：

注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。

 

 

 

作业，制作小米商城首页（包括阴影等效果）

为啥学校要做小米的，是因为小米用的全是浮动和阴影，符合今天学的

答案是我自己做的，分了css和html

大佬手下留情（绿色的新品标签是下次要学的定位，可以忽略）

​

Css（http://note.youdao.com/noteshare?id=3d1a39b104e6b84498e08f61a7d194b5）

Html（http://note.youdao.com/noteshare?id=6b4a4ea67ee8441f3d2948e7426cd5d5）