[Java知识库] [java-web]-CSS笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Java知识库 -> [java-web]-CSS笔记 -> 正文阅读

[Java知识库][java-web]-CSS笔记

尚硅谷—李立超–CSS笔记

文章目录

一、CSS基础

1. CSS简介

概述：

层叠样式表

网页实际上是一个多层的结构，通过CSS样式可以对网页的每一个层设置样式，最后可以看到的只有最上层的
定义方式：
- 第一种
  - 在标签内部通过style 设置元素的样式
  - 问题：
    
    如果希望影响到多个元素，必须在多个元素复制一遍，当样式发变化时，一个一个修改非常麻烦，
- 第二种
  - 将样式编写到style标签里
  - 通过css选择器为多个标签设置样式，并且只修改一次
  - 更方便对样式进行复用
  - 问题：
    - 只对一个网页起作用
    - 里面的样式不能跨网页复用
- 第三种
  - 将css样式写到一个css文件里
    
    通过link链接外部css文件
  - 写到外面可以触发浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

2. 基本语法

注释是/*...*/，会被浏览器自动忽略
选择器&申明块
通过选择器选定指定页面,比如p的作用就是选中所有的p元素,申明块，通过声明块来为指定的元素设置演样式声明块是一个名值对的一个样式，名值对之间以:链接，以;结尾

<style>
  P{
    color: red;
  }
</style>

3. 选择器基础

class是标签属性，和id类似，不同的是class可以重复使用

元素选择器
- 作用：根据标签签名确定指定元素
- 语法：标签名{}
ID选择器
- 作用：根据元素的ID属性玄宗一个指定元素
- 语法：#ID属性值
class
- 多个元素可以绑定一个class
- 一个元素可以绑定多个class(用空格隔开)
- 语法 .class 属性值
通配选择器
- *{}
- 代码

<style>
        /*元素选择器*/
        p{
            color: red;
        }
        /*id现择器*/
        #box1{
            color: aqua;
        }
        /*类选择器*/
        .box{
            color: yellow;
        }
        /*通配选择器*/
        *{
            color: black;
        }


    </style>
</head>
<body>

    <p>11111</p>
    <p class="box">22222</p>
    <p class="box">33333</p>
    <p id="box2">44444</p>
    <p id="box1">55555</p>
    <p>66666</p>
    <p>66666</p>
    <p>66666</p>

4. 复合选择器

交集选择器，同时选择有几个类的元素，两个选择器直接写在一起注意：交集选择器中如果有元素选择器，必须以元素选择器开头
并集选择器，同时选择多个选择器对应的元素，用,分割开

<style>
.box,#box1,p{
            color: green;
        }
</style>

5. 关系选择器

父元素
- 直接包含子元素的元素就是父元素
子元素
- 直接被父元素包含的元素
祖先元素
- 直接或间接包含后代的元素就是祖先元素
- 一个元素是父元素也是他的祖先元素
后代元素
- 直接或间接被祖先包含的元素叫后代元素
兄弟元素
- 拥有相同父元素的元素就是兄弟元素

选择器

子元素选择器
- 作用：指定父元素的子元素
- 语法父元素>子元素
下一个兄弟选择器
- 选择具有相同父亲的兄弟元素
下边所有的兄弟兄弟选择器
- 选择具有相同父亲的兄弟元素
- 语法:~
- 代码

 <style>
        /* 子元素选择器 父元素>子元素 */

        div.box > span{
            color: red;
        }

        /* 后代元素选择器  祖先 后代*/
        div span{
            color: royalblue;
        }

        div > p > span{
            color: yellow;
        }

        /* 兄弟元素选择器 
        下一个
        前一个+ 下一个
        
        后面所有
        前一个 ~ 下一个
        */

        p+span{
            color: violet;
        }
    </style>
       -->
        <div class="box">
            我是一个div
            <p> 
                我是div中的p元素

                <span>
                    我是p中的span元素
                </span>
            </p>

            <SPan>
                我是div中的span
            </SPan>
        </div>
        <div>
            我是一个div
            <p> 
                我是div中的p元素

                <span>
                    我是p中的span元素
                </span>
            </p>

            <SPan>
                我是div中的span
            </SPan>
        </div>

6. 属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 以属性值开头的元素
[属性名$=属性值] 以属性值结尾的元素
[属性名*=属性值] 以属性值含有某值的元素
- 代码

 <style>

        /* 
        
        [属性名] 选择好友指定属性的元素
        [属性名 = 属性值] 选择含有指定属性和属性值的·1元素
        [属性名 ^= 属性值]以指定值开头的元素2
        [属性名 $= 属性值] 指定结尾
        [属性名 *= 属性值] 指定含有某值的元素 
        */
        p[title]{
            color: orange;
        }
    </style>
</HEad>
    <body>  
            <p title="嘤嘤嘤">111111</p>
            <p title="">222222</p>
            <p>333333</p>

            <p>4444444</p>
            <p>4444444</p>
            <p>4444444</p>
            <p>4444444</p>
            <p>4444444</p>

    </body>

7. 伪类选择器

定义：

不存在的元素，特殊的类
概念：
- 伪类用来描述一个元素的特殊形态，比如第一个子元素，被点击的元素，鼠标移入的元素
- 伪类一般情况下是使用 : 开头
属性：
- 代码

 <style>
        /* 
        伪类  描=描述元素的特殊状态
        比如：第一个 被点击的二元素 鼠标移入的元素
        
        特点：一般情况下，使用户“ ： ”
        */
         第一个子元素 
        ul > li:first-child{
            color:red;
        }
        /* 最ui后子元素 */
        ul > li:last-child{
            color:red;
        }
        /* 第n个元素
        特殊值 n =  所有
        2n 偶数位的元素
         
        */
        ul > li:nth-child(3){
            color:blue;
        }
        ul > li:nth-of-type(2){
            color: yellow;
        }
        ul > li:nth-child(odd){
            color: blue;
        }

    </style>
        
 <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
 </ul>

8. a标签的伪类选择器

a:link{...}:正常的链接
a:visited{...}:访问过的链接，出于用户隐私考虑，visited只能改颜色
a:active{...}:鼠标点击
a:hover{...}: 鼠标移入

注意的是伪类一定要按照以上顺序写: link , visited , active , hover(LoVe A Ha)

9. 伪元素选择器

::first-letter
::first-line
::selection选中的内容
::before
::after,注意:必须结合content结合使用

代码

  <style>
        /* 
        伪元素 表示页面中的一些并不真实存在的元素 （特殊的位置）
        伪元素使用 ： 开头
        :: first-leter 表诉第一个字母
        first-line
        selection

        before
        after  结合content使用
        */

        p::first-letter{
            font-size: 50px;
        }

        p::selection{
            color: yellow;
        }

        p::before{
           content: 'rwrwrwrwrw';
            color: red;
        }
    </style>
</HEad>
    <body>  
<p>
    恩惠无法忘记你偶尔翻看就骂我额美女i按我们你1
    古庙看过寂寞klm五图 考虑克拉克闽南人glk
</p>

10. 样式的继承

我们为一个元素设置的样式也会应用到他的后代元素

继承是发生在祖先与后代之间的

继承的设计师为了开发，利用继承只需写一次就可以让所有的元素都具有该样式

注意：并不是所有的样式都可以被继承，比如背景相关的，布局相关的样式都不会被继承

代码

<style>
        p{
            color: red;
            background-color: burlywood;
        }
        div{
            color: blue;
        }

        /* 不是所有都会继承  背景相关的，布局相关的不会被继承 */
    </style>
</HEad>
    <body>  
        <p>
            我是p
            

            <span>      w握手span</span>
        </p>

        <span>我是p外面的</span>


        <div>w我是div

            <span>我是div中的<span>
                我是套娃
            </span></span>
        </div>

    </body>

11. 样式的冲突与优先级问题

当我们用不同的选择器选择相同的元素，并且为相同的样式设置不同的值，此时发生了样式的冲突

发生样式冲突的时候，显示的效果是由显示的优先级决定的

选择器的权重	优先级
内联样式	1,0,0,0
ID选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

比较优先级的时候要把所有的求和计算，最后优先级高的优先显示，分组选择器单独计算
选择器累加不会超过下一级的，也就是不进位，如果优先级计算后相同优先使用考下的样式
在属性结束后加上 !important; 会获取最高优先级，慎用！！

12. 长度单位

像素:
- 显示器实际上是由一个一个发光的小点构成的
- 不同屏幕像素大小不同
- 所以同样的200像素在不同的设备下显示效果不一样
百分比
- 相对于父元素的百分比
- 使得子元素随着父元素改变而改变
em
- 随着字体大小的改变而改变
- 1个em是一个字的大小，字的大小可以在div内部修改，即字体大小是自身的字体大小
rem
- 1个rem是相对根元素的字体大小而变化
- 经常用于移动端开发

13. 颜色单位

在css中可以直接使用颜色名来配置各种颜色，但是直接使用颜色名来命名是非常不方便的

RGB值
- RGB是通过不同的颜色浓度调配处不同的颜色
- 每一种颜色是在0-255或者0-100%
- 语法: RGB(xx,xx,xx)
RGBA值
- 在RGB基础上多了个透明度值A
- 范围0-1,1是完全不透明
- 语法: RGBA(xx,xx,xx,xx)
16进制的RGB
- 语法#RGB
- 颜色浓度00-ff
- 如果两位两位重复，例如#AABBCC可以写成#ABC
HSL和HSLA值
- 在工业设计使用多
- H色相(0-360)
- S饱和度(浓度0-100)
- L亮度(亮度0-100)

二、文档流与盒子模型

1. 文档流

概念
- 我们认为网页是一个多层结构，是一层一层的
- 可以通过css为每一次设置样式
- 用户只能看到最上面的一层
- 我们称最下面的一层叫文档流，文档流是网页的基础
  
  我们创建的元素默认是在文档流中进行排列
状态

对于我们来说元素主要有两种状态
- 在文档流中
- 不在文档流中
特点

元素在文档流中的特点：
- 块元素
  
  -在页面中会独占一行
  - 默认宽度是占满父元素
  - 默认高度是被子元素撑开
- 行内元素
  - 不会独占页面的一行，值占自身大小
  - 自左向右排列
  - 和书写习惯一致
  - 行内元素默认的高度和宽度都是被内容撑开

2. 盒子模型基础

概念
- CSS将页面全部元素设置为了一个矩形的盒子
- 将元素设置为矩形的盒子之后，对网页的布局就变成了对不同盒子放在不同的位置
- 每一个盒子都有以下几个部分
  - 内容区(content)
  - 内边距(padding)
  - 边框(border)
  - 外边距(margin)
属性
- border-width
- border-color
- border-style
  
  边框的大小会影响到盒子的大小
  
  举例
- border-width: 10px;
- border-color: red;
- border-style: solid;

3. 盒子的边框

概念

指定四个方向边框粗细，不写默认是3px，写四个值就是上右下左，三个值的时候，默认第四个值同第二个，两个的时候上下同，左右同
属性

border-style属性:
- solid 实线
- dashed 虚线
- double 双线
- 默认值是none

4. 盒子的内边距

内容区的边框时间的距离
一共有四个内边距
内边距设置会影响盒子的大小
背景颜色会延伸到内边距上
盒子大小由内容区，边框，内边距共同决定

5. 外边距

外边距不影响可见框的大小
外边距会影响盒子的位置
一共有四个外边距
元素会尽量的自左向右顺序排列，在默认情况下如果我们设置左上的边距会影响自己，右下会影响别人
也可以设置负值，但是元素会向左上移动
mergin不会影响元素的可见框的大小，但是会影响盒子的实际大小

6. 盒子的水平布局

元素在父元素的位置由以下属性决定:

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在他的父元素中子元素的margin-left+border-left+padding-left+width+padding-right+border-right=父元素宽度(必须满足)

等式不成立的时候，我们称他为过度约束，这个时候我们会自动调整

如果7个值中没有auto会先调整margin-right

这7个值中有三个可以设置为auto
- width (默认是auto)
- margin-left
- margin-right
如果某一个值为auto就会先自动调整那个值
如果一个宽度和一个外边距是auto，那么宽度会调整到最大
如果三个都是auto，那么宽度会是最大
如果外边距都是auto，那么两个auto会赋相同的值(常用这个特点实现水平居中)

7. 盒子模型垂直方向布局

特点
- 盒子的高度默认的父元素高度被子元素撑开
- 子元素在内容区中排列
- 如果子元素的大小超过父元素则子元素会从父元素中溢出
属性

overflow

可选值：
- visible：(默认值)子元素从父元素中溢出，在父元素的外部显示
- hidden:溢出的元素将会被裁减而不显示
- scroll:生成两个滚动条，通过两个滚动条实现浏览
- auto：根据需要生成两个滚动条

8. 外边距折叠问题

特点

相邻的垂直方向的外边距会发生折叠现象
不同元素表现、
- 相邻元素
  - 垂直外边距之间会发生重叠
- 兄弟元素
  - 兄弟元素之间相邻垂直外边距会取较大值
    特殊情况
    如果两个一正一负取和
    如果两个都是负数取绝对值较大的
- 父子元素
  - 父子元素之间的外边距子元素会传递给父元素
  - 父子外边距折叠会对页面造成影响

9. 行内元素的盒子模型

引出
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding,但是垂直方向的padding，不糊会影响页面的布局
- 行内元素可以设置border，垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
属性：

display：用来设置元素显示的类型

可选值：
- inline :将元素设置为行内元素
- block ：将元素设置为块元素
- inline-block：将元素设置为行内块元素
  
  特点：可以设置宽度高度，又不会占用一行
- table：将元素设置为一个表格
- none：隐藏元素，并且不占用页面位置
visbility：用来设置元素的显示状态

可选值：
- visable：默认值，元素在页面中正常显示
- hidden：元素在页面中隐藏不显示，依然占据页面位置

10. 默认样式（重置样式表）

reset.css去除了所有的css样式
normalize.css 是将css样式进行了统一但是不去除

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/normalize.css">

11. 盒子的大小

默认情况下，盒子可见框的大小由内容区，内边框和边框共同决定
属性：

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：

context-box ：默认值，宽度和高度用来设置内容区的大小

border-box：宽度和高度用来设置整个盒子可见框的大小
```
width和 height值的是内容区和内边距和边框的总大小
```

12. 盒子的轮廓、阴影和圆角

属性

outline:

设置元素的轮廓线，用法和border一致

轮廓不会影响可见框的大小

box-shadow:

用来设置元素的阴影效果，不会影响页面布局

第一个值：水平偏移量，设置阴影水平位置，正向右，负向左

第二个值：垂直偏移量，设置阴影垂直位置，正向下，负向上

第三个值：阴影的模糊半径

第四个值：阴影的颜色

border-radius：

用来设置元素的边角线，用法和border一样,可以给定两个半径：椭圆

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-right-radius

三、浮动布局

1. 浮动的简介

通过浮动可以使一个元素向其父元素的左侧或者右侧移动，使用float属性设置元素的浮动

可选值：

none默认值元素不浮动
left 向左浮动
right 向右浮动

注意：元素设置浮动后，水平布局的等式便不需要强制成立;元素设置浮动后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。

特点:

浮动元素会完全脱离文档流，不在占据文档流中的位置。
设置浮动以后，元素会向父元素的左侧或右侧移动。
浮动元素默认不会从父元素中移出。
浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。
浮动元素的上边是一个没有浮动的块元素，则浮动元素，无法上移。
浮动元素不会超过他上面的浮动的兄弟元素，最多就是和他一样高。

2. 浮动的特点

普通元素不会盖住文字，文字会自动环绕在浮动元素的周围。
给元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生改变。
脱离文档流的特点
- 块元素
  - 块元素不再独占页面的一行。
  - 脱离文档流以后，块元素的高度和宽度都默认被内容撑开。
- 行内元素
  - 行内元素脱离文档流以后会变成块元素，特点和块元素一样。

3. 高度塌陷

引出

在浮动布局中，父元素的高度默认是被子元素撑开的。

由于子元素浮动后，会脱离文档流，子元素从文档流中脱离，将会无法撑起负元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动向上移，导致页面的布局混乱

4.`BFC`属性

介绍

BFC(Block Formatting Context) - -块级格式化环境

开启BFC该元素会变成一个独立的布局区域。
特点:
1. 开启BFC的元素，不会被浮动元素所覆盖。
2. 开启BFC的元素子元素和父元素外边距，不会重叠。
3. 开启BFC的元素，可以包含浮动的子元素。
开启方式:
1. 设置元素的浮动。
2. 将元素设置为行内块元素。
3. 将元素的overflow设置为一个非为一个非visable的值。
  
  设置overflow:hidden,开启BFC

5.`_clear`属性

引出：

如果不希望某个元素因为其他元素的浮动的影响二改变位置，可以通过_clear属性来清楚浮动元素对当前元素的影响
作用:

清除浮动元素对当前元素所产生的影响
可选值：

left：清除左侧元素对当前元素的影响

right：

botn:清除两侧元素影响最大的那一个

原理：

设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使得其位置不受其他元素的影响

6. `after`伪类

原理

为没有浮动的元素添加一个伪元素，并且为它设置_clear属性，清除浮动元素的影响，但是after是一个行内元素，

转换成块元素即可，display：block

7. `clearfix` 类

重点

代码：

<style>
  .clraefix :: befroe,
  .clraefix :: after, {
    content: '';
    display:table;/*同时解决高度塌陷，和外边距重叠*/
    clear:both;
  }
</style>

五、定位

1. 定位的简介

position：一种更加高级的布局手段

通过定位可以将元素摆到页面的任意位置

使用`psition`属性来设置定位

可选值：

static：默认值，元素是静止的，没有开启定位

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位

sticky：开启元素的滞沾定位

2. 相对定位

relative：

特点：
- 开启后不设置偏移量，元素不会发生任何的变化
- 相对定位是参照于元素在文档流中的位置进行定位的。
- 相对定位会提升元素的层级。会覆盖掉移动之后下面的元素。
- 相对定位不会使元素脱离文档流。
- 相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素。
偏移量(offset)

当元素开启了定位以后，可以通过偏移量来设置元素的位置

可选值：top left right bottom

3. 绝对定位

absolute：

特点
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生改变。
- 开启绝对定位后，元素会从文档流中脱离。
- 绝对定位会改变元素的性质，行内元素会变成块元素块的宽高被内容撑开。
- 绝对定位会使元素提升一个层级。
- 绝对定位元素是相对于其他包含块进行定位的。
包含块( Containing block)
- 正常情况下
  
  包含块就是离当前元素最近的祖先块元素。
- 绝对定位的包含块
  
  包含块就是离他最近的，开启了定位的祖先元素。
  
  如果相邻的祖先元素都没有开启定位，则相对于根元素进行定位。
- html (根元素，初始包含块)

4. 固定定位

fixed：

特点：
- 固定定位也是一种绝对定位，特点都是一样的。
- 固定定位永远参照于浏览器的视口进行定位。
- 固定定位不会随着浏览器窗口得的滚动条改变位置

5. 粘滞定位

sticky：

特点
- 粘滞定位可以在元素到达某一位置，将其固定。

6. 绝对定位元素的布局

水平布局必须满足包容块的宽度
垂直布局

7. 元素的层级

对于开启了定位的元素，可以通过z-index属性来指定元素的层级

z-index需要一个这个数作为参数，值越大的元素的层级越高，元素的层级越高，越优先显示
- 默认的话元素越靠下，越优先显示
- 祖先元素层级再高，也不会盖住后代元素

8.定位轮播图练习

六、字体和背景

1. 字体

2. 图标字体简介

iconfont：在网页中经常需要使用一些图标，可以通过图片引入图标。但是图片本身比较大，并且非常的不灵活。

所以在使用图标时，可以将图片直接设置为字体，然后通过font-face的形式对字体进行引入
fontawesome使用步骤
- 下载
- 解压
- 将css和webfonts移动到项目中
- 将all.css引入网页中
- 使用图标字体
  
  通过类名来使用图标字体, 主要分为 fas和fab两类
  
  <i calss ="fas fa-bell">
使用示例

<!-- 1. 通过伪元素 -->
    <!-- 找到要设置图标元素的before或after选中-->
    <!-- 在content中设置字体的编码-->
    <!--设置字体的样式-->
li::before{
    content: "\f1b0";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;           /*fab需要单独设置*/
    color: blue;
    margin-right: 10px;     
}

<!-- 2.通过实体的方式实现，class类名。 &#x+图标的编码9 -->
<span class="fas">&#xf0f3;</span>

<!-- 3. -->
<i class="fas fa-cat"></i>

3. 行高

行高 （line height）

行高值的是文字占有的实际高度
可以通过line-heihgt设置行高度

行高可以直接指定大小（px.em）

也可以直接为行高设置一个整数

行高经常用来设置文字的行间距（行间距 = 行高 - 字体大小）
字体框

就是字体存在的格子，设置font-size实际上?在设置字体的高度
行高会在字体框的上下平均分配，

（行高设置为和盒子高度一样的值，使得单行文字在一个元素中垂直居中）

4. 字体的简写属性

<style>
  /* 字号 + 字体*/
  font: 50px Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  /*字号 + 行高 + 字体*/
  font: 50px/5 Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
</style>

属性：

font-weight ：字体加粗

normal: 默认值，不加粗

bold：加粗

100-900九个级别
font-size：
font-style:字体的风格

normal ：

italic: 斜体

5. 文本的水平和垂直对齐

text-align : 文本的水平对齐
- left：左侧对齐
- right：右侧对齐
- center：居中对齐
- justify：两端对齐
vertical-align:设置元素垂直对齐的方式
- baseline：基线对齐，（文字底边对齐）
- top：顶部对齐
- bottom：底部对齐
- middle：居中对齐

6. 其他的文本样式

text-decoration：设置文本修饰

none

underline下划线

line-through删除线

overline上划线
white-space ：设置网页如何处理空白

normal正常

nowrap不换行

pre保留空白
text-overflow：溢出显示省略号（ellipsis）

7.背景

背景图片：background-image

background-image:url("")
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景的图片大于元素，将会有一部分背景无法完全显示
- 如果背景图片和元素一样大，则会直接正常显示
背景重复方式 background-repeat
- repeat 默认值：背景会沿着x轴。y轴双方向重复
- repeat-x：沿着x轴重复
- repeat-y：沿着y轴重复
- no-repeat：背景图片不重复
背景图片位置 background-position
- top left center bottom right 使用方位词，同时指定两个值，
- 通过偏移量指定
背景的范围 background-clip

border-box 默认值。背景会出现在边框的下边

padding-box，背景不会出现在边框，只出现在内容区和内边距

content-box只出现在内容区
背景图片的偏移量计算的原点 background-origin

padding-box 默认值，从内边距计算（关联background-position）

content-box 从内容区计算

border-box 从边框处开始计算
背景图片大小 background-size

第一个值表示宽度，第二个值表示高度，如果只写一个，另一个值就是auto
背景图片是否跟随元素移动 background-attachment
- scroll：默认值，背景图片跟随元素移动
- fixed：背景会固定在页面中，不会随元素移动
问题
- 可以简写，但是size必须卸载position其后边，并且使用 "/"隔开。orgin要在clip前面
- 图片闪烁问题，移入点击加载不同的图片，会有闪烁问题，设置为一张图片，每次调整间距就好。
opacity：设置为透明

8. 雪碧图

雪碧图的使用：
- 确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量以显示正确的图片
雪碧图的特点

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

9. 线性渐变

background-image

渐变是图片

线性渐变，颜色沿着一条直线发生变化

linear-gradient（）开头可以指定渐变的方向

to right

xxxdeg deg表示度数

turn 表示圈

repeating-linear-gradient() 可以平铺的线性渐变

多颜色默认情况下，平均分配

.box1{
  height:10px;
  background-image:linear-gradient (to right red 50px,black ,white 50%)
 }
 .box1{
  height:10px;
  background-image:repeating-linear-gradient (to right red,black ,white 50px)
  /* 50px一个渐变*/
 }

10. 径向渐变

radial-gradient()

放射性的效果,默认情况下，径向渐变的形状是根据元素的形状来计算的

也可以指定圆心的大小
- circle
- ellipse
指定渐变的位置
- （100px 100 px at center center）

.box1{
   background-image:radial-gradient(ellipse,red,yellow)
 }

七、项目补充

1. 浏览器地址栏图标

设置网站的图标（标题栏和收藏栏）

网站图片一般都存储在网站的目录下，名字一般都叫做 favicon.ico

2. 网站的加载速度（压缩）

删除代码说明，格式掉不需要的空格换行

八、动画与过渡

1. 过渡

transition

通过过渡指定当一个属性发生变化时的切换方式；通过过渡效果，可以创建非常好的效果，提升用户的体验
属性：
- transition-property
  
  指定要过渡的属性：width，height.，属性之间，隔开，所有使用 all；只要值是可以计算的就可以过渡，大部分元素都是可以过渡的。
  
  注意：过渡必须是一个有效数值向另一个有效数值进行过渡。
- transition-duration
  
  指定过渡效果持续的时间：2s，可以分别指定时间，用，隔开
- transition-timing-function
  
  过度的时序函数：2s,指定过度的执行方式；贝塞尔曲线
  
  可选值
  - ease：默认值，慢速开始，先加速，再减速
  - linear：匀速运动
  - ease-in：加速运动
  - ease-out：减速运动
  - ease-in-out：先加速，后减速
  - cubic-bezier()：指定时序函数 https://cubic-bezier.com
  - steps：分布执行过渡效果
```
    可以设置两个值：第一个是时间，第二个为`end`、`start`,时间结束执行，和开始执行
```
- transition-delay
  
  设置过渡效果的延迟，相应的时间后，执行过渡。

2. 动画

概念

动画和过度类似，都是可以实现一些动态的效果。不同的过度需要在某个属性发生变化是才会触发，动画可以自动触发动态效果。
设置动画效果
- @keyframes test
  
  to：表示动画结束的位置，可以用 %
  
  from：表示动画开始的位置，可以用 %
- animation-name：test
  
  要对当前元素生效的关键帧的名字
- animation-duration：
  
  动画的执行时间
- animation-delay：
  
  动画的延时
- animation-timing-funaction:
- animation-iteration-count:
  
  动画执行的次数
  
  次数：number
  
  infinite：无限
- animation-direction：
  
  指定动画运行的方向
```
`normal`：默认值 from—>to

`reverse`：反向

`alternate`：from—>to—>from重复执行动画是，会循环

`alternate-reverse`：to—>from—>to
```
- animation-play-stat：
  
  设置动画执行的状态
  
  running：默认值，动画执行
  
  paused：动画暂停
- animation-fill-mode：
  
  动画的填充模式
  
  none：默认值动画执行完毕，回到初始值
  
  forwards：动画执行完毕，元素会停止在动画结束的位置
  
  backwards：动画延时等待时，元素就会处于开始位置
  
  both：结合了forwards和backwards
- 代码案例：小球的落体

<!--案例  小球的落体-->
 <style>
        .box1{

            border-bottom: 10px  black solid;
            height: 500px;

            overflow: hidden;
        }


        .ball{
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #497194;
            animation: run 1s forwards infinite ease-in;
        }
        @keyframes run {
        from{
                margin-top: 0;
            }

            80%{
                margin-top: 450px;

            }

        }

    </style>
<div class="ball"></div>
<div class="box1"></div>

3. 变形平移

transform
- translateX()，translateY()，translateZ()：沿着对应轴平移
  
  平移元素时，百分比是相对于自身进行计算的。
  
  z轴平移，正常情况下是调整元素和人眼之间的距离，距离越大，元素离人越近。z轴的效果属于立体效果。默认情况下，网页的效果不支持透视，近大远小。
  
  如果需要看见效果，必须设置网页的视距，设置html的perspective即可
- rotateX()、rotateY()、rotateZ()：
  
  backface-visibility：hidden；是否显示元素的背面
  
  通过旋转可以使元素沿着x、y或 z旋转指定的角度
- scale()、scaleX() 、scaleY()缩放
- 代码

 <style>
      html{
          /*perspective: 800px;*/
      }

      .box1{
          width: 200px;
          height: 200px;
          background-color: #f3f156;
          margin-top :200px;
          margin-left: 400px;
          /*transform:  translateZ(200px);*/
          transition: 2s ;
      }

      body:hover .box1{
          /*transform: rotateZ(720deg);*/
          /*transform: rotateX(.5turn);*/
          transform: rotateY(.5turn);
          /*transform: rotateX(.5turn) rotateY(.5turn) rotateZ(.5turn); */
          /*transform: rotateY(45deg) rotateZ(50deg);*/
          /* 要把transform写在一起，但是有先后优先级 */
          /*transform: rotateY(180deg) translateZ(400px);   !*Y轴是位置不变的*!*/
          /*transform: translateZ(400px) rotateY(180deg);   !*Y轴是变化位置的*!*/
          /*是否显示元素背面*/
          backface-visibility: hidden;

          background-color: red;
      }


  </style>
    <div class="box1"></div>
    <div class="box2"></div>

transform-style：preserver-3d

3D效果

4. 鸭子表代码

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clock {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 50%;

            position: relative;
            background-image: url("https://img0.baidu.com/it/u=1025810358,239117816&fm=26&fmt=auto");
            background-size: cover;
        }
        .clock > div{
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin:  auto;
            position: absolute;
        }
        .hour-warapper {
            height: 70%;
            width: 70%;
            animation: run 720s linear infinite;
        }
        .min-wrapper{
            height: 80%;
            width: 80%;
            animation: run 60s steps(60) infinite;
        }
        .sec-wrapper{
            height: 90%;
            width: 90%;
            animation: run 1s steps(60) infinite;
        }
        .hour{
            width: 6px;
            height: 50%;
            background-color: #777777;
            margin:  0 auto;
        }
        .min{
            width: 4px;
            height: 50%;
            background-color: #8fd76b;
            margin:  0 auto;
        }

        .sec{
            width: 2px;
            height: 50%;
            background-color: #777777;
            margin:  0 auto;
        }


        @keyframes run {
            from {
                transform: rotateZ(0);
            }
            to {
                transform: rotateZ(365deg);
            }

        }

    </style>
</head>
<body>
<!--    创建表的容器-->
<div class="clock">
    <!--     创建时针-->
    <div class="hour-warapper">
        <div class="hour"></div>
    </div>
<!--    创建分针-->
    <div class="min-wrapper">
        <div class="min"></div>
    </div>
<!--    秒针-->
    <div class="sec-wrapper">
        <div class="sec"></div>
    </div>
</div>

</body>
</html>

九、less

1. 简介

less是一门css的预处理语言，less是css的增强版，通过less可以编写更少的代码，实现更强大的样式，

在less总添加了许多的新特性，像对变量的支持，对mixin的支持，less的语法大体和css预语法一致，但是less中增添了许多对css功能的拓展。

所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后再由浏览器执行。

  html{
        /*    css原生也支持设置变量*/
            --color :#bfa;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color:  var(--color);
        }

less中的单行注释，注释中的内容不会被解析到css中9
css中的注释，内容会被解析到css文件中

2. less中的变量

        
//变量的语法
@a:200px;
@b:200px;
@c:box1;
.box1{
  width:@a;
}

//作为类名，或者一部分使用时，必须以@{变量名}的形式使用
.@{c}{
  width: @a;
  background-color: #8fd76b;
  background-image: url("@{c}/1.png");
  color: $background-color;
}

3. 父元素和扩展

代码

.box1{
  width: 100px;
  height: 100px;
  .box2{
    color:red;
  }

  >.box3{
    color: red;
    &:hover{
      color: #9a6e3a;
    }
  }

  //为box设置hover
  // & 表示外层的父元素
  &.box1:hover{
    color:orange;
  }

  //:extent() 对当前选择器扩展指定选择器的样式
  .p2:extend(.box1){
    color: #63a35c;
  }

  .p3{
    //直接对指定的样式进行引用，相当于将p1的样式进行了复制
    .p2()
  }
  //使用类选择器时，可以再选择器后添加一个括号，实际上就是创建了一个mixins混合选择器
  .p4(){
      width: 100px;
    height: 350px;
  }
  .p5{
    .p4()
  }
}

.box1,
.box1 .p2 {
  width: 100px;
  height: 100px;
}
.box1 .box2 {
  color: red;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: #9a6e3a;
}
.box1.box1:hover {
  color: orange;
}
.box1 .p2 {
  color: #63a35c;
}
.box1 .p3 {
  color: #63a35c;
}
.box1 .p5 {
  width: 100px;
  height: 350px;
}
/*# sourceMappingURL=style2.css.map */

4.混合函数

代码


  //可以设置默认值
  .test(@w:1px){
    width: @w;
    height: 100px;
    border: 1px solid red;
  }
  div{
    //调用混合函数，顺序传值
    .test(1000px)
  }
  span{
    .test(@w: 10px)
  }

5. 补充

在less中所有的数值可以直接进行运算
@import "1.less" 引入其他的less样式

十、flex弹性布局

1. 简介

flex（弹性盒，伸缩盒子）

是css中的一种布局手段主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器

要使用弹性盒，必须先将元素设置为弹性容器
通过display设置弹性容器
- display:flex 设置为块级元素
- display:inline-flex 设置巍峨行内的弹性容器

弹性元素

弹性元素的子元素是弹性元素（弹性项）
一个子元素可以同时是弹性容器和弹性元素

2. 属性

flex-direction 指定容器中弹性元素的排列方式
- row：默认值，水平排列（左向右）
- row-reverse：反向
- column：弹性元素纵向排列（上向下）
- column-reverse：反向
主轴：弹性元素的排列方向称为主轴

侧轴：与主轴垂直方向的称为侧轴
flex-grow：指定弹性元素的伸展的系数
- 指定当父元素有多余的空间时，子元素如何伸展；父元素的空间会按照比例分配
flex-shrink：指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩。
缩减系数的计算方式比较复杂，缩减多少是根据缩减系数和元素大小来计算的

3. 弹性容器的样式

flex-wrap 设置弹性元素在弹性容器中是否自动换行
- nowrap：默认值，元素不会自动换行
- wrap：元素沿着辅轴方向自动换行
- wrap-reverse：元素沿着主轴反方向换行
flex-flow： wrap和direction的简写
- flex-flow：row wrap
justify-content：如何分配主轴上的空白空间
- flex-start：元素沿着主轴起边排列
- flex-end：元素沿着主轴终边排列
- center：元素居中排列
- space-around：空白分布到元素两侧
- space-evenly：空白分布到元素的单侧
- space-between：空白分布到元素间
align-items：元素在辅轴上如何对齐，元素之间地关系
- stretch：设置元素长度一致
- flex-start：沿着辅轴起边对齐
- flex-end：沿着辅轴终边对齐
- center：居中对齐
- baseline：基线对齐
align-content：辅轴空白的分布

4. 弹性元素的样式

flex-grow
flex-basis: 元素基础长度，指定的是元素在主轴的基础长度，如果主轴是横向的，该值指定的是元素的宽度；如果主轴是纵向的，则该指指定的就是元素的高度

默认值是auto，表示参考元素自身的高度或者宽度

如果传递了一个具体的数值。则以该值为准。
flex弹性元素可以设置元素所有的三个样式

flex : 增长缩减基础长度
order：决定弹性元素的排列顺序

十一、像素

1. 简介

像素

屏幕是由一个一个发光的小点构成，这一个一个的小点就是像素。

分辨率：1920 x 1080说的就是屏幕中小点的数量

在前端开发中像素主要分成两种情况讨论，css像素和物理像素。

物理像素：上面的小点。

css像素：编写网页时，我们所使用的都是css像素
```
浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定

默认情况下，在pc端，一个css像素=一个物理像素
```
视口（viewport）

视口就是屏幕中浏览器用来显示网页的区域。默认情况下，视口宽度是1920像素（css像素），物理像素（1920）；
手机像素

智能手机的像素远远小于计算机的像素点。默认情况，手机移动端得到网页都会将视口设置为980像素（css像素）。但是如果网页的宽度超过了980px，移动端的我浏览器会自动对网页缩放以完整的显示网页。

基本上大部分pc端的网站都可以在移动端中正常浏览。

可以通过<meta>标签设置视口大小。每一款移动设备都会有自己的像素比。将像素比设置为最佳像素比的视口大小称之为完美视口。

可以设置device-width表示设备的宽度

<meta name="viewport content="width=device-width,initial-scale=1.0">

2. vw单位

引出：

不同的设备完美视口不一样，由于不同设备视口和像素比不同，所以同样的像素下在不同的设备是不同的，比如一个设备下面是全屏的，另一个设备就不是全屏的或者装不下出现滚动条。所以在移动端开发时，对网页就不能使用px来进行布局了。
简介：

新单位：表示视口的宽度（viewport width）,100vw就是一个视口的宽度。vw这个单位永远相对于视口宽度进行计算

常见的移动端设计图的宽度：750px、1125px。都是375px的倍数，以为默认1css像素 ==2px

100vw = 750px
vw适配

rem：和html的font-size一个大小，网页中字体大小最小是12px，不能设置一个比12像素更小的字体

十二、媒体查询

1. 响应式布局

网页可以根据不同的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
响应式布局的关键就是媒体查询
通过媒体查询，可以为不同的设备，滚着设备不同的状态来分别设置样式。

2. 使用媒体查询

<style>

    @media
    
</style>

语法: @media 查询规则()

媒体类型

all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器

可以使用，连接多个媒体类型，中间是或的关系。

only的使用主要是为了兼容一些老版本浏览器

Java知识库最新文章

计算距离春节还有多长时间

系统开发系列之WebService（spring框架+ma

springBoot+Cache(自定义有效时间配置)

SpringBoot整合mybatis实现增删改查、分页查

spring教程

SpringBoot+Vue实现美食交流网站的设计与实

加:2022-01-08 13:51:00 更:2022-01-08 13:51:23

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 7:54:24-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码