HTML和CSS知识汇总7

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量647 收藏 20
点赞数 10
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_77512583/article/details/139933792
版权

1、元素的显示和隐藏

display：none隐藏之后不再显示 不保留位置

visibility: hidden; 隐藏之后不保留位置

案例

要求：本来son元素是隐藏的，当鼠标放到father元素上时，使son元素显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
        }
        /* 本来son元素是隐藏的，当鼠标放到father元素上时，使son元素显示 */
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
        
        .father:hover .son {
            display: block;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son1</div>
    </div>
</body>

</html>

2、结构伪类选择器

  • :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。

  • :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。

  • :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。

  • :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* nth-child(n) 对指定序号的子元素设置样式*/
        
        .nav li:nth-child(3) {
            color: red;
        }
        /* 2.odd奇数 even偶数 */
        
        .nav li:nth-child(odd) {
            color: red;
        }
        
        .nav li:nth-child(even) {
            color: blue
        }
        /* 3、2n+1 2n 4n 4n+1 n:从零开始 */
        
        .nav li:nth-child(2n+1) {
            color: green;
        }
        /* nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数） */
        
        .main p:nth-of-type(3) {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>li元素1</li>
        <li>li元素2</li>
        <li>li元素3</li>
        <li>li元素4</li>
        <li>li元素5</li>
        <li>li元素6</li>
        <li>li元素7</li>
        <li>li元素8</li>
    </ul>
    <div class="main">
        <span>你好</span>
        <p>p1</p>
        <p>p2</p>
        <!-- 目标元素 -->
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
    </div>
</body>

</html>

3、过渡(CSS3) transition

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过渡 transition: 要过度属性 过渡时间 运动曲线（ease 缓慢动画） 何时开始; */
            /* transition: width 1s linear, height 1s; */
            transition: all 1s;
        }
        
        .box:hover {
            width: 1000px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">box</div>
</body>

</html>

2D变形(CSS3) transform

属性值：translate（ 移动平移 ） scale（缩放）rotate（旋转）

transform：translate(50px,50px);

transform：scale(1.1);

transform：rotate(45deg);

动画(CSS3) animation

定义动画

@keyframes 动画名称 {
  from{ 开始位置 } 
  to{  结束  }
}

@keyframes 动画名称 {
    0%
    55%
     ....
    100%
}
/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/

调用动画

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;  

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素移动 */
        /* 1、transform：translateX（）
        2、margin-left
        3、定位 */
        
        @keyframes mover {
            from {
                /* transform: translate(0); */
                /* left: 100px; */
            }
            to {
                /* transform: translate(660px); */
                left: 600px;
            }
        }
        
        .car {
            /* 调用动画 */
            /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无限次) 是否反方向; */
            animation: mover 2s linear;
            /* 动画完成后停留在最后位置 */
            animation-fill-mode: forwards;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="car"><img src="../img/car.jpg " alt="" width="100px"></div>
</body>

</html>

    动画案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素移动 */
        /* 1、transform：translateX（）
        2、margin-left
        3、定位 */
        
        @keyframes mover {
            0% {
                /* transform: translate(0); */
            }
            49% {
                transform: translateX(1000px);
            }
            50% {
                transform: translateX(1000px) rotateY(180deg);
            }
            99% {
                transform: translateX(0px) rotateY(180deg);
            }
            100% {
                transform: rotateY(0deg);
            }
        }
        
        .car {
            /* 调用动画 */
            /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无限次) 是否反方向; */
            animation: mover 2s linear;
            /* 动画完成后停留在最后位置 */
            animation-fill-mode: forwards;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="car"><img src="../img/car.jpg " alt="" width="100px"></div>
</body>

</html>

弹性布局

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。(芸芸众生皆平等)

.box {
    display: flex;
}

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

  • 父盒子是：flex container

  • 子元素是：flex item

  • 总结原理：就是给父盒子添加flex属性，来控制子盒子的位置和排列方式

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 使wrap元素成为弹性盒子 */
            display: flex;
            /* 如果子元素宽度不够可以自动进行缩放 */
            /* 如果父元素宽度剩余，会按照原来的大小显示 */
        }
        
        .wrap span {
            width: 100px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
        <div class="item5">item5</div>
        <div class="item6">item6</div>
        <div class="item6">item6</div>
        <div class="item6">item6</div>
        <div class="item6">item6</div> -->

        <!-- 对于子元素来说，什么样的标签元素都是一样的 -->
        <span class="item1">item1</span>
        <span class="item2">item2</span>
        <span class="item3">item3</span>
        <span class="item4">item4</span>
        <span class="item5">item5</span>
        <span class="item6">item6</span>
        <span class="item7">item7</span>
        <span class="item8">item8</span>
    </div>
</body>

</html>

    弹性盒子的方向

  • flex-direction属性（主轴的方向）

  • 它可能取有4个值：

  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 700px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴的方向 */
            /* row主轴水平 从左向右 */
            /* column主轴垂直 从上向下 */
            flex-direction: row;
        }
        
        .wrap span {
            width: 200px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span class="item1">item1</span>
        <span class="item2">item2</span>
        <span class="item3">item3</span>
        <span class="item4">item4</span>
        <span class="item5">item5</span>
        <span class="item6">item6</span>
    </div>
</body>

</html>

弹性盒子换行

.box{
  flex-wrap: nowrap（默认） | wrap | wrap-reverse;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 700px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* wrap换行 */
            /* nowrap 不换行 */
            flex-wrap: wrap;
        }
        
        .wrap span {
            width: 200px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span class="item1">item1</span>
        <span class="item2">item2</span>
        <span class="item3">item3</span>
        <span class="item4">item4</span>
        <span class="item5">item5</span>
        <span class="item6">item6</span>
    </div>
</body>

</html>

弹性盒子主轴上的对齐方式

.box {
  justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}

  • flex-start（默认值）：左对齐

  • flex-end：右对齐

  • center： 居中

  • space-between：两端对齐，项目之间的间隔都相等。

  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴上的对齐方式 */
            /* 默认左对齐 */
            justify-content: flex-start;
            /* 右对齐 */
            justify-content: flex-end;
            /* 居中 */
            justify-content: center;
            /* 两端对齐 */
            justify-content: space-between;
            /* 两侧相等 */
            justify-content: space-around;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
    </div>
</body>

</html>

弹性盒子交叉轴的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            justify-content: space-between;
            /* 交叉轴的对齐方式 */
            /* 居中 */
            align-items: center;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
    </div>
</body>

</html>

嵌套的元素水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 交叉轴的对齐方式 */
            /* 垂直居中居中 */
            align-items: center;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
    </div>
</body>

</html>

坐着拖拉机看月亮
关注
  • 10
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML、CSS知识总结
xzc1453的博客
09-04 563
HTML、CSS知识总结
html和css知识点总结.docx
04-03
HTML 和 CSS 是构建网页的基本语言，它们在...这些只是 HTML 和 CSS 的一部分基础知识，实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
html+css知识点总结：
2303_79193185的博客
04-27 1928
css指层叠样式表css定义如何显示html元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在css文件多个样式定义可以层叠为一。
HTML+CSS知识点总结
m0_62435786的博客
03-24 1759
HTML+CSS知识点总结第一章基础HTML 基础文本第二章列表、表格、多媒体列表第三章表单表单第四章CSS1CSS语法与引入第五章CSS2常用属性第六章 盒子盒子块与行内margin的合并第七章浮动浮动浮动元素的高度塌陷解决浮动对齐第八章定位定位第九章动画动画 第一章基础 HTML 基础 （1）标记： 单独标记/成对标记（不分大小写） 开始标记： 头部标记： 元信息标记: 文件标题标记: 主体标记： （2）元素： 每一组标记及其内部文字就构成了一个元素,整个html文件就是 由一个大元素包含许多小元素
HTML和CSS知识汇总1
2302_77512583的博客
06-13 873
用户名: 百度一下
html与css 知识总结
余笙.'的博客
02-28 2866
HTML html结构 HTML结构由<html>、<head>、<body>等几部分组成 html>:定义整个html文档 head>:包含所有头部标签 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, &
HTML与CSS知识点总结
cherish_hyl的博客
10-17 2531
1、常用浏览器 ​ 浏览器内核（渲染引擎）：负责读取网页内容、整理讯息，计算网页的显示方式并显示页面。 浏览器 内核 备注 IE Trident IE、猎豹安全、360、百度浏览器 Firefox Gecko 火狐浏览器内核 Safari Webkit 苹果浏览器内核 Chrome/Opera Blink chrome/opera浏览器内核。Blink其实是Webkit的分支 注：国内浏览器一般采用Webkit/Blink内核，如UC、QQ等 2、Web标准 主要
HTML和CSS知识点总结（包括H5和C3)
qq_42349528的博客
07-28 7358
HTML和CSS知识点总结 1.常用的HTML标签 标题标签 <h1></h1>~<h6></h6> 段落标签<p></p>和换行标签<br/> 文本格式化标签 加粗<strong></strong>和<b></b> 倾斜和<i></i> 删除线<del></del>和<s&gt
HTML+CSS+JavaScript基础知识总结
热门推荐
qq_53061847的博客
05-27 1万+
目录 一、HTML+CSS 1. 如何理解HTML的语义化 2. 从浏览器地址栏输入url回车会发生什么 3. 溢出的文字显示省略号 4. css选择器和优先级 css选择器 5. BFC 6. 水平垂直居中的方法 二、JavaScript 1. 基本数据类型 2. 数组的使用 一、数组序列化 二、栈和队列方法 三、排列方法 四、操作方法 五、位置方法 六、迭代方法 2.1 利用函数求任意个数的最大值 2.2 利用函数翻转任意数组 reverse ......
html+css基础知识
weixin_52682120的博客
05-10 2108
0、前提 80%知识，只有20%的场景可以用到； 20%的知识，有80%的场景可以用到。 1 、HTML & CSS 到底是什么，有什么用？ 它们是两门语言。 HTML + CSS + Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。 1.1 执行HTML CSS HTML、CSS -> 浏览器内核 -> 页面
[HTML/CSS基础]知识点汇总
DuFengYa的博客
11-08 951
超文本标记语言（Hyper Text Markup Lauguage） 用该语言编写的文件，以.html或.htm为后缀
html+css知识点总结
06-24
html+css知识点总结
HTML.css知识总结.md
06-19
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
HTML+css知识总结(建议收藏）
05-09
一个页面的主要组成由结构（html5）表现（css）行为（JavaScript）组成， 今天学习的是以标签和路径为主的html5的内容。 lang语言：作用于提示浏览器编译 charset字符：用UTF-8为全球通用准没错。 骨架标签：html...
HTML+CSS的入门知识点总结
09-20
HTML+CSS入门知识点总结 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS...通过对HTML+CSS的入门知识点的总结，我们可以更好地理解HTML和CSS的基本概念和应用，从而更好地设计和开发网页。
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1301
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 223
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 281
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
HTML、CSS和JavaScript知识点总结
HTML CSS JavaScript知识点总结 HTML是用来定义和描述网页内容的一种标记语言。它是网页的基础，主要用于结构化网页内容，包括文字、图片、视频等。HTML标签有一定的规范，但不区分大小写，建议使用小写字母。 CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值