管理
首页 前端 正文
  • 本文约41663字，阅读需3小时
  • 158
  • 0

HTML+CSS+移动端

温馨提示：本文最后更新于2024年7月26日 20:28，若内容或图片失效，请在下方留言或联系博主。

标签

基础标签

标题标签H

标题标签一共有6级

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题标签

段落标签P

段落之间独占一行，段落之间存在间隙

<p>段落</p>

换行标签br

让文字换行

<br/>

分割线标签hr

显示横线分割内容

<hr/>

文本格式化标签

文本格式化标签

加粗标签

<b>加粗</b>
<strong>加粗</strong>

下划线标签

<u>下划线</u>
<ins>下划线</ins>

斜体

<i>斜体</i>
<em>斜体</em>

删除线标签

<s>删除线</s>
<del>删除线</del>

多媒体

图片

src: 图片路径; title:鼠标悬浮时显示的文本 ; alt:图片加载失败时显示的文本; width图片宽度,一般使用css设置; height:图片高度，一般使用css设置当宽度或高度只设置任一个时，另一个会自适应

<img src="" title="" alt="" width="" height="">
属性 作用 说明
src 指定图片位置
title 提示文字
alt 替换文本 加载图片失败时显示文字提示
width 图片宽度
height 图片高度

音频

<audio src="./demo.mp3" controls></audio>
属性 功作用 说明
src 音频地址
controls 显示控件
autopplay 自动播放
loop 循环播放

视频

<audio src="./demo.mp4" controls></audio>
属性 作用 说明
src 音频地址
controls 显示控件
autopplay 自动播放
loop 循环播放

超链接

超链接用法 href:目标位置 target:跳转方式(_blank: 在新窗口打开；_self: 在原有窗口打开)

<a href="http://www.baidu.com" target="_blank">百度</a>

锚点用法 hsef属性等于#加锚点位置标签的id

<a href="#id" target="_blank">id锚点</a>
属性 作用 说明
href 跳转位置
target 跳转方式 _blank :新窗口打开 _self原有窗口打开 ，默认为原窗口打开

无序列表

ul内只允许包含li标签，li标签可以包含任意标签

<h1>无序列表</h1>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>梨子</li>
<li>西瓜</li>
</ul>

有序列表

ol内只允许包含li标签，li标签可以包含任意标签

<h1>有序列表</h1>
<ol>
<li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>梨子</li>
    <li>西瓜</li>
</ol>

自定义列表

ol内只允许包含dt/dd标签,dt是列表标题,dt/dd内可以包含任意标签

<h1>自定义列表列表</h1>
<dl>
<dt>标题</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>橘子</dd>
    <dd>梨子</dd>
<dd>西瓜</dd>
</dl>

表格标签

<table border="1" width="400" height="200" >
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
                <th>平均</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张无忌</td>
                <td>95</td>
                <td>武功盖世，威风无比</td>
                <td rowspan="2" >94.5</td>
            </tr>
            <tr>
                <td>赵敏</td>
                <td>94</td>
                <td>英姿飒爽</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">绝代双骄</td>
            </tr>
        </tfoot>
</table>
属性 作用 说明
border 设置表格边框 值为数字
width 设置表格宽度
height 设置表格高度
rowspan 行合并单元格 值为数字 表示合并单元格个数,使用在td标签
colspan 列合并单元格 值为数字 表示合并单元格个数

border/width/height通常使用css设置

子标签

标签 作用 说明
caption 表格标题
thead 表格头
tbody 表格体
tfoot 表格脚
tr 行
td 单元格

表单

属性 作用 说明
type 指定控件类型 text:文本框 radio:单选框 checkbox:多选框 file:文件框 button:按钮 submit:提交按钮 reset:重置表单按钮
name 控件名称 提交表单时的参数名名称
checked 选中 无属性值,表示选中
placeholder 控件提示 用于提示控件输入内容
multiple 多选文件 用于文件上传框

文本框

<input type="text" name="Name" placeholder="请输入姓名" />

单选框

<input type="radio" name="Sex" checked value="男" />

多选框

<input type="checkbox" name="like" checked value="足球"/>

文件框

<input type="file" name="file" multiple>

下拉框

            <select name="area">
                <option value="湖北">湖北</option>
                <option value="湖南">湖南</option>
                <option value="湖南">湖南</option>
                <option value="浙江" selected>浙江</option>
            </select>
属性 作用 说明
select 设置默认选中项 原生下拉框只允许选中一项

多行文本框

<textarea name="remarks" placeholder="请输入备注">

按钮

<input type="button" value="普通按钮" title="普通按钮">

提交按钮

<input type="submit">

重置按钮

用于重置表单

<input type="reset">

表单

    <form action="http://www.baidu.com" method="get">
    </form>
属性 作用 说明
action 表单提交地址
method 提交方式 [post,get] 
    <form action="http://www.baidu.com" method="get">
        <label>姓名:<input type="text" name="Name" placeholder="请输入姓名" /></label><br>
        <label>密码:<input type="password" name="password" placeholder="请输入密码"/></label><br>
        <label>性别:
            <input type="radio" name="Sex" checked value="男" />男
            <input type="radio" name="Sex" value="女" />女
        </label><br>
        <label>描述:
            <input type="text" name="describe" value="描述内容" />
        </label><br>
        <label>兴趣爱好:
            <input type="checkbox" name="like" checked value="足球"/>足球
            <input type="checkbox" name="like"  value="篮球"/>篮球
            <input type="checkbox" name="like"  value="篮球"/>乒乓球
        </label><br>
        <label>生日:<input type="date"/></label><br>
        <label>地区:
            <select name="area">
                <option value="湖北">湖北</option>
                <option value="湖南">湖南</option>
                <option value="湖南">湖南</option>
                <option value="浙江" selected>浙江</option>
            </select>
        </label><br>
        <label>多选:
            <select name="option" multiple>
                <option value="选项1">选项1</option>
                <option value="选项2">选项2</option>
                <option value="选项3" selected>选项3</option>
                <option value="选项4" selected>选项4</option>
            </select>
        </label><br>
        <label>上传文件:
            <input type="file" name="file" multiple>
        </label><br>
        <label>
            备注:
            <textarea name="remarks" placeholder="请输入备注">
            备注
            </textarea>
        </label>
        <br>
        <input type="button" value="普通按钮" title="普通按钮">
        <input type="submit">
        <input type="reset">
    </form>

布局

无语义布局标签

div一行只能显示一个, span一行可以显示多个

 <div>内容1</div>
 <span>内容2</span>

有语义布局标签

    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

CSS

样式表引入方式

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

选择器

标签选择器

p{

}

类选择器

.calssName
{

}

Id选择器

#idName

}

后代选择器

选择后代所有子集 （选择在A标签里面所有的B元素，不止第一代）


.calss1 .class2
{

}


### 子类选择器

>选择直接子集,表示选择class1元素的所有子class2元素 （只选择第一代）
```css
.class1>class2{

}

交集选择器

.class1.class2
{

}

并集选择器

.class1,.class2
{

}

相邻兄弟选择器

A+B{} 这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有同
的父元素，可以使用相邻兄弟选择器，（兄弟的意思就是相邻，可以不是同一种元素）

h1 + p {margin-top:50px;}

兄弟选择器

A~B选择器 A之后出现的所有B。
两种元素必须拥有相同的父元素，但是 B不必直接紧随A。

h1 ~ p {margin-top:50px;}

hover选择器

用于鼠标悬停样式

.class:hover{

}

outline 属性

轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
个例子来说吧：在我们平时阅读浏览器里的内容时，当鼠标点击让一个a标签链接或者一个input的单选框获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是轮廓(outline)。

在默认情况下，点击a标签，input，或者添加鼠标点击事件的时候，浏览器就会留下一个轮廓外框(chrome之下为蓝色)。然而这些默认的轮廓外框，有时候很影响美观，破坏了前端页面的整体效果，我们并不是很想保留下来。那么如何把浏览器默认的轮廓外框去掉，又或者改变这个默认的轮廓外框效果？

css的轮廓(outline)属性让我们可以改变这个默认的轮廓虚线框效果。轮廓(outline)属性有如下的相关属性：

outline：在一个声明中设置所有的轮廓属性
outline-style：设置轮廓的样式
outline-width：设置轮廓的宽度
outline-color：设置轮廓的颜色
outline-offset：对轮廓进行偏移，并在边框边缘进行绘制

其中第1个相关属性outline是速写形式，格式为：
outline:outline-color||outline-style||outline-width；

让我们不用一个一个的设置轮廓的相关样式，可以一次性完成设置。
我们用下面的例子来看看css的轮廓(outline)属性的使用：
如果想让链接获取到焦点时更醒目，可以设置轮廓线条为红色，可以如下：
.a{outline:5px solid red;}

结构伪类选择器

查找单个

first-child:父元素中的第一个子元素
last-child：父元素中的最后一个子元素
nth-child(n): 父元素中的第n个子元素
nth-last-child(n): 父元素中的倒数第n个子元素
nth-child-type(n):父元素中第n个相同类型的子元素

<style>
    ul li:first-child{
        background-color: aqua;
    }
    ul li:last-child{
        background-color: red;
    }
    ul li:nth-child(3){
        background-color: cadetblue;
    }
    ul li:nth-last-child(2)
    {
        background-color: chartreuse;
    }
</style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

查找多个

nth-child(n)中的N可以组成常见的公式

功能 公式
选择偶数个元素 2n或者even
奇数个元素 2n+1,2n-1,odd
找到前5个 -n+5
找到后五个 n+5

伪类选择器

  • 同时使用多个链接伪类选择器时需要按照顺序LVHA
语法 功能
a:link{} a标签未访问时
a:visited{} a标签访问后
a:hover{} 鼠标悬停
a:active{} 鼠标按下时

焦点伪类选择器

  • 用于元素获取焦点时
    input : focus { }

属性选择器

  • 通过元素属性来找元素
选择器 功能
E[atter] 选择具有atte属性的元素E
E[atter="val"] 选择具有atter属性且值为val的元素E

CSS特性

继承性

子元素默认继承父级元素的样式
color，font ,text-indenx,text-align,line 等属性都可以继承

继承失效

a标签的color会继承失效，h标签的font-size会继承失效，div高度不能继承，宽度可以继承
元素有默认样式时，继承依然存在，但会优先显示默认样式

层叠性

同一个元素设置不同样式，样式会叠加
同一个标签设置相同样式，样式会覆盖，写在最后的样式生效
当样式冲突时，只有选择器优先级相同才能通过层叠性判断结果

优先级

不同选择器优先级不一样，高优先级的会覆盖低优先级的样式
继承\<通配符选择器\<标签选择器\<类选择器\<id选择器\<行内样式\<!important
!important的写法为在属性值后追加, 例如background-color: chartreuse !important;
实际开发中不建议使用!important

在css中，可以在样式后面写上“!important”来提升指定样式规则的应用优先权，语法“选择器{样式:
值!important;}”。ie6中不能识别，但在ie7和其他的浏览器中可以使用，用来处理浏览器的兼容性。

!important语法
选择器{样式:值!important;}
!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这
个样式的属性和属性值

权重叠加计算

自定义列表

一级级比较，数字最大优先级最高，比较出来后后面的不用看
当相同级别数字相同则依次向后比较
最终比较结果完全一致的情况下写在最后的优先级最高

字体

属性 作用 案例 说明
color 设置字体颜色 color:10px
font-size 字体大小 font-size:10px
font-style 字体样式 font-style:normal normal 正常; italic 斜体
font-weight 粗体 font-weight:normal normal 正常; bold 粗体; 400 正常; 700 粗体
font-family 字体 font-family: '宋体', "微软雅黑", sans-serif 字体可以声明多个，当第一字体无法加载时依次往后加载,sans-serif 无衬线字体，笔画粗细均匀，首尾无装饰，一般用于网页; serif 衬线字体,粗细不均，且有笔锋装饰，用于报刊书籍; monospace 等宽字体,字符宽度相等，用于程序代码
font 样式 粗体 大小/行高 字体,字体的缩写 font: italic 100 30px/40px "楷体","宋体","隶书",sans-serif;; 必须按顺序书写，样式 粗体 大小/行高 字体,字体); 样式与粗体可以省略
text-indent 字体缩进 text-indent: 2px; 取值为数字+px或者数字+em; ( 1em=当前标签的字体大小)
text-align 对齐 text-align: center; center水平对齐 center居中对齐，left 左对齐，reight 又对齐（文本，span，input，img都可以使用此方式对齐，设置给父元素）
text-decoration 文本装饰 text-decoration: underline; underline上划线 ；line-through删除线 overline上划线 none无装饰线（通常会使用text-decoration:none;来清除a标签的默认下划线）
display 元素类型 display: inline
display: block		 display: inline行内元素
一行可以显示多个，宽度和高度不能设置，又内容撑开，常见标签有a,span,b,u,i,p
display: block;块级元素 
独占一行，一行只能显示一个，宽度默认是父级元素的宽度，可以设置高度，常见的有div,p,h,ul,li,dl,dt,form,headrer,nav,footer等等
块级元素作为容器可以嵌套任何元素，p标签不能嵌套,a标签可以嵌套任何元素，但不能嵌套a标签
line-height 行高 line-height: 10px; 同时有font与line-heigh时存在覆盖问题(文字垂直居中)
text-shadow 文字阴影 text-shadow:10px 10px 10px red text-shadow：h-shadow v-shadow blur core
h-shadow 必填水平偏移量
v-shadow 必填,垂直偏移量
blur 可选，模糊度
color 可选，阴影颜色
文字阴影可以设置多个，多个之间用逗号相隔
css<br> text-shadow: 10px 10px 10px red,10px 10px 10px blue;<br>

通用样式

属性 作用 案例 说明
background-color 背景颜色 background-color: chartreuse;
background-image 背景图片 background-image: url('./6358ef654fb8349b4fe1837fc96a0119.jpeg');
background-repeat 背景平铺
background-repeat: no-repeat;		 背景平铺(repeat平铺 no-repeat不平铺 repeat-x横向平铺 repeat-y垂直平铺)
background-position: 背景位置 background-position: center center; 背景位置(center 居中 left居左 right 居右,位置除了使用属性也可以是使用具体位置参数 例如40px)
background-size 1.数字+px:设置背景图片大小
2.百分比:按盒子自身大小比例设置背景图片大小
3.contain:图片按盒子大小等比例缩放
4.cover:覆盖铺满
5.连写：background：color image repeat position/size
background 背景连写 background: chartreuse url('./6358ef654fb8349b4fe1837fc96a0119.jpeg') no-repeat center center; (背景连写可以省略不需要的属性)

argin: 0 auto; 水平居中，对div p h 等标签作用，给元素本身设置，当本元素未设置宽度时使用此样式会导致占满父元素宽度

盒子

边框

页面中的每一个标签都可以看作一个盒子，
每个盒子包含内容区域content ，内边距 padding ， 边框 border ， 外边距 margin 构成，这个就是盒子模型

属性 作用 例子 说明
border-width 边框大小 border-width: 10px; 边框粗细 数字+px
border-style 边框样式 border-style: solid; 边框样式 solid实线，dashed 虚线，dotted 点线
border-color 边框颜色 border-color: bisque;
border: border连写 border: 10px solid bisque; (边框宽10px,实线,橘黄色)

![[img/img_2024-04-09_20-41-53.png]]

box-sizing属性

作用

  • box-sizing 属性是用来更改 CSS盒模型 中的这种 计算元素宽高 的一种方法
    取值
  • content-box，此值为默认值，如果元素的高宽为100px,那么这个盒子的内容占用100px,然后盒子的外边距，内边距，边框的宽度都会增加到最后元素整体的大小上
  •  border-box，此值会自动缩放盒子内容占用大小 如果设置宽度为100px,元素整体占用大小还为100px,内容宽度为100px-外边距-内边距-边框

    内边距

设置容器内容与边框的距离

padding边距会撑大盒子的大小；

1，在块元素没有设置宽度时，宽度默认为父级元素的宽度，此时padding不会撑大盒子
2，只设置左右padding或border也不会撑大盒子

border或padding导致盒子变大有两种解决方式

1，手动减小盒子大小
2、自动减小盒子大小 box-sizing:border-box;

属性 作用 例子 说明
padding 设置上下左右边距 padding:10px; 设置上下左右边距都为10px
padding 设置上下左右边距 padding:10px 20px 30px; 上边距10，下边距30，左右边距为20;
padding 设置上下左右边距 padding:10px 20px 30px 40px; 上边距为10；右边距20，下边距为30；左边距为40;
padding 设置上下边距 padding:10px 20px; 设置上下边距为10， 左右边距为20；
box-sizing 设置边框 1.content-box:默认值 内边距与边框会加入总大小
2.border-box:内容区的实际宽度会是 width 减去 border + padding 的计算值。		 
*{
        /* 默认去边框 */
        margin: 0px;
        padding: 0px;
    }
    #box{
        margin: 10px 10px;
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;/* 下边框 */
        padding: 30px 30px 0;/* 内间距 上30 左右30 */
        box-sizing: border-box; /* 边框自动内减 */
        line-height: 1;/* 去除行高间距 */
    }
    #box h2{
        height: 41px;
        border-bottom: 1px solid #ccc;/* 下边框 宽度1 实线 */
        box-sizing: border-box;/* 边框自动内减 */
        font-size: 30px;
    }
    #box li{
        list-style: none;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
        border-bottom: 1px dashed #ccc;/* 下边框 宽度1 虚线 */
        box-sizing: border-box;
    }
    #box li a{
        text-decoration: none;/* 去除a标签下划线 */
        font-size: 18px;
        color: black;
    }
</style>
<body>
    <div id="box">
        <h2>最新文章</h2>
        <ul>
            <li><a href="#">北京招聘网页设计师</a></li>
            <li><a href="#">体验javascript魅力</a></li>
            <li><a href="#">Jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">Jquery中的链式编程</a></li>
        </ul>
    </div>

外间距

属性 作用 例子 说明
margin 设置上下左右外边距 margin:10px; 设置上下左右边距都为10px
margin 设置上下左右外边距 margin: 10px; 上下左右10px
margin 设置上左右边距 margin: 10px 10px; 上10px  左右10px
margin margin: 10px 10px 10px; 上10px 左右10px 下10px
margin margin: 10px 10px 10px 10px; 上10px 右10px  下10px 左10px
margin margin-top: 10px; 上10px
margin margin-left: 10px; 左10px
margin margin-right: 10px; 右10px
margin margin-bottom: 10px; *下0px 
 p{
        
       
       
       
        
        
        
        
    }

外边距层叠合并
两个上下相邻的盒子，上盒子设置margin-bottom,下盒子设置margin-top，此时上下margin会出现合并现象，最终间距为两个间距中最大值，解决办法为只设置其中一个

<div style="width: 100px;height: 100px;background-color: aqua; margin-bottom: 100px;"></div>
<div style="width: 100px;height: 100px;background-color: blanchedalmond;margin-top: 120px;">
</div>

盒子塌陷

<div style="width: 200PX;height: 200px;background-color: brown;">

        <div style="width: 100px;height: 100px;background-color: aqua;margin-top: 50px;"></div>

    </div>

盒子塌陷也称为盒子模型塌陷（Box Model Collapse），是指块级元素的高度在某些情况下会因为其内部浮动元素或内联元素的布局特性而塌陷或无法撑开

盒子塌陷通常发生在以下几种情况：

  • 父元素的高度塌陷。当父元素的高度依赖于其内部的浮动元素时，如果父元素没有设置明确的高度或使用适当的清除浮动方法，父元素的高度将塌陷为0，导致其无法撑开。
  • 子元素的高度塌陷。当子元素浮动时，父元素的高度也会塌陷为0，因为浮动元素不再占据父元素的空间。
  • 内联元素导致的高度塌陷。当父元素包含只有内联元素（没有块级元素）时，父元素的高度可能会塌陷为0。

解决盒子塌陷的方法包括：

  • 设定盒子的固定尺寸。为每个盒子设定固定的宽度和高度。
  • 使用浮动。给外部的父盒子也添加浮动，使其脱离标准文档流。
  • 使用overflow属性。在父盒子上设置overflow属性，如overflow:auto可能导致出现滚动条，而overflow:hidden可能导致内容不可见。
  • 使用清除浮动块。在父盒子里最下方引入清除浮动块，如使用<br style="clear:both;"/>。
  • 使用after伪类清除浮动。在外部盒子的after伪元素上设置clear属性。

此外，解决盒子塌陷的方法还有给父级标签设置内边距、边框，将父级元素改变为行内块元素，设置浮动，给父元素设置bordr-top或者padding-top，或使用定位等。
选择哪种方法取决于具体情况和设计需求，重要的是确保布局的稳定性和用户体验。

行内元素设置margin与padding时，只对水平方向有效，对垂直方向无效

盒子阴影

box-shadow属性语法
box-shadow 属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
换句说： 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
不像其它的属性，比如 border，它们的接受值可以被拆分为一系列子属性，box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要，尤其是那些长度值

  • offset-x

    指明了阴影水平方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数
    时，阴影在元素的上方

  • offset-y

    指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数
    时，阴影在元素的上方。

  • blur

    第三个值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为
    0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值
    是不合法的，会被修正成 0。

  • spread

    第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，
    则缩小。前提是存在阴影模糊半径。

  • color

    color 部分的值正如你所预料的，是指阴影的颜色。它可以是任意的颜色单元 （见 在 CSS 中与颜色打交道）。

  • position

    此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；
    如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。

div {box-shadow:10px 10px 10px 10px red inset }

伪元素

::before：在父元素内容中最前添加第一个伪元素
:after：在父元素内容中最后添加一个伪元素
伪元素默认是行元素
伪元素必须设置content才生效

 <style>
 ul li a::before{
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: blueviolet;
        border: 1px solid ;
    }
        .box::before{
            content: "伪元素1";
        }
        .box::after{
            content: "伪元素2";
        }
    </style>
    <div class="box">
        <p>元素1</p>
        <p>元素2</p>
    </div>
    <style>
        .app span::before{
            content: "";
            display: block;
            width: 16px;
            height: 26px;
            background-color: aqua;
            float: left;
            margin-left: 10px;
        }
    </style>
    <div class="app">
<span></span><span></span><span></span><span></span><span></span>
    </div>

标准流

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素，从左往右，水平布局，空间不够自动换行

学习进度:浮动
2023-04-24 22:53 😴

浮动

浮动用户图文环绕与网页布局

浮动是特点

  • 浮动会让元素脱离标准流，不在标准流中的位置
  • 浮动的元素比标准流的元素高半个级别，会覆盖标准流中的元素
  • 特点demo
  • 多个元素使用相同浮动会按浮动方向并列显示
  • 浮动方向demo
  • 浮动元素会受到前一个元素的边界影响,因为块元素独占一行
  • 浮动边界
  • 浮动的元素具有特殊的显示效果 
    一行可以显示多个块元素
可以使无法设置宽高的元素能够设置宽高
图文环绕

图文环绕Demo

img{
    float: left;
    margin-right: 20px;
}

图文环绕Demo

网页布局

网页布局

 #left{
            width: 180px;
            height: 180px;
            background-color: blueviolet;
            float:left;
        }
        #right{
            width: 180px;
            height: 180px;
            background-color:chartreuse;
            float:right;
        }

浮动网页布局Demo

案例

1. 案例1模块

![[img/img_2024-04-07_21-11-12.png]]

    <style>
        *{
            margin: 0px;
            padding: 0px;
            font-size: 14px;
        }
        .box{
            width: 1226px;
            height: 614px;
            background-color: aqua;
            margin: 100px auto;

        }
        .left{
            width: 234px;
            height: 614px;
            background-color: blueviolet;
            float: left;
        }
        .right{
            width: 978px;
            height: 614px;
            background-color: bisque;
            float: right;
        }
        .right .item
        {
            width: 234px;
            height: 300px;
            background-color: #81c9ef;
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
        }
        .right .item:nth-child(4n){
            margin-right: 0px;
        }
        .right .item:nth-child(n+5)
        {
            margin-bottom: 0px;
        }
    </style>
<div class="box">

        <div class="left">
        </div>
        <div class="right">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

2、案例网站导航

![[img/img_2024-04-07_21-28-12.png]]

    <style>
         *{
            margin: 0px;
            padding: 0px;
            font-size: 14px;
        }
        ul{
            width: 640px;
            margin: 100px auto;
            list-style: none;
        }
        ul>li{
            float: left;
        }
        ul>li a{
            display: block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #ffc4c9;
            text-decoration: none;
            color: #fff;
        }
        ul>li>a:hover{
            background-color: #036c02;
            color: #000;
        }
    </style>
<ul>
        <li><a href="">首页</a></li>
        <li><a href="">导航2</a></li>
        <li><a href="">导航3</a></li>
        <li><a href="">导航4</a></li>
        <li><a href="">导航5</a></li>
        <li><a href="">导航6</a></li>
        <li><a href="">导航7</a></li>
        <li><a href="">导航8</a></li>
    </ul>

浮动案例

案例
案例1

案例2
案例2

学习进度:清除浮动

清除浮动

如果子元素设置了浮动，则子元素无法自动撑开父元素，导致父元素的高度为0，此时父元素后的同级元素会被遮盖，因为浮动元素脱离了标准流，不在标准流中占位

设置高度清除浮动

给父元素指定一个高度，父元素后的同级元素就不会受到浮动的影响上移

1. 标签清除浮动

在父元素内的最后添加一个块元素，给块元素设置样式claer:both

此方式会增加结构复杂度，不建议使用

2. 伪元素清除浮动(推荐写法)

2.1 单伪元素清除法

在正常情况下添加伪元素，将伪元素设置为块元素，设置内容为空，并设置claer样式属性即可，但部分浏览器可能无法正确识别伪元素，为了兼容此类浏览器，则需要给伪元素设置一个值，并隐藏该元素
优点:直接使用，直接给标签加类即可清除浮动

.clear::after{
    content:'.';
    display:block;
    claer:both;
    heigth:0;
    visibility:hidden;
}

伪元素在旧浏览器上可能不兼容，一般在为元素内容设置个点，把高度设置为0就可以不可见了

为了区分伪选择器与伪元素，伪元素使用双冒号

2.2. 双伪元素清除浮动

此方式为固定写法，也可用于解决盒子margin引起的盒子塌陷问题

.claer::before,
.claer::after
{
content:'';
display:table;
}
.claer::afer
{
claer:both;
}

3. 样式属性清除浮动

.claer{
    overflow:hidden;
}

BFC

BFC(Block Fromatting Context) 块格式化上下文

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

BFC创建方法

  • HTML标签是BFC盒子
  • 浮动元素是BFC盒子
  • 行内块元素是BFC盒子
  • Overflow属性取值不为visible的

BFC盒子特点

  • 默认包裹内部子元素（标准流，浮动）--用于清除浮动
  • 盒子本身与子元素之间不存在margin的塌陷现象， --用于解决margin的塌陷

定位

定位的属性名为postion

常见应用场景

  • 解决盒子与盒子之间的层叠问题，定位后的元素层级最高，可以叠在其它盒子的上面
  • 可以让盒子始终固定在一个位置
属性值 定位方式
static 静态定位
relative 相对定位
absolute 绝对定位
fixe 固定定位

设置偏移

偏移值分别设置两个方向，水平与垂直各设置一个
偏移值一般是就近原则，距离那个近设置那个
偏移值可以为负数

方向 属性名 属性值 含义
水平 left 数字+px 距离左边距离
水平 right 数字+px 距离右边距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离

1. 静态定位static

特点

  1. 静态定位是默认值，属于标准流，不能通过方向属性进行移动
  2. static（默认值）：元素按照正常文档流进行布局，不会被其他元素所影响。

代码

position: static;

2. #相对定位relative

postion:relative
相对与之前所在位置进行移动

  1. 需要配合方位属性移动
  2. 相对自己原来的位置移动
  3. 在页面中占位，没有脱离标准流
  4. 通过设置top、bottom、left或right来调整元素的位置，但保持原始空间不变。
position: relative;top: 50px; /*向下移动50像素*/left: -30px; /*向左移动30像素*/

应用场景

  1. 配合绝对定位组合（子绝父相）
  2. 用于小范围移动

3. 绝对定位absolute

作用

  1. 相对于非静态定位的父元素进行定位移动

特点

  1. 需要配合方位属性移动
  2. 默认相对于浏览器可视区域移动
  3. 在页面中不占位置，已经脱离标准流
  4. 根据最近的有定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（body）进行定位。
  5. 祖先元素中没有定位就相对于浏览器区域移动
  6. 祖先元素中有定位就相对于祖先元素进行移动

代码

position: absolute;top: 50%; /*相对于容器顶部居中*/left: 50%; /*相对于容器左边居中*/transform: translate(-50%, -50%); /*使用translate函数微调位置*/

应用场景

  1. 配合绝对定位（子绝父相）

● 子觉父相

案例

1. 底部半透明遮罩

![[img/img_2024-04-09_00-44-02.png]]

代码

.Parent{
            width: 800px;
            height: 500px;
            margin: 0px auto;
            background-image: url(img/1.jpg);
            background-size:cover;
            position:relative;
        }
        .son{
            width: 100%;
            height: 100px;
            background-color: rgb(0,0,0,.6);
            position: absolute;
            bottom: 0px;
        }
<div class="Parent">
<div class="son"></div>
</div>

2. 悬浮标记

![[img/img_2024-04-09_01-06-47.png]]

代码

.Parent{
            width: 400px;
            height: 500px;
            margin: 100px auto;
            background-color: beige;
            position:relative;
        }
        .son{
            width: 100px;
            height: 60px;
            background-image: url(img/1.jpg);
            background-size: cover;
            position: absolute;
            top: 30px;
            right: -20px;
        }
<div class="Parent">
<div class="son"></div>
</div>

3. 水平居中

![[img/img_2024-04-09_00-49-05.png]]

代码


.Parent{
            width: 800px;
            height: 500px;
            margin: 0px auto;
            background-color: beige;
            background-size:cover;
            position:relative;
        }

        .son{
            width: 300px;
            height: 200px;
            background-image: url(img/1.jpg);
            background-size: cover;
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
        }

```html
<div class="Parent">
    <div class="son"></div>
</div>

4.水平垂直居中

![[img/img_2024-04-09_00-52-56.png]]

代码

.Parent{
            width: 800px;
            height: 500px;
            margin: 0px auto;
            background-color: beige;
            background-size:cover;
            position:relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-image: url(img/1.jpg);
            background-size: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
            /* transform: translateY(-50%); */
            transform: translate(-50%,-50%);
        }
<div class="Parent">
            <div class="son"></div>
</div>

注意

  • 相同属性名写在最后的会覆盖前面的属性
  • transform为 二维变换属性， translateX与translate为移动函数

4. 固定定位fixed

作用

  1. 相对浏览器页面运动进行固定定位

特点

  1. 固定定位，与absolute类似，但是相对于视口而非已定位祖先元素进行定位。
  2. 需要配合方位属性
  3. 相对与浏览器可视区域移动
  4. 在页面不占位，已脱标

代码

position: fixed;top: 0; /*相对于视口顶部*/left: 0; /*相对于视口左边*/width: 100vw; /*宽度为视口宽度*/height: 100vh; /*高度为视口高度*/z-index: 9999; /*设置叠放次序*/

应用场景

  • 让盒子固定在屏幕的某个位置

这些只是CSS定位属性的基本介绍，还可以结合其他属性（如overflow、display等）来更加精确地控制元素的定位效果。

5. 粘性定位# sticky

粘性定位它基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目
位置。

5.1. 特点：

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中
一，才可使粘性定位生效。否则其行为与相对定位相同。
偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。
sticky元素会固定在离它最近的一个拥有滚动机制的祖先上，如果祖先元素都不可以滚动，那么是相对于viewpor
来计算元素的偏移量。

粘性定位与其他常见的定位方式（如相对定位、绝对定位和固定定位）有所不同。相对定位是相对于元素自身的原始位置进行定位，绝对定位是相对于最近的已定位祖先元素进行定位，固定定位是相对于视口进行定位。而粘性定位则是在滚动过程中切换定位方式，既可以相对于视口进行定位，也可以相对于容器进行定位。

粘性定位的使用方法非常简单，只需要将元素的position属性设置为sticky即可。同时，还需要指定元素在滚动
的偏移值（top、bottom、left、right），以确定元素相对于视口或容器的位置。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 10px;
}

设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于10px之前，div为相对定位。之后元素将固定在与顶部距离10px的位置，直到viewport视口回滚到10px以内。

5.2. 原理

![[img/9908b3e3b98b494e93796b5a4249a7a5.png]]

视口元素：显示内容的区域。会设置宽高。一般会设置 overflow:hidden。
容器元素：离 sticky 元素最近的能滚动的祖先元素。
粘性约束元素：粘性定位的父元素。有时也会出现粘性约束元素就是容器元素的情况。
sticky 元素：设置了 position: sticky; 的元素。
滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时，sticky 元素也会滚出视口。

5.3.可能存在的不生效的情况

5.3.1 未指定 top, right, top 和 bottom 中的任何一个值
此时，设置 position: sticky 相当于设置 position: relative。
要生效，要指定 top, right, top 或 bottom 中的任何一个值。

5.3.2 垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度
当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。
水平滚动时，粘性约束元素宽度小于等于 sticky 元素宽度时，也不会生效。

5.3.3 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

示例如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .viewport {
                width: 375px;
                height: 300px;
                background-color: pink;
                padding: 20px;
                overflow: auto;
            }

            .container {
                height: 500px;
                background-color: skyblue;
                padding: 20px;
            }

            .box {
                height: 300px;
                background-color: lightgoldenrodyellow;
                padding: 20px;
            }

            .stick-elem {
                height: 50px;
                background-color: seagreen;
                padding: 20px;
                position: -webkit-sticky;
                position: sticky;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <!-- 视口元素 -->
        <div class="viewport">
            <h3>视口元素</h3>
            <!-- 容器元素 -->
            <div class="container">
                <h3>容器元素</h3>
                <div style="overflow: hidden;">
                    <!-- 粘性约束元素 -->
                    <div class="box">
                        <h3>粘性约束元素</h3>
                        <!-- sticky 元素 -->
                        <div class="stick-elem">
                            <h3>sticky 元素</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

6. 应用示例

6.1 头部固定

头部导航栏开始时相对定位顶部，当页面元素发生滚动时，变为和 fixed 类似的固定定位。
![[img/81cbedc252f641b19c9b502e2e08a234.png]]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .main-container {
                max-width: 375px;
                height: 300px;
                overflow: auto;
            }

            .main-header {
                height: 50px;
                background: pink;
                position: -webkit-sticky;
                position: sticky;
                top: 0;
            }

            .main-content {
                min-height: 500px;
                background: skyblue;
            }

            .main-footer {
                height: 50px;
                background: seagreen;
            }
        </style>
    </head>
    <body>
        <main class="main-container">
            <header class="main-header">HEADER</header>
            <div class="main-content">MAIN CONTENT</div>
            <footer class="main-footer">FOOTER</footer>
        </main>
    </body>
</html>

6.2 页脚固定

页脚固定效果，开始时页脚为固定定位效果，当页面滚动超过页脚时，页脚定位效果变为相对定位效果，可用于显示一些底部信息或广告。

![[img/1551b8a121a1455cbd4544df7a396327.png]]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .main-container {
                max-width: 375px;
                height: 300px;
                overflow: auto;
            }

            .main-header {
                height: 50px;
                background: pink;
                position: -webkit-sticky;
            }

            .main-content {
                min-height: 500px;
                background: skyblue;
            }

            .main-footer {
                height: 50px;
                background: seagreen;
                position: sticky;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <main class="main-container">
            <header class="main-header">HEADER</header>
            <div class="main-content">MAIN CONTENT</div>
            <footer class="main-footer">FOOTER</footer>
        </main>
    </body>
</html>

6.3 侧边栏固定

当页面产生滚动，位置超过侧边栏的 顶部阈值 后，侧边栏变为固定定位，可用于实现侧边导航栏或侧边提示信息及广告展示。

![[img/3d7b3302ab0847d2b5ab55e0669e1639.png]]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .scroll {
                width: 375px;
                height: 300px;
                overflow: scroll;
                padding: 0 10px;
                box-sizing: border-box;
                background: pink;
            }

            .wrapper {
                display: flex;
            }

            .content {
                padding: 0 15px;
                width: 200px;
            }

            .sidebar {
                width: 175px;
                height: 100%;
                padding: 20px;
                background: #2D2D2D;
                color: #FFFFFF;
                box-sizing: border-box;
                position: -webkit-sticky;
                position: sticky;
                top: 15px;
            }
        </style>
    </head>
    <body>
        <div class="scroll">
            <div class="wrapper">
                <div class="content">
                    <h1>Scroll Down!</h1>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus suscipit blanditiis delectus
                        quos, soluta fuga voluptatem, facere inventore neque voluptate quaerat unde laboriosam molestiae
                        repellat, sapiente accusamus cumque! Ipsam, illo!</p>
                </div>
                <div class="sidebar">
                    <h3>侧边栏</h3>
                </div>
            </div>
        </div>
    </body>
</html>

6.4 列表描点

仅使用 css 就可实现页面滚动锚点固定效果，可用于实现通讯录滚动、日志记录滚动、其他分类列表滚动效果。

![[a7dba4c16a4f4f57a1d40f6bf224f438.png]]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .container {
                width: 375px;
                height: 300px;
                position: relative;
                overflow: auto;
            }

            .list {
                min-height: 500px;
                background: pink;
            }

            .list-content,
            .list-content>div {
                padding: 10px 20px;
            }

            .list-header {
                padding: 10px;
                background: #2D2D2D;
                color: #FFFFFF;
                font-weight: bold;
                position: sticky;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="list">
                <div class="list-group">
                    <div class="list-header">A</div>
                    <div class="list-content">
                        <div>Apple</div>
                        <div>Artichoke</div>
                        <div>Aardvark</div>
                        <div>Ant</div>
                        <div>Acorn</div>
                    </div>
                </div>
                <div class="list-group">
                    <div class="list-header">B</div>
                    <div class="list-content">
                        <div>Big</div>
                        <div>Body</div>
                        <div>Base</div>
                        <div>Baby</div>
                        <div>But</div>
                    </div>
                </div>
                <div class="list-group">
                    <div class="list-header">C</div>
                    <div class="list-content">
                        <div>Car</div>
                        <div>Cat</div>
                        <div>Cute</div>
                        <div>Can</div>
                    </div>
                </div>
                <div class="list-group">
                    <div class="list-header">D</div>
                    <div class="list-content">
                        <div>Dog</div>
                        <div>Date</div>
                        <div>Danish</div>
                        <div>Dandelion</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

6.5 表格表头固定

对 table 元素的 th 或 tr 设置 position: sticky; 可以实现表格头部或某行固定，也可将多个表格合并到一起，当滚动到当前表格是，固定头部自动变为当前表格的表头。
![[img/6a01a40eed914796a5c99a3737061f8a.png]]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .container {
                width: 375px;
                height: 300px;
                width: fit-content;
                overflow: auto;
            }

            table {
                text-align: left;
                position: relative;
                border-collapse: collapse;
            }

            th,
            td {
                padding: 30px 17px;
            }

            tr:nth-child(even) {
                background: #EFEFEF;
            }

            tr.red th {
                background: #dd4a63;
                color: white;
            }

            tr.green th {
                background: #03C03C;
                color: white;
            }

            tr.blue th {
                background: #1580d8;
                color: white;
            }

            th {
                background: white;
                position: sticky;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <table>
                <thead>
                    <tr class="red">
                        <th>Name</th>
                        <th>Age</th>
                        <th>Job</th>
                        <th>Color</th>
                        <th>URL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr class="green">
                        <th>Name</th>
                        <th>Age</th>
                        <th>Job</th>
                        <th>Color</th>
                        <th>URL</th>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr class="blue">
                        <th>Name</th>
                        <th>Age</th>
                        <th>Job</th>
                        <th>Color</th>
                        <th>URL</th>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                    <tr>
                        <td>Lorem.</td>
                        <td>Ullam.</td>
                        <td>Vel.</td>
                        <td>At.</td>
                        <td>Quis.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

6.6 页面进度条（简易）

利用 position: sticky; 定位，可以实现页面浏览进度条效果，以下是简易进度条的演示，实际实现中可将未滚动到顶部的元素设置为透明色，滚动到顶部时变为蓝色。

![[img/bdc5c4bc1d9b4d80b8fd811d9d29c651.png]]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            .container {
                width: 400px;
                height: 300px;
                overflow: auto;
                padding-bottom: 500px;
                box-sizing: border-box;
                background: pink;
            }

            .sticky {
                width: 100px;
                height: 10px;
                background: rgba(36, 167, 254, 0.979);
                position: -webkit-sticky;
                position: sticky;
                top: 0;
            }

            .sticky:nth-of-type(2) {
                transform: translateX(100px);
            }

            .sticky:nth-of-type(3) {
                transform: translateX(200px);
            }

            .sticky:nth-of-type(4) {
                transform: translateX(300px);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Sticky Progress</h1>
            <div class="sticky"></div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
                odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
                nostrum expedita.</p>
            <div class="sticky"></div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
                odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
                nostrum expedita.</p>
            <div class="sticky"></div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
                odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
                nostrum expedita.</p>
            <div class="sticky"></div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
                odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
                nostrum expedita.</p>
        </div>
    </body>
</html>

参考资料：sticky 粘性定位的几种巧妙应用

6.7 导航与图片浮动

![[img/img_2024-04-08_00-42-49.gif]]

代码：

* {
            margin: 0px;
            padding: 0px
        }
        .nav {
            width: 1200px;
            height: 80px;
            background-color: aqua;
            margin: 0px auto;
            position: sticky;
            top: 0px;
            z-index: 99999;
            margin-top: 200px;
        }
        .box {
            width: 1200px;
            height: 400px;
            margin: 0px auto;
            overflow: scroll;
        }
        .box .item {
            width: 1200px;
            height: 400px;
        }
        .box .item {
            position: sticky;
            top: 0px
        }
        .box .item:nth-child(1) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/1.jpg);
            background-size: cover;
            float: left;
        }
        .box .item:nth-child(2) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/2.jpg);
            background-size: cover;
            float: right;
        }
        .box .item:nth-child(3) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/3.jpg);
            background-size: cover;
            float: left;
        }
        .box .item:nth-child(4) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/4.jpg);
            background-size: cover;
            float: right;
        }
        .box .item:nth-child(5) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/5.jpg);
            background-size: cover;
            float: left;
        }
        .box .item:nth-child(6) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/6.jpg);
            background-size: cover;
            float: right;
        }
        .box .item:nth-child(7) .img {
            width: 600px;
            height: 400px;
            background-image: url(img/7.jpg);
            background-size: cover;
            float: left;
        }
        .foot {
            width: 1200px;
            background-color: #726121;
            margin: 0px auto;
            font-size: 40px;
        }
<div class="nav">导航</div>
    <div class="box">
        <div class="item">
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="img"></div>
        </div>
        <div class="item">
            <div class="img"></div>
        </div>
    </div>
    <div class="foot">
        <p>
            粘性定位是一种css属性，用于控制元素在滚动时的定位行为。它是相对于视口或容器进行定位，当页面滚动时，元素可以固定在页面的特定位置，提供更好的用户体验。粘性定位的应用场景非常广泛，特别适用于需要在页面滚动时保持固定位置的元素，例如导航栏、侧边栏、广告条、提示框等。通过使用粘性定位，可以提供更好的用户体验，使这些元素始终可见，方便用户的操作和导航。
        </p>
        <P>
            粘性定位（Sticky Positioning）是一种CSS属性，用于控制元素在滚动时的定位行为。它是相对于视口或容器进行定位，当页面滚动时，元素可以固定在页面的特定位置，提供更好的用户体验。
            粘性定位与其他常见的定位方式（如相对定位、绝对定位和固定定位）有所不同。相对定位是相对于元素自身的原始位置进行定位，绝对定位是相对于最近的已定位祖先元素进行定位，固定定位是相对于视口进行定位。而粘性定位则是在滚动过程中切换定位方式，既可以相对于视口进行定位，也可以相对于容器进行定位。
            粘性定位的使用方法非常简单，只需要将元素的position属性设置为sticky即可。同时，还需要指定元素在滚动时的偏移值（top、bottom、left、right），以确定元素相对于视口或容器的位置。
        </P>
        <p>
            粘性定位的主要特点如下：
            1. 切换定位方式：当元素在滚动过程中到达指定位置时，它会切换为固定定位，保持在该位置。当页面滚动超过指定位置时，元素会恢复到正常的文档流中。
            2. 相对定位和固定定位的结合：粘性定位既具备相对定位的特性，可以占据文档流中的位置，也具备固定定位的特性，可以固定在页面的特定位置。
            3. 相对于视口或容器进行定位：粘性定位可以相对于视口或容器进行定位。当设置为相对于视口进行定位时，元素会相对于整个窗口进行定位；当设置为相对于容器进行定位时，元素会相对于最近的具有滚动机制的容器进行定位。
            4. 兼容性良好：粘性定位在现代浏览器中得到广泛支持，包括Chrome、Firefox、Safari和Edge等。对于不支持粘性定位的浏览器，元素会按照正常的文档流进行显示。
            粘性定位的应用场景非常广泛，特别适用于需要在页面滚动时保持固定位置的元素，例如导航栏、侧边栏、广告条、提示框等。通过使用粘性定位，可以提供更好的用户体验，使这些元素始终可见，方便用户的操作和导航。
        </p>
    </div>

7. 通过定位居中元素

子绝父相，让子盒子右下移动父盒子的一半，再让子盒子左上移动自己的一半

  • 利用margin-left移动子盒子的一半存在一个问题，当子盒子的宽度发生变化时，子盒子不再居中
  • 利用transform移动子盒子自身（此方式始终移动自身的一半，盒子大小发生变化是不受影响） 
    transform: translateX(-50%);横向左移动自身的一半
transform: translateY(-50%);纵向向上移动自身的一半
以上元素不能同时存在两个transform，需要实现XY 同时使用则为
transform: translate(-50%,-50%)

    demo

导航二维码定位效果

半透明遮罩

6. 元素层级

6.1 层级关系

不同布局方式元素的层级关系

  • 标准流<浮动<定位

不同定位之间的层级关系

  • 相对定位，绝对定位，固定定位的默认层级相同，静态定位层级与标准流相同
  • 几种定位同时存在时，后面的元素层级更高，会覆盖前面的元素

6.2 更改元素层级

更改元素层级使用css中的z-index属性
数值内容越大层级越高
一般把最顶层元素的层级设置为999

垂直对齐

基线：浏览器文字类型元素排版中存在用于对齐的基线

  • 此属性仅对行元素与行内块元素生效
  • 解决文本框与按钮无法对齐
  • 解决input与img无法对齐
  • 解决div中的文本框无法顶部或底部对齐
  • 解决div不设置高度，img存在额外间隙问题
  • 使用Line-heigth让img居中
  • 使用行内块元素与div显示在一行会出现垂直对齐问题

属性名：vertical-align

取值

属性值 效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

原始样式
![[img_2024-04-09_20-14-21.png]]

对齐后的效果
![[img/img_2024-04-09_20-35-58.png]]

代码

        img {
            width: 600px;
            height: 400px;
        }
        .one {
            background-color: blueviolet;
        }
        .one img {
            vertical-align: bottom;
        }
        .two {
            background-color: burlywood;
        }
        .two input,
        .two button {
            height: 24px;
            box-sizing: border-box;
            vertical-align: middle;
        }
        .tree input {
            height: 24px;
            box-sizing: border-box;
        }
        .tree img,
        .tree input {
            vertical-align: bottom;
        }
        .four {
            height: 200px;
            background-color: chartreuse;
        }
        .four input {
            height: 24px;
            box-sizing: border-box;
            vertical-align: top;
        }
<div class="one">
        <img src="img/1.jpg">
        文字内容
    </div>
    <div class="two">
        <input type="text" /><button>按钮</button>
    </div>
    <div class="tree">
        <img src="img/2.jpg">
        <input type="text" /><button>
    </div>
    <div class="four">
        <input type="text" />
    </div>

光标cursorr

属性名: cursorr

常见属性值

属性值 效果
default 默认，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字形，提示用户可以选择文字
move 十字形，提示用户可以移动
url("图片地址"),auto; 自定义图片光标，不设置auto在部分情况下不显示（只）

写法：

cursor:url(images/arrow.cur),auto; /* auto是当自定义图标不起作用时鼠标的状态*/

也可写：

cursor: url(mouse-notexist.cur), url(vote.gif), auto; 
cursor:url(images/logo.cur) 100 20,auto; /* 100 20 是cursor 的坐标*/

firefox、chrome支持jpg、gif、cur、png等文件，不支持.ani ；IE只支持cur、ani；opera不支持自定义图标。
IE6/IE7/IE8对图标大小有限制，最佳尺寸32*32（小尺寸图标会被拉伸，大的会被压缩），其它浏览器按图标实际大小显示。
cur图标制作软件：AWiconsPro

边框圆角

属性名: borde-radius
取值方式为数字+px或者百分比
赋值规则为从左上开始顺时针，没有赋值看对角

.class{
border-radius:30px;
border-radius:30px 50px;
border-radius:30px 50px 100px;
border-radius:30px 50px 100px 150px;
border-radius:50%;/*正圆*/
}

隐藏元素

常见属性
visibility:hidden;隐藏元素本身，占位置
display:none;隐藏元素本身，不占位置

display:none;隐藏元素 display:block;显示元素

案例1

![[img/img_2024-04-09_23-34-56.gif]]

代码

        ul {
            width: 830px;
            list-style: none;
            margin: 0px auto;
        }
        ul li {
            width: 166px;
            height: 44px;
            float: left;
            text-align: center;
            line-height: 44px;
            border-right: 1px #000 solid;
            box-sizing: border-box;
        }
        ul li:last-child {
            border-right: 0px
        }
        ul li:hover {
            background-color: aliceblue;
        }
        ul li a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: #000;
        }
        ul li a img {
            width: 150px;
            border: 2px #000 solid;
            display: none;
            margin: 0px auto;
        }
        ul li a:hover img {
            display: block;
        }
<ul>
            <li><a href="#">我要投资</a></li>
            <li><a href="#">平台介绍</a></li>
            <li><a href="#">新手专区</a></li>
            <li><a href="#">手机微金所
                    <img src="img/1.jpg" />
                </a></li>
            <li><a href="#">个人中心</a></li>
        </ul>

元素溢出处理

元素溢出是指盒子内容大小超过盒子本身；
属性 : overflow
常见属性值

属性值 效果
visible 默认值，溢出部分可见
hidden 隐藏溢出部分
scroll 无论是否溢出都显示滚动条
auto 溢出时显示滚动条

拓展

自定义滚动条

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

![[img/img_2024-04-09_21-24-40.gif]]

代码

.content{
        width:140px;
        height:200px;
        overflow:auto;
        white-space: pre-line;
    }
    .content::-webkit-scrollbar{
        width:8px;
        height:8px;
        background-color: #61B6EB;
    }
    .content::-webkit-scrollbar-track{
        background: #eee;
    }
    .content::-webkit-scrollbar-thumb{
        background: #61B6EB;
        border-radius:100px;
    }
    .content::-webkit-scrollbar-thumb:hover{
        background: #61B6EB;
    }
    .content::-webkit-scrollbar-corner{
        background: #61B6EB;
    }
<div class="content">
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
  </div>

透明

background-color: rgb(25,45,54,.5);背景透明度50%，内部元素不透明
opacity 元素透明，内部元素也透明，属性值为0~1，0为完全透明，1为不透明

边框合并

让表格相邻的边框合并
border-collapse：collapse；此属性仅对table作用

![[img/img_2024-04-09_23-07-24.png]]

代码

table td{
            border: 1px #000 solid;
            padding: 4px;
            text-align: center;
        }
        table{
            border-collapse: collapse;
        }
<table>
        <caption>表格标题</caption>
        <thead>
            <tr><th>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th><th>表头5</th><th>表头6</th></tr>
        </thead>
        <tbody>
            <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td colspan="2">单元格5</td></tr>
            <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td rowspan="3">单元格4</td><td>单元格5</td><td>单元格6</td></tr>
            <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格5</td><td>单元格6</td></tr>
            <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格5</td><td>单元格6</td></tr>
            <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr>
        </tbody>
       <tfoot>
        <tr><td>格脚1</td><td>格脚2</td><td>格脚3</td><td>格脚4</td><td>格脚5</td><td>格脚6</td></tr>
       </tfoot>
    </table>

拓展(cs画三角形)

![[img/img_2024-04-09_23-43-18.png]]

代码

.content{
             width: 0px;
            height: 0px;
            border-top: 100px rgb(68, 186, 68,0) solid;
            border-right: 100px rgb(255, 0, 0,0) solid ;
            border-bottom: 150px blue solid;
            border-left: 100px rgb(255, 255, 0,0) solid;
        }
<div class="content"></div>

说明

  • 设置一个盒子
  • 设置四个边框，每个边框不同颜色
  • 将宽度设置为0，仅保留边框
  • 选择一个边框，将其他边框设为透明级得到一个三角形
  • 修改边框宽度改变三角形

精灵图

  • 精灵图就是将多个图片元素汇聚到一起，分开展示，可以节省网络资源 
    
{
写法1
background: url(./img/宠物小精灵【三元素_为设计而生_3png.com】.png) -170px -200px ;
写法2
background: url(./img/宠物小精灵【三元素_为设计而生_3png.com】.png);

            background-position: -310px -360px;

}


## 案例1

> 精灵图
![[img/jlt.png]]

![[img/img_2024-04-10_00-45-31.gif]]

> 代码
```css
        ul {
            list-style: none;
        }
        ul li {
            width: 45px;
            height: 60px;
            float: left;
            background-color: bisque;
        }
        ul li span:first-child {
            display: block;
            width: 38px;
            height: 38px;
        }
        .dz {
            background: url(img/jlt.png) 0px 0px no-repeat;
        }
        .tb {
            background: url(img/jlt.png) -40px 0px no-repeat;
        }
        .sc {
            background: url(img/jlt.png) 0px -38px no-repeat;
        }
        .sc {
            background: url(img/jlt.png) 0px -38px no-repeat;
        }
        .zf {
            background: url(img/jlt.png) -40px -38px no-repeat;
        }
        .dz:hover {
            background: url(img/jlt.png) -78px 1px no-repeat;
        }
        .tb:hover {
            background: url(img/jlt.png) -118px 1px no-repeat;
        }
        .sc:hover {
            background: url(img/jlt.png) -78px -36px no-repeat;
        }

        .zf:hover {
            background: url(img/jlt.png) -118px -36px no-repeat;
        }

        span {
            text-align: center;
        }
<ul>
            <li><span class="dz"></span>点赞<span></span></li>
            <li><span class="tb"></span>推荐<span></span></li>
            <li><span class="sc"></span>收藏<span></span></li>
            <li><span class="zf"></span>转发<span></span></li>
        </ul>

精灵图demo

transform（二维变换）

二维变换 二维变换有平移，旋转，缩放，反射，错切

transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。
这里介绍以下三种常用的转换函数：

函数 作用
rotate 旋转函数
translate 移动函数
scale 缩放函数

translate平移

CSS中的二维坐标系如下（注意y轴正方向与数学中常见的二维坐标系中的y轴正向不一样）
![[img/531e78ad024b441db97cb9b619c20223.png]]

  1. 语法
transform: translate(x,y); // 或者分开写
transform: translateX(n); // 沿x轴方向，参数为正沿x轴正向，为负沿x轴负向
transform: translateY(n); // 沿y轴方向，参数为正沿y轴正向，为负沿y轴负向
  1. 特点
  • translate最大的优点：不会影响到其他元素的位置
  • 参数可以是带单位的数值或百分比，百分比是相对于自身元素的尺寸而言的
  • 对行内标签不起效果
<head>
    <style>
        /* 移动盒子的位置： 定位   盒子的外边距  2d转换移动 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 我们如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 我们如果只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }
        .div1 {
            transform: translate(30px, 30px);
        }
        .div2 {
            background-color: purple;
        }
        span{
        // translate对行内标签不起效果
            transform: translate(30px, 30px);
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <span>123</span>
</body>

![[img/c0f4c50e28fc7d3f8feb1565ac578a87.png]]

技巧：可以利用translate实现子盒子相对父盒子居中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            // 老方法：通过margin让盒子往左上走自己该方向长度的一半
            /* margin-top: -100px;
            margin-left: -100px; */
            /* 盒子往左上走自己该方向长度的一半   */
            transform: translate(-50%, -50%);
        }

    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

rotate旋转

在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕一点旋转，主要在二维空间内进行操作。

语法
transform:rotate(度数) // 单位是deg（度）
重点
rotate里面跟度数， 单位是 deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点
transform-origin可以指定旋转点

语法
transform-origin: x y; // x, y是相对于元素左上角而言的
![[0e4fb0fac79c39978ea6cc3c75aa5ee5.png]]

重点
参数可以是带单位的数值，百分比，关键字（left|right|bottom|top|center）
注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
练习1：利用旋转制作下拉三角
以前做法：使用下三角形状的字体图标
现在可以通过rotate实现下拉三角效果
参考代码

这个是教程思路：我感觉这个更美观灵活些
![[img/01bf1f31920c005e0c86bf4b2f400121.gif]]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: relative;
            width: 230px;
            height: 30px;
            border: 1px solid #000;
        }
        div::after{

            content: "";/* 必须要有设置内容这一属性，否则这个伪元素盒子显示不出来 */
            position: absolute;
            top: 6px;
            right: 10px;
            width: 10px;
            height: 10px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
            transition: all .3s;
        }
        div:hover::after{
            /* 注意角度是相对于元素初始的状态，就是没有做任何旋转的状态 */
            transform: rotate(-135deg);
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这个是我刚开始的思路，感觉这个虽然代码量少些，但是不够灵活，不太好看（尖角的角度比较小）
![[bdc9fdc91a60852ae3a039c2de5998d2.gif]]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 230px;
            height: 30px;
            border: 1px solid #000;
        }
        div>span{
            float: right;
            margin-top: 5px;
            margin-right: 5px;
            transform: rotate(90deg);
            transition: all .3s;
        }
        div:hover>span{
            /* 注意角度是相对于元素初始的状态，就是没有做任何旋转的状态 */
            transform: rotate(-90deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <span>></span>
    </div>
</body>
</html>

练习2：当鼠标悬浮到框里时，方块转到框里。鼠标离开框后，方块转回看不见的位置
![[9287f15a789b3ce349667fbc301bd695.gif]]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin:100px auto;
            border: 2px solid green;
            /* 隐藏溢出部分 */
            overflow: hidden;
        }
        div::before{
            /* 伪元素默认是行内元素，需转换成行内块或块级元素才可以指定宽高 */
            display: block;
            content: "hello!";/* 必须要有设置内容这一属性，否则这个伪元素盒子显示不出来 */
            width: 100%;
            height: 100%;
            background-color: green;
            transform-origin: left bottom;
            transform: rotate(90deg);
            transition: all .3s;
        }
        div:hover::before{
            transform: rotate(0deg);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

scale缩放

给元素添加上了这个属性就能控制它放大还是缩小

  1. 语法 
    transform: scale(x,y) | scale(a); /*元素按照指定值沿着 X 轴和 Y 轴缩放, 只有一个参数表示等比例缩放，参数表示原来大小的倍数，所以当参数为1时就相当于大小没变*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

注意
transform:scale(1,1) ：宽和高都是原来的一倍，相当于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，则第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：小于1的参数表示缩小
sacle缩放最大的优势：可以设置缩放中心点，默认以中心点缩放的，而且不影响其他盒子

<!DOCTYPE html>
<html lang="en">
![[cb9c0b3d0b54565a772163e099ca213f.gif]]
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 可以设置缩放中心点 */
            /* transform-origin: left bottom; */
        }

        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思， 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽高都修改了2倍*/
            transform: scale(2);
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
        }
    </style>
</head>

<body>
    <div></div>
    123123
</body>

</html>

![[img/cb9c0b3d0b54565a772163e099ca213f.gif]]

练习1：实现鼠标悬浮图片放大效果

<head>
    <style>
        div {
            overflow: hidden;
            margin: 100px auto;
        }

        div img {
            transition: all .4s;
        }

        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

![[img/7deab5bc75c1ae3e29097d7064df8a79.gif]]

练习2：鼠标悬浮分页按钮放大'

<head>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid green;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }

        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

![[img/a34ef2acbe2fc09b7dd9c5ef1bdbe4f1.gif]]

transform-origin指定变换中心

对于rotate就是旋转中心，对于scale就是缩放中心，总之就是变换的中心。（因为相对于任何一个点平移效果都是一样的，所以没有平移中心这一说法）

语法
transform-origin: x y; // x, y是相对于元素左上角而言的
![[img/0e4fb0fac79c39978ea6cc3c75aa5ee5 (1).png]]

重点
参数可以是带单位的数值，百分比，关键字（left|right|bottom|top|center）
注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
transform转换综合写法
transform是一个复合属性，转换函数可以都写到这个属性中，CSS会按顺序执行这些函数，所以要注意书写顺序
注意：

同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，
其顺序会影转换的效果。（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前
若同时有位移和旋转属性的时候，位移最好放到最前，因为旋转会导致盒子自身的坐标系（类似于物体坐标系）也跟着旋转，旋转后再平移容易出错
transform转换总结
转换transform 简单理解就是变形, 有2D 和 3D 之分
我们暂且学了三个 分别是 位移 旋转 和 缩放
transform转换不会影响其他元素布局

元素过度transition

属性名：transition
取值

参数 取值
过度属性 all:所以能过度的属性都过度，具体属性，比如设置width，只有宽度过度
过度时长 数字+s或者数字+ms
  • 过度需求，默认状态的样式与hover的样式不一样，包含可过度属性
  • transition需要设置给需要过度的元素本身
  • 给默认状态设置，鼠标移入移出都有过度效果
  • 给hover状态设置，鼠标移入右过度效果，移出没有过度效果 
    .tran{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    transition: all 2s;
}
.tran:hover{
    width: 1000px;
    height: 100px;
    background-color: yellow;
}

1. Transition的基本概念

CSS Transition允许元素从一种样式状态平滑地改变为另一种样式状态。这种变化通常会在一段时间内完成，而不是立即生效。Transition可以应用于大多数CSS属性，包括但不限于颜色、尺寸、位置等。
1.1 Transition的属性
要实现一个CSS Transition效果，通常需要设置以下几个属性：

transition-property: 指定应用过渡效果的CSS属性名称。
transition-duration: 定义过渡效果完成所需的时间。
transition-timing-function: 描述过渡效果的速度曲线，如线性、加速、减速等。
transition-delay: 定义过渡效果开始前的延迟时间，如transition-delay: 1s;表示转换将会延迟一秒
此外，还可以使用transition这个简写属性来一次性设置上述所有属性。

1. Transition的兼容性

CSS Transition是CSS3的一部分，得到了现代主流浏览器的广泛支持。但在使用时，仍建议添加浏览器前缀（-webkit-、-moz-、-o-、-ms-）以确保最大兼容性。

2. Transition的使用

下面通过一个简单的例子来演示如何使用CSS Transition。

2.1 示例

2.1.1 鼠标悬停时改变背景色

HTML结构：

<div class="box">鼠标悬停我</div>

CSS样式：

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  /* 添加过渡效果 */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

在这个例子中，.box元素在鼠标悬停时背景色会从红色平滑过渡到蓝色。过渡效果的持续时间是0.5秒，使用ease 速度曲线。

2.2.2 鼠标悬停时下划线渐变+显示+消失

![[img/img_2024-04-08_00-59-16.gif]]

代码:

        span{
            line-height: 2PX;
            background: linear-gradient(to right,#7e2f2b,#146420) no-repeat right bottom;
            background-size: 0px 2px;
            transition: background-size 2s;
        }
        span:hover{
            background-position:  left bottom;
            background-size: 100% 2px;
        }
    <span>
         Apache Nifi是Apache基金会的顶级项目之一，是一个易于使用，功能强大且可靠的处理和分发数据的系统。使用Nifi可以自动化管理系统间的数据，支持从多种数据源拉取数据。
  Nifi是基于Java的，使用maven支持包的构建管理。Nifi基于web方式工作，后台在服务器进行调度，Nifi具有数据处理引擎、任务调度等组件。简单来说，Nifi就是为了解决不同系统之间数据自动流通等问题而建立。
  Dataflow是Nifi中一个重要的术语，在这里我们用来表示可以管理的信息流。Dataflow对企业至关重要，因此对数据流的合规性、隐私性和安全性也做了严格的要求。
    </span>

3. Transition的详细属性

3.1 transition-property

transition-property属性用于指定应用过渡效果的CSS属性。可以指定单个属性，也可以使用逗号分隔的列表指定多个属性。

示例：

/* 对宽度和高度应用过渡效果 */
transition-property: width, height;

/* 对所有可动画属性应用过渡效果 */
transition-property: all;

3.2 transition-duration

transition-duration属性用于定义过渡效果完成所需的时间。时间单位可以是秒（s）或毫秒（ms）。

示例：

/* 过渡效果持续0.5秒 */
transition-duration: 0.5s;

/* 过渡效果持续500毫秒 */
transition-duration: 500ms;

3.3 transition-timing-function

transition-timing-function属性描述了过渡效果的速度曲线。常用的值包括linear（线性）、ease（慢到快再到慢）、ease-in（慢到快）、ease-out（快到慢）和ease-in-out（慢到快再到慢，但比ease更平缓）。

示例：

/* 使用线性速度曲线 */
transition-timing-function: linear;

/* 使用自定义的贝塞尔曲线 */
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

3.4 transition-delay

transition-delay属性用于定义过渡效果开始前的延迟时间。

示例：

/* 过渡效果开始前延迟1秒 */
transition-delay: 1s;

/* 过渡效果开始前延迟200毫秒 */
transition-delay: 200ms;

3.5 transition（简写属性）
transition属性是上述四个属性的简写形式，按顺序分别指定transition-property、transition-duration、transition-timing-function和transition-delay。

示例：

/* 简写形式，同时设置多个属性 */
transition: width 0.5s ease-in-out 0.1s, height 0.3s ease-out;

4. Transition的高级用法

4.1 多属性过渡

可以对多个属性同时应用过渡效果，每个属性可以有自己的持续时间、速度曲线和延迟时间。

示例：

/* 对宽度和高度应用不同的过渡效果 */
transition: width 0.5s ease, height 0.3s ease-out;

4.2 反向过渡

当过渡效果结束时，可以通过触发某些事件（如点击）来反向播放过渡效果。这通常需要使用JavaScript来动态改变元素的样式。

4.3 过渡与动画结合

CSS Transition和CSS Animation可以结合起来使用，创建更复杂的动画效果。例如，可以使用Transition来处理鼠标悬停效果，同时使用Animation来处理循环播放的动画。

4.4 注意事项

过渡效果不会应用于display、visibility等少数CSS属性。
过渡效果在元素从不可见变为可见时不会触发，除非是通过改变opacity或其他可以产生类似效果的属性来实现可见性的变化。
如果过渡效果的目标值与起始值相同，过渡效果将不会触发。
过渡效果在元素或其父元素被隐藏（如display: none）时不会运行。

5. 实际应用案例

5.1 图片轮播效果

结合CSS Transition和JavaScript，可以创建平滑的图片轮播效果。

5.2 模态窗口的显示与隐藏

使用Transition可以实现模态窗口的平滑显示和隐藏效果，提升用户体验。

5.3 菜单的展开与收起

在响应式设计中，常常需要用到菜单的展开与收起效果。通过CSS Transition，可以实现这种效果的平滑过渡。

5.4 按钮的点击效果

使用Transition可以增强按钮的点击效果，例如改变按钮的背景色、尺寸或阴影等。

6. 性能优化

在使用CSS Transition时，需要注意以下几点以优化性能：

避免对大量元素同时应用复杂的过渡效果，这可能会导致页面重绘和重排的性能问题。
使用transform和opacity属性进行动画，这两个属性通常由GPU加速，性能较好。
谨慎使用box-shadow和border-radius等可能导致性能下降的属性。
在低性能设备上测试过渡效果，确保其在不同设备上的表现一致且流畅。

transition贝塞尔曲线

transition中的贝塞尔曲线：

函数 速度 说明
ease 逐渐变慢,(默认值) ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
linear 匀速 linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
ease-in 加速 ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);
ease-out 减速 ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);
ease-in-out 加速然后减速 ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);
cubic-bezier 该值允许你去自定义一个时间曲线 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

注意

1. 曲线的斜率为速度
2. transition不可以被继承,所以要写到恰当的位置

CSS动画（animation）

CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。

1. @keyframes 规则

要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下：

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
// 或者
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

语法说明如下：

  • animationName：表示动画的名称；
  • from：定义动画的开头，相当于 0%；
  • percentage：定义动画的各个阶段，为百分比值，可以添加多个；
  • to：定义动画的结尾，相当于 100%；
  • properties：不同的样式属性名称，例如 color、left、width 等等。

下面我们来看一个简单的 @keyframes 规则示例：

@keyframes ball {
    0% { top: 0px; left: 0px;}
    25% { top: 0px; left: 350px;}
    50% { top: 200px; left: 350px;}
    75% { top: 200px; left: 0px;}
    100% { top: 0px; left: 0px;} 
}

动画创建好后，还需要将动画应用到指定的 HTML 元素。要将动画应用到指定的 HTML 元素需要借助 CSS 属性，CSS 中提供了如下所示的动画属性：

  • animation-name：设置需要绑定到元素的动画名称；
  • animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
  • animation-timing-function：设置动画的速度曲线，默认为 ease；
  • animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
  • animation-delay：设置动画开始之前的延迟时间，默认为 0；
  • animation-iteration-count：设置动画被播放的次数，默认为 1；
  • animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
  • animation-play-state：设置动画是正在运行还是暂停，默认是 running；
  • animation：所有动画属性的简写属性。

下面就来详细介绍一下上述属性的使用。

2. animation-name

animation-name 属性用来将动画绑定到指定的 HTML 元素，属性的可选值如下：

值 描述
keyframename 要绑定到 HTML 元素的动画名称，可以同时绑定多个动画，动画名称之间使用逗号进行分隔
none 表示无动画效果，

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes ball {
            0% { top: 0px; left: 0px;}
            25% { top: 0px; left: 350px;}
            50% { top: 200px; left: 350px;}
            75% { top: 200px; left: 0px;}
            100% { top: 0px; left: 0px;} 
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
            animation-name: ball;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注意：要想让动画成功播放，您还需要定义 animation-duration 属性，否则会因为 animation-duration 属性的默
认值为 0，导致动画并不会播放。

3. animation-duration

animation-duration 属性用来设置动画完成一个周期所需要花费的时间，单位为秒或者毫秒。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes ball {
            0% { top: 0px; left: 0px;}
            25% { top: 0px; left: 350px;}
            50% { top: 200px; left: 350px;}
            75% { top: 200px; left: 0px;}
            100% { top: 0px; left: 0px;} 
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
            animation-name: ball;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

![[img/110H04F1-0.gif]]

提示：动画若想成功播放，必须要定义 animation-name 和 animation-duration 属性。

4. animation-timing-function

animation-timing-function 属性用来设置动画播放的速度曲线，通过速度曲线的设置可以使动画播放的更为平滑。animation-timing-function 属性的可选值如下表所示：

值 描述
linear 动画从开始到结束的速度是相同的
ease 默认值，动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始，并以低速结束
cubic-bezier(n, n, n, n) 使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes ball {
            0% {left: 0px;}
            50% {left: 350px;}
            100% {left: 0px;}
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation-name: ball;
            animation-duration: 2s;
        }
        .one {
            animation-timing-function: ease;
        }
        .two {
            animation-timing-function: ease-in;
        }
        .three {
            animation-timing-function: ease-out;
        }
        .four {
            animation-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <div class="one">ease</div>
    <div class="two">ease-in</div>
    <div class="three">ease-out</div>
    <div class="four">ease-in-out</div>
</body>
</html>

![[img/110H04454-1.gif]]

5.animation-fill-mode

animation-fill-mode 属性用来设置当动画不播放时（开始播放之前或播放结束之后）动画的状态（样式），属性的可选值如下：

值 描述
none 不改变动画的默认行为
forwards 当动画播放完成后，保持动画最后一个关键帧中的样式
backwards 在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式
both 同时遵循 forwards 和 backwards 的规则

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes box {
            0% {transform: rotate(0);}
            50% {transform: rotate(0.5turn);}
            100% {transform: rotate(1turn);}
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            float: left;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation-name: box;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
    </style>
</head>
<body>
    <div>forwards</div>
</body>
</html>

6. animation-delay

animation-delay 属性用来定义动画开始播放前的延迟时间，单位为秒或者毫秒，属性的语法格式如下：

animation-delay: time;

其中参数 time 就是动画播放前的延迟时间，参数 time 既可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes ball {
            0% {left: 0px;}
            50% {left: 350px;}
            100% {left: 0px;}
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation-name: ball;
            animation-duration: 2s;
        }
        .one {
            animation-delay: 0.5s;
        }
        .two {
            animation-delay: -0.5s;
        }
    </style>
</head>
<body>
    <div class="one">0.5s</div>
    <div class="two">-0.5s</div>
</body>
</html>

![[img/110H05S4-2.gif]]

7. animation-iteration-count

animation-iteration-count 属性用来定义动画播放的次数，属性的可选值如下：

值 描述
n 使用具体数值定义动画播放的次数，默认值为 1
infinite 表示动画无限次播放

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes box {
            0% {transform: rotate(0);}
            50% {transform: rotate(0.5turn);}
            100% {transform: rotate(1turn);}
        }
        div {
            width: 100px;
            height: 100px;
            float: left;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation-name: box;
            animation-duration: 2s;
        }
        .one {
            animation-iteration-count: 1;
        }
        .two {
            margin-left: 50px;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">infinite</div>
</body>
</html>

![[img/110H05511-3.gif]]

8. animation-direction

animation-direction 属性用来设置是否轮流反向播放动画，属性的可选值如下：

值 描述
normal 以正常的方式播放动画
reverse 以相反的方向播放动画
alternate 播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse 播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes box {
            0% {transform: rotate(0);}
            50% {transform: rotate(0.5turn);}
            100% {transform: rotate(1turn);}
        }
        div {
            width: 100px;
            height: 100px;
            float: left;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation-name: box;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        .one {
            animation-direction: reverse;
        }
        .two {
            margin-left: 50px;
            animation-direction: alternate;
        }
    </style>
</head>
<body>
    <div class="one">reverse</div>
    <div class="two">alternate</div>
</body>
</html>

![[img/110H055P-4.gif]]

9. animation-play-state

animation-play-state 属性用来设置动画是播放还是暂停，属性的可选值如下：

值 描述
paused 暂停动画的播放
running 正常播放动画

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes box {
            0% {transform: rotate(0);}
            50% {transform: rotate(0.5turn);}
            100% {transform: rotate(1turn);}
        }
        div {
            width: 100px;
            height: 100px;
            float: left;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation-name: box;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        .one {
            animation-play-state: running;
        }
        .two {
            margin-left: 50px;
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="one">running</div>
    <div class="two">paused</div>
</body>
</html>

![[img/110H031P-5.gif]]

10.animation

animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式，通过 animation 属性可以同时定义上述的多个属性，语法格式如下：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

其中每个参数分别对应上面介绍的各个属性，如果省略其中的某个或多个值，则将使用该属性对应的默认值。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes box {
            0% {transform: rotate(0);}
            50% {transform: rotate(0.5turn);}
            100% {transform: rotate(1turn);}
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            float: left;
            border: 3px solid black;
            text-align: center;
            line-height: 100px;
            position: relative;
            animation: box 2s linear 0s infinite alternate;
        }
    </style>
</head>
<body>
    <div>animation</div>
</body>
</html>

![[img/110H05962-6.gif]]

SEO

三大标签

title
description
keywords

meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

name 属性

1、<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；

2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；

3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；

4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；

5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

　 其中的属性说明如下：

　 设定为all：文件将被检索，且页面上的链接可以被查询；

   设定为none：文件将不被检索，且页面上的链接不可以被查询；

   设定为index：文件将被检索；

   设定为follow：页面上的链接可以被查询；

   设定为noindex：文件将不被检索，但页面上的链接可以被查询；

   设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink；

3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6、<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

Open Graph Protocol

Meta Property=og标签是什么呢?
og是一种新的HTTP头部标记，即Open Graph Protocol：

The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

即这种协议可以让网页成为一个“富媒体对象”。
用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

<meta property=”og:type” content=”video”/>

<meta property=”og:title” content=”五月天_突然好想你MV现场版”/>

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... 9-76EA-E5E20A1887C4″/>

<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/>

<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/v.swf”/>

<meta property=”og:width” content=”500″ />

<meta property=”og:height” content=”416″ />

<meta property=”og:type” content=”video”/>

<meta property=”og:title” content=”五月天_突然好想你MV现场版_AA”/>

<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... EA-E5E20A1887C44444″/>

<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html”/>

<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/y.swf”/>

<meta property=”og:width” content=”600″ />

<meta property=”og:height” content=”716″/>

布局标签

标签名 语意
header 网页头部
nav 菜单
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

网页图标

<link rel="shortcut icon" herf="ico.ico" type"image/x-ico">

container

扩展

通过css+div画三角形
.class{
    width: 0px;
    height: 0px;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-left: 100px solid pink;
    border-bottom: 100px solid transparent;
}

SVG

所有图形绘制标签都必须包含在svg标签内


<svg width="400" height="400">


| 属性     | 作用   | 说明  |
| ------ | ---- | --- |
| width  | 画板宽度 |     |
| height | 画板高度 |     |
### 绘制矩形，圆形，椭圆
#### 矩形rect

```html
    <rect width="400" height="200" fill="blue" stroke-width="20" stroke="red" x="10" y="20" fill-opacity="0.5" stroke-opacity="0.5" opacity="0.7"
    rx="10" ry="10"
    />
属性 作用 说明
width 绘制矩形宽度
height 绘制矩形高度
fill 矩形填充色
stroke-width 矩形边框宽度
stroke 矩形边框颜色
x 设置矩形x轴位置
y 设置矩形y轴位置
fill-opacity 背景透明度 取值0-1
stroke-opacity 边框透明度 取值0-1
opacity 整个元素透明度包,含背景和标签 取值0-1
rx x轴圆角度
ry y轴圆角度

圆形circle

<svg width="500" height="500">
<circle cx="250" cy="250" r="200" stroke="blue" stroke-width="20" fill="red"/>
</svg>
属性 作用 说明
rx 圆心x轴位置
ry 圆心y轴位置
r 圆的半径
stroke 边框颜色
stroke-width 边框宽度
fill 填充颜色

椭圆ellipse

 <ellipse cx="140" cy="80" rx="120" ry="80" fill="red"/>
属性 作用 说明
rx 圆心x轴位置
ry 圆心y轴位置
rx 水平半径
ry 垂直半径
stroke 边框颜色
stroke-width 边框宽度
fill 填充颜色

后记

字符实体

结果 描述 实体名称 实体编号
" quotation mark " "
' apostrophe ' '
& ampersand & &
< less-than < <
> greater-than > >
non-breaking space  
¡ inverted exclamation mark ¡ ¡
￠ cent ¢ ¢
￡ pound £ £
¤ currency ¤ ¤
￥ yen ¥ ¥
" broken vertical bar ¦ ¦
§ section § §
¨ spacing diaeresis ¨ ¨
© copyright © ©
a feminine ordinal indicator ª ª
« angle quotation mark (left) « «
¬ negation ¬ ¬
soft hyphen ­ ­
® registered trademark ® ®
ˉ spacing macron ¯ ¯
° degree ° °
± plus-or-minus ± ±
2 superscript 2 ² ²
3 superscript 3 ³ ³
′ spacing acute ´ ´
μ micro µ µ
paragraph
· middle dot · ·
¸ spacing cedilla ¸ ¸
1 superscript 1 ¹ ¹
o masculine ordinal indicator º º
» angle quotation mark (right) » »
¼ fraction 1/4 ¼ ¼
½ fraction 1/2 ½ ½
¾ fraction 3/4 ¾ ¾
¿ inverted question mark ¿ ¿
× multiplication × ×
÷ division ÷ ÷
à capital a, grave accent À À
á capital a, acute accent Á Á
 capital a, circumflex accent  Â
à capital a, tilde à Ã
Ä capital a, umlaut mark Ä Ä
Å capital a, ring Å Å
Æ capital ae Æ Æ
Ç capital c, cedilla Ç Ç
è capital e, grave accent È È
é capital e, acute accent É É
ê capital e, circumflex accent Ê Ê
Ë capital e, umlaut mark Ë Ë
ì capital i, grave accent Ì Ì
í capital i, acute accent Í Í
Î capital i, circumflex accent Î Î
Ï capital i, umlaut mark Ï Ï
D capital eth, Icelandic Ð Ð
Ñ capital n, tilde Ñ Ñ
ò capital o, grave accent Ò Ò
ó capital o, acute accent Ó Ó
Ô capital o, circumflex accent Ô Ô
Õ capital o, tilde Õ Õ
Ö capital o, umlaut mark Ö Ö
Ø capital o, slash Ø Ø
ù capital u, grave accent Ù Ù
ú capital u, acute accent Ú Ú
Û capital u, circumflex accent Û Û
ü capital u, umlaut mark Ü Ü
Y capital y, acute accent Ý Ý
T capital THORN, Icelandic Þ Þ
ß small sharp s, German ß ß
à small a, grave accent à à
á small a, acute accent á á
a small a, circumflex accent â â
ã small a, tilde ã ã
ä small a, umlaut mark ä ä
å small a, ring å å
æ small ae æ æ
ç small c, cedilla ç ç
è small e, grave accent è è
é small e, acute accent é é
ê small e, circumflex accent ê ê
ë small e, umlaut mark ë ë
ì small i, grave accent ì ì
í small i, acute accent í í
î small i, circumflex accent î î
ï small i, umlaut mark ï ï
e small eth, Icelandic ð ð
ñ small n, tilde ñ ñ
ò small o, grave accent ò ò
ó small o, acute accent ó ó
ô small o, circumflex accent ô ô
õ small o, tilde õ õ
ö small o, umlaut mark ö ö
ø small o, slash ø ø
ù small u, grave accent ù ù
ú small u, acute accent ú ú
û small u, circumflex accent û û
ü small u, umlaut mark ü ü
y small y, acute accent ý ý
t small thorn, Icelandic þ þ
ÿ small y, umlaut mark ÿ ÿ
 
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
￡ 镑 £ £
￥ 人民币 ¥ ¥ 

招聘案例
>代码位置(D:\\Dev\\Code\\Demo\\HTML+CSS+移动端\\标签\\招聘案例)
```html
<body>
    <h1>Web前端招聘</h1>
    <hr/>
    <h2>职位描述</h2>
    <p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
    <h2>岗位要求</h2>
    <p>5年以上开发经验，<strong>精通html5/css3/javascript等</strong>开发技术；</p>
    <p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
    <p>代码风格严谨，能搞保真还原设计稿，能兼容各种浏览器；</p>
    <p>对web前端性能优化以及web常见漏洞有一定的理解和相关实践；</p>
    <p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控力；</p>
    <p>责任心强，思路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
    <h2>工作地址</h2>
    <p>广东省-深圳市-南山区-深南大道-腾讯大厦</p>
    <img src="./地图.png" width="600" height="300">
</body>

招聘案例

标签：webhtmlcssjsJavaScript
  • 本文作者：VKIN
  • 本文链接：https://vkin.cc/?post=6
  • 版权申明：除非特别说明，否则均为本站原创文章，转载或复制请注明出处。
评论