前端学习--CSS部分下

前端学习–CSS部分下

1.CSS显示与隐藏属性

显示与隐藏属性经常制作鼠标经过的情况

display属性

display: none || block ;

值	描述
none	隐藏对象（隐藏的元素不占原来的位置）
block	除了转换为块级元素外，还有显示元素的功能。

<style>
    /* 鼠标经过这个盒子，让里面before遮罩层显示出来 */
    .nav:hover::before {
        display: block;
    }
</style>

visibility属性

2.用户界面样式

用户界面样式是为了更改一些用户操作样式，以便提高用户体验。

更改用户的鼠标样式

li { cursor: pointer; }

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

更改表单默认轮廓

input,textarea { outline: none || 0; }
/*去掉默认的蓝色边框*/

防止表单域拖拽

textarea { resize: none;}
/*在实际开发中，文本域右下角是不可以拖拽的。*/

3.图片与文字垂直对齐样式

4.文字溢出样式

单行和多行的文字溢出样式制作

5.CSS新增样式

圆角边框属性

属性名称	值	描述
border-radius	数字+px或者是百分比	数值越大越圆润

盒子阴影（重要）

属性名称	单位	描述
box-shadow	px	前两个值是必须写的，后面的值写不写无所谓，颜色常用透明度形式设置，一般需求是鼠标经过出现阴影效果就行。

box-shadow:h-shadow v-shadow blur spread color inset;
box-shadow: 2px 2px 2px 2px black inset;

阴影属性对应的值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色。
inset	可选，将外部阴影改为内部阴影。

需要注意的是默认的是外部阴影（outset），但是不可以写这个单词，否则阴影无效。盒子阴影不占空间，不会影响其他盒子的排列。

文字阴影（不常用）

text-shadow:h-shadow v-shadow blur color;
text-shadow: 2px 2px 2px black;

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离。
color	可选，阴影阴影的颜色。

6.CSS属性的书写顺序（重点）

7.浮动

浮动的前情提要

1.页面基本的三种布局方式：

标准流（之前那样的都属于）

浮动（马上要学习的）

定位（滚动页面时始终出现的导航栏，是标准流做不了的）

2.网页布局准则：盒子的行排列找浮动，垂直排列找标准流

浮动简介

浮动的作用是以行为基准设置盒子与盒子之间的网页布局样式，这是标准流无法做到或者制作比较困难的。当我们使用float进行行排列时，两个盒子之间是没有空隙的，但是用标准流会有空隙。

选择器{float：属性值；}

属性值	描述
none	元素不浮动（默认值）
left	元素左浮动
right	元素右浮动

浮动的特性（重点难点）

因为浮动不保留原先的位置所以会叠加，所以为了避免叠加浮动元素经常搭配父级块元素使用（父盒子用来确定位置所以一定是标准流），可以理解为标准流包含浮动。需要注意的是如果加了浮动就不用进行元素转换，都是行内块元素。其次，如果一个盒子浮动，那么其余兄弟盒子都要浮动，浮动会影响后面的标准流但是不影响前面的标准流 。

8.浮动的清除

常用清除浮动的方法

需要注意的是浮动的清除样式经常写在CSS初始化文件中。

运用:after伪元素清除浮动

运用双伪元素清除浮动：

9.浮动的补充说明

10.定位

定位简介

定位是将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位公式

定位=定位模式+边偏移。

定位模式（学习重点）：用于指定一个元素在文档中的定位方式。

边偏移：决定了该元素的最终位置。

定位模式对应属性

定位模式通过CSS的position属性来设置，其值可以分为四个

值	描述
static	静态定位（默认）
relative	相对定位（重要）
absolute	绝对定位（重要）
fixed	固定定位
sticky	粘性定位（了解）

定位模式讲解

静态定位

静态定位了解即可，默认的。

相对定位

相对定位重要，相对定位是参照自己原来的位置进行调整。这个盒子虽然移动了，但是之前的位置仍然保留（子绝父相）。

绝对定位

绝对定位重要，绝对定位一般和父盒子有关系。在没有父盒子或者父盒子没有定位的情况下，绝对定位会参照浏览器。如果父亲有定位（相对、绝对、固定），绝对定位会以离它最近一级的有定位的父级盒子为参照进行移动。绝对定位的位置改变之后，原先的位置不进行保留。

补充一下，有些浮动做不了一些效果，是因为浮动改变之后不保留其原先的位置，并且浮动只能影响在他之后的内容。

子绝父相

子绝父相重要，孩子设置成绝对定位，父亲设置成相对定位。这样设置的原因是相对定位占位置，绝对位置不占位置。不过不一定只能是子绝父相，只是经常使用的是子绝父相。

固定定位

盒子在版心旁边固定的这一效果是固定定位与外边距的结合。

<style>
        /* 让盒子在版心旁边固定的代码 */
        .nav{
            position: fixed;
            /* 走浏览器一半的宽度 */
            left: 50%;
            /* 利用margin走版心盒子宽度一半的距离 */
            margin-left: 400px;
        }
</style>

固定定位的特点（务必记住）

粘性定位

粘性定位跟前面四个属性值都不一样，它会产生动态效果。它的使用情况是随着鼠标的滚动，被粘性定位的盒子在页面中始终出现，但是鼠标滚动到一定位置时被粘性定位的盒子就停下了，不再跟随鼠标的滚动。

定位模式总结

边偏移对应属性

属性	示例	描述
top	top:80px;	顶端偏移量，定义元素相对于父元素上边线的距离。
bottom	bottom:80px;	底部偏移量，定义元素相对于父元素下边线的距离。
left	left:80px;	左侧偏移量，定义元素相对于父元素左边线的距离。
right	right:80px;	右侧偏移量，定义元素相对于父元素右边线的距离。

边偏移讲解

在实际操作中，边偏移设置的数值为正数时，它的实际移动方向与对应的边偏移属性的方向单词是相反的，比如top：100px；实际视觉效果是向下移动100px。（内外边距也一样）

11.定位叠放顺序

12.定位的拓展

1.垂直居中，水平居中的实现代码。绝对定位和固定定位想要实现居中不能只用外边距。

 <title>垂直居中</title>
 <style>
     /* 让盒子在版心旁边固定的代码 */
     .nav {
         position: absolute;
         /* 走父容器宽度的一半 */
         left: 50%;
         /* margin负值，往左走，走自己盒子宽度一半 */
         margin-left: -100px;
         top: 50%;
         margin-top: -100px;
         width: 200px;
         height: 200px;
     }
 </style>

2.脱标盒子（浮动，绝对定位，固定定位）不会出现边距塌陷的问题 。

绝对定位和固定定位会完全压住盒子，浮动只会压住下面的盒子，不会压住上面的盒子。不过浮动不会压住下面盒子的文字，因为浮动元素设计的初衷是制作图片环绕文字的效果，只是现在多数用来布局。

13.基本网页布局结点

我们已经学习完所有的基本网页布局知识点，下面我们开始终结一下之前的学习内容。

14.布局技巧

边框重叠

两个边框重叠，边框左侧会变粗，想解决这一问题需要让盒子左侧移动-1px，正好压住相邻盒子边框。

margin-left:-1px;

选中高亮效果

    <style>
       /* 1.盒子没有定位，则鼠标经过时添加相对定位即可。 */
       /* ul li:hover{
        position: relative;
        border: 1px solid blue;
       } */
       /* 2.如果li都有定位，则需要利用z-index提高层级 */
       ul li:hover{
        z-index: 1;
        border: 1px solid blue;
       }
    </style>

文字环绕图片

想要实现文字环绕效果，直接给图片所在的盒子添加float属性即可，不用给文字添加。

15.PS切图

运用这一功能需要注意的是，在编写代码之前，一定要看好页面布局，捋清各个部分的元素类型，我们要知道页面结构的重要性大于页面样式。（html>css）

导出图片，在导出图片时经常会用到合并功能，就是上下两个图层变为一个图层。这里需要记忆一下，PS中合并图层的快捷键是Ctrl+e。

方法一：图层右键，选择快速导出为PNG。

方法二：运用PS软件自带的切片工具。

方法三：使用cutterman切图插件。

现在这个PS插件已经不是免费的了，建议直接官网下载（花钱）。

cutterman切图插件下载网站：Cutterman - 最好用的切图工具。

cutterman的卸载方法： 在电脑文件的快速访问栏中输入C:\Program Files (x86)\Common Files\Adobe\CEP\extensions ，然后将文件的删除。

16.CSS精灵技术

精灵技术是为了提高工作效率，减少服务器的负担。精灵技术就是把很多的小图组成一张大图，然后根据实际需求调整大图的位置，这样做的优点是只需要访问一次。精灵技术主要针对不会频繁更改或者不会更改的图片（背景图）以及样式较为复杂的图片。

17.字体图标

字体图标比较小巧样式简单，在网站上直接下载即可，下面推荐的网站常用。

推荐两个下载网站：

1.iconfont-阿里巴巴矢量图标库（使用比较简单）

2.Icon Font & SVG Icon Sets ❍ IcoMoon（功能强，是国外网站，这个网站进去之后点击右上角的IcoMoon App按钮，选好图片之后点击右侧的按钮。同时，此网站它有编辑功能，点击铅笔图标进行编辑。总之使用很便捷，我喜欢。）

18.CSS三角案例

CSS三角（基础）

效果图

制作代码

CSS三角进阶（倒梯形）

效果图

制作代码