HTML5+CSS3学习日志--day4

四、CSS高级技巧

（一）定位

默认静态定位：position:static;

相对定位

作用：灵活改变盒子（大的小的都可）在网页上的定位

实现：（）改变位置的参照物为自己原来的位置，不脱标，

1.定位模式：position：relative（相对）

2.位偏移量：设置盒子的位置：left、right、top、bottom

特点：

1.改变位置的参照物为原来的位置

2.不脱标，占位（因位偏移空出的空间仍然存在且不被其他元素占据）

3.标签显示模式特点不变（显示模式：块级，行内级，行内块级）

注：position:relative;一般不单独使用，因为元素单独使用会导致大量的留白。

绝对定位（一般不会单独使用）

实现：position:absolute;

使用场景：子绝父相（子级绝对定位，父级相对定位）

特点：

1.脱标，不占位

2.参照物：先找最近的已经定位的祖先元素秒如果都没有相对定位则参照浏览器可视区改变位置。

3.绝对定位的盒子显示模式特点改变：宽高生效（具备了行内块的特点）

定位居中

若相对于浏览器居中则可直接给元素添加css代码position:absolute; ...

若是相对于父级则需给父级加position:relative;

实现步骤：

1.绝对定位

2.水平、垂直边偏移为50%

3.子级向左、上移动自身尺寸的一半：

（1）左、上的外边距为 -尺寸的一版

（2）transform：translate(-50%,-50%)（推荐）

left：50%；（盒子的最左边缘出现在参照物中间）

注：推荐使用（2）方法。

固定定位

内容滚动，固定区域不滚动

position:fixed;

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

堆叠层级：z-index（*）

作用：设置定位元素的层级顺序，改变定位元素的显示顺序（默认显示顺序位后来者居上）

属性值：整数，默认：0，取值越大显示顺序越靠上

定位总结

还有默认情况下的静态定位 属性值：static

属性优先级：

标准流<浮动<定位

(二)CSS精灵（CSS Sprites）----抠图

是一种网页图片应用处理方式，将网页中的一些背景图片整合到一张图片文件中，再用background-position对图片进行精确定位。

优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。

实现步骤：（类似于从一张大图中抠出需要的小图）

1.创建盒子，盒子尺寸与小图尺寸相同

2.设置盒子背景图（大图）为精灵图

3.添加background-position，改变背景图位置（在PxCook中查看所需小图位置）

（三）字体图标

展示的是图标，本质是字体。

作用：在网页中添加简单的、颜色单一的小图标

优点：

灵活性：灵活地修改样式（颜色、尺寸等）

轻量级：体积小、渲染快、降低服务器请求次数。

兼容性：几乎兼容所有主流浏览器

使用方便：先下载再使用

使用方式：

1.下载字体：

iconfont 图标库： iconfont-阿里巴巴矢量图标库

选好图片下载至本地解压缩后有以下这些文件：

html:示例文件（复制粘贴）

iconfont.css是我们的需在HTML文件中引入的文件

ttf、woff、 woff2是字体文件

2.使用下载的iconfont图标

引入字体样式表，设置标签两个类名，一个为iconfont,一个为示例文件中的以下蓝色标注区。

                         

效果显示：

  

注：如果要调整字体大小，选择器的优先级要高于或等于iconfont类

3.上传矢量图

当项目中需要iconfont图标库中没有的图标时，我们能够将需要的、带有svg后缀的图标文件上传到iconfont图标库中，生成字体。

svg（可缩放矢量图）：矢量图，意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。

（四）垂直对齐方式

属性名：vertical-align（在容器中谁的高度最高就对谁设置）

属性值：

基线对齐：图片底部有空白

垂直居中：vertical-align:middle;（常用）

顶部居中：vertical-align:top;

底部居中：vertical-align:bottom;

注：

1.对齐都是按照最高内容的顶部，中部，底部对齐且对齐可消除图片底部空白。

2.图片底部空白存在的原因为：浏览器将行内级、行内块级元素当成文字处理，需要基线对齐，因此可将其转换为块元素消除图片底部空白。

（五）过渡效果（实现慢慢变化的动态效果）

为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transtion(复合属性)

属性值：需过渡的属性 花费时间（s）

注：1.该属性应设置给需要过渡元素本身

2.需过渡的属性可以是具体的元素css属性（如width、height、color等），也可以用’‘all’‘让两个状态下属性值不同的所有属性都产生过渡效果。

（六）透明度opacity（op）

作用设置整个元素的透明度（包括背景和内容）

属性名：opacity

属性值：0 -1；（0:完全透明，元素不可见；1:不透明；0-1之间小数:半透明）

（七）光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值：

（八）轮播图制作(除开动态效果的)

分析：1.需要设置放映轮播图的容器尺寸并使每张图片的尺寸都和它相同。

2.图片元素用无序列表标签包裹，父级flex布局使其横向排列，方便后期图片向左右移动。

3.图片上有箭头和小圆点，覆盖在图片上方，具有脱标，不占位的特点，考虑使用子绝父相。箭头和小圆点可用iconfont图标；箭头相对于父级垂直居中，可用top:50%；transform:translateY(-50%);左箭头在左令left:0; 右箭头令right:0; 小圆点离底边有距离且相对于父级水平居中，可令bottom:30px; left:50%; transform:translateX(-50%);

4.图片img、箭头a、小圆点ol>li>i：父级都需设置display:flex;使其水平排列。（由于子绝父相的设定，行内级元素都被转为）

5.注意：display:none 能够隐藏显示，用display:block;可恢复显示效果

（九）小兔鲜儿网站（xtx-pc）

pc:个人计算机，网站名带pc后缀是可在电脑上搜索的网页

1.项目目录：

images文件夹

uploads文件夹

iconfont：字体图标素材

css文件夹：base.css、common.css：各个网页相同模块的重复样式、index.css

index.html

2.SEO三大标签：（title、meta:desc、meta:kw)

SEO:搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

（1）花钱买位置

（2）将网页设置成html后缀

（3）规范化的网页html结构和代码：

着重head标签中title、meta:desc、meta:kw三大标签的内容书写。例：京东

3.浏览器标题栏中类似于京东、淘宝的小图标---Favicon图标

作用：增加网站的辨识度

图标文件为Favicon.ico（带有ico的文件），将其放入项目的根目录下

在html中可用简写link:favicon引入

经验总结：

在看一个设计稿时，先按照功能区域给网页分块，每个块用各个代表功能的类名div包裹，（也可按对应位置进行分类）

每个块中的众多小块也是如此（尽量不是只有它自己一个元素的），但对于并排的整齐的小块可以用无序列表或有序列表。

每一个块都可以使用flex布局，flex布局是对弹性容器中的各个弹性盒子（块）作用，相对的想要改盒子里面的元素需要将盒子变为弹性容器。

然后看每个块的宽高，一般只用设置一个，另一个由内容撑开，网页底部的footer大概需要设置完整的宽高吧。

大块、中块布局。

再然后就是内外边距、边框，将内容与盒子的空白处看作是内边距还是外边距是由第一步决定的，而设计稿中的一些小细节也暗示着分块。

之后就是小块和小块中的内容布局。

然后是文字样式、图片。。。

这些步骤是按功能区划分一个个完成。注意，每个区域开始时都需要写注释指明区域名。

记录：margin:0 auto;是让一个块级元素水平居中。

记录：场景：一个iconfont图标+input标签，input超出search类容器的宽度。-->解决方法：让input占据容器的剩余所有宽度即flex:1;(无效)

原因：浏览器优先生效 input标签的默认宽度，所以 flex:1 不生效 -->解决方法：重置input默认宽度 width:0;(我没遇到，大概是我的search块设置的宽度比input默认宽度+iconfont图标宽度大吧)

记录：购物车右上角的数字是由p标签包裹，橙色为背景色，要实现一个标签下压着另一个标签，需要子绝父相，用水平或垂直方向进行错位，因此需要对p标签加left或right属性 。应用场景：当点击加入购物车时数字将增加，数字向哪边动。

记录：让块内元素向左边缘靠，应用margin-right:0;时可能会失效 -->解决方法：将父级设置为flex布局，运用justify-content:flex-end;

记录：

上面的效果我是用4个定义列表实现的，过程有些复杂，每一个都是一个dl块 标题下面是两个dd，场景：

对dl用flex布局在进行flex-direction:column;变换方向后，三个盒子都重叠在一起，且用浮动不能解决（原因：猜测是一个盒子不能同时用flex布局和浮动布局，大概要取消另一个。）--->解决方法：dl不用flex布局，直接text-align:center;让dt居中,然后用浮动。