【Web前段学习之路】CSS额外补充知识 黑马课程学习笔记

补充前面文章的小知识点：

清除浮动：

设置浮动时，若子级浮动，且父级没有高度，后面的标准流盒子就会收到影响，显示到上面的位置

 当将父级标签father的高度注释掉时，（该情况多用于其文本内容不固定，则该盒子的高度由内容多少来决定），下面的标准流标签就会顶替其父级标签的位置，因为两个left、right子标签设置了浮动，此时应该将浮动清除：

 解决方法：①额外标签法：在父元素内容的最后添加一个块级元素，设置clear:both

 ②单伪元素法：即用伪元素代替额外标签

 ③双伪元素法：既可以解决塌陷问题，又可以清除浮动

 ④给父级标签增加属性overflow:hidden

实际应用案例-学成在线

01、准备工作

        做网站首先要整理一个项目根目录，即网站的第一级文件夹，里面存放①图片文件夹：images②样式文件夹：CSS③网站首页：index.html（文件夹内所有名称均应为英文字符，因为要上传至服务器）

02、实际操作步骤：略。

页面布局的方式除标准流、浮动之外，还有定位。

定位：可以解决盒子与盒子之间的层叠问题。①定位之后的元素层级最高，可以层叠在其他盒子上面②可以让盒子始终固定在屏幕的某个位置

设置定位的方式，添加属性：position

 (static就相当于不定位）

设置定位时的偏移量：

相对定位 relative：相对于自己之前的位置进行移动，且元素级别不变，在页面中占位，没有脱标（即没有脱离标准流）

测试相对定位01：

添加属性：

黄色块相对自己的左边移动了40px，相对自己的上边移动了80px

测试相对定位02:

 绝对定位 absolute:首先找到设置了绝对定位的元素的父级，若该父级没有设置定位；则以浏览器窗口为参照物进行定位，元素变为行内块元素，且在网页中不占位，脱标；

div的父级为body，body未设置定位：

当父级有定位时候，则参照物为父级元素（父级元素最好设置为relative）（子绝父相）

绝对定位-居中

 当标签设置为绝对定位时，使用margin是没有作用的，要position属性值与margin属性值配合使用

left与margin-left要配合使用，right也同理（应该是英文此时father的父级没有设定定位，故相对浏览器进行移动，它的侧边已达到边界值）

 

当要频繁更改盒子的宽高，又要保持居中时；可以加上如下语句

 遮罩功能：

 

 固定定位：fixed

 添加上述语句后，可使得即使滚动页面，元素固定在相对于浏览器的某个区域。

层级显示：

层级显示次序：标准流<浮动<定位

当同时有定位时，则定义顺序显示（层叠样式）

 现在仅将div的定义顺序改变：

 

 若不改变定义顺序，但是想小粉在上面，则可以添加属性z-index（默认值为0）（!important是用于选择器的优先级）

注： 我们可以发现此次的小粉在上与第一幅图的小粉在上是不一样的；由此可知：加z-index只是改变其层级属性，并没有改变其定义顺序。

 元素的装饰效果

 1、垂直对齐方式（因为浏览器默认行内和行内块元素当作文字处理，按照基线排版对齐，故处理边边角角对齐的时候要用到此属性（或者显示模式改为block也行））

 光标的类型

设置鼠标光标在元素上时显示的样式

 边框圆角

让盒子的四个角变得圆润，属性名为border-radius，常见取值为数字+px或者百分比，赋值规则：从左上角开始赋值，顺时针进行，没有赋值的看对角。

如果要让盒子变为正圆：border-radius取50%

让盒子变为胶囊型：boder-radius取高度的一半

 溢出显示效果

 隐藏显示

 

 拓展：元素整体透明（包括元素中的内容）

属性名：opacity 

属性值：0~1，0表示完全透明

实际应用案例-小兔鲜

项目前置认知

1、精灵图的介绍

项目中的多张小图片，合并成一张大图片，这张大图片就被称为精灵图。这么做的优点是可以减少服务器发送次数，减轻服务器的压力，从而提高页面加载速度。

精灵图的使用步骤：①创建一个和小图片尺寸相同尺寸的盒子（一般都是行内元素）

                                 ②将精灵图设置成背景图片

                                 ③修改背景图位置（background-position），使要出现的小图片显示在①设置的盒子内

精灵图

 

 

 2、背景图缩放

 3、盒子阴影

3、过渡（与hover使用，增强网页交互体验）

属性名：transition   属性值：需要过渡的属性名/或者all（所有能过渡的属性都过渡）过渡的时间

注意：transition属性给需要过渡的元素本身加

 

 

 

 4、骨架标签解析

 

 

 5、SEO简介

SEO(Search Engine Optimization)：搜索引擎优化，即让网站在搜索引擎上排名靠前

提升SEO的常见方法：

①竞价排名     ②将网页制作成html后缀      ③标签语义化

SEO三大标签：①title:网页标题标签      ②description:网页描述标签     ③keywords:网页关键词标签

 

  6、ico图标设置

显示在标签页标题左侧的小图标，习惯使用.ico格式的图标，通常放在根目录下

不设置时，网页ico图标默认为浏览器图标

添加语句：

 

项目结构搭建前文件和目录准备 

ico图标放进项目根目录中；

图片分为两个文件夹，一个为images：存放网站固定使用的图片素材，如logo、样式修饰图片等，一个为uploads:存放网站非固定使用的图片素材，如商品图片、宣传图等；

CSS文件可分为三个，一个为base.css，存放基础公共样式，如所有选择器样式默认边距清理、超链接下划线清除等；一个为common.css，存放该网站中多个页面相同模块的重复样式，如头部、底部等；最后一个为index.css，存放首页其他样式

小兔鲜儿成品

 

至此 静态网页完结撒花啦~