九、CSS3新特性三

最新推荐文章于 2024-06-17 23:23:10 发布
最新推荐文章于 2024-06-17 23:23:10 发布
阅读量585 收藏 2
点赞数
分类专栏： HTML5+CSS 文章标签： css3 css 前端 HTML H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42710036/article/details/129161533
版权

文章目录

一、逐帧动画

一张背景图，改变back-position-x的位置让他动起来
step-start 逐帧动画
animation: play 0.5s step-start infinite;

二、flex弹性盒子

触发弹性盒子
给父容器添加 display: flex
弹性盒子的特点：
1、父容器添加弹性盒子以后子元素可转换成块元素
2、子元素横向排列了
3、父元素添加弹性盒子后只有一个子元素的时候给子元素添加 margin auto可以上下左右居中。
概念
1、容器（父元素）
2、项目（子元素）
触发完弹性盒子后只会影响子元素的排列方式，孙子辈元素不影响。
概念
横轴 x轴 横向(水平方向)
纵轴 y轴 纵向(垂直方向)

主轴 弹性盒定义的方向
侧轴 与主轴对立的一个方向

容器属性
触发弹性盒子 display:flex
修改主轴方向 column纵向 row横向（默认）
flex-direction: column;
对齐方式
语法：justify-content
取值：
flex-start：主轴的开始位置(元素挨在一起)
flex-end：主轴的结束位置(元素挨在一起)
center：主轴位置居中(元素挨在一起)
space-around：主轴环绕对齐
space-between：主轴两端对齐

三、少量元素侧轴对齐方式

align-items: stretch(位伸) 默认值，项目没有高度
flex-start：侧轴开始的位置
flex-end:侧轴结束位置对齐
center:侧轴位置中间对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 900px;
            margin: 0 auto;
            display: flex;
            background-color: black;
            justify-content:space-around;
            align-items: center;
        }
        
        .box span{
            width: 100px;
            border: 1px solid red;
            color: white;
            text-align: center;
            font-size: 14px;
        }
        
        
        
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

在这里插入图片描述

四、折行侧轴对齐方式

元素的折行问题
如晒个容器当中放了过多的项目会出现项目挤压的问题，项目原本的宽无法使用。
不想被挤压就进行折行，定义宽度
flex-wrap: wrap/nowrap（默认不折行）
折行后会出现行高的问题如下图：
在这里插入图片描述
折行之后行间距
行间距：align-content 可消除行间距
属性值：
flex-start:侧轴开始位置进行对齐（几行挨在一起的）
flex-end:侧轴结束位置进行对齐（几行挨在一起的）
center: 侧轴中心对齐
space-around:侧轴环绕对齐
space-between:侧轴两端对齐
stretch:拉伸(默认值)

五、项目属性

order 控制元素的布局顺序，取值越大越靠后，默认的值auto(0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 800px;
            background-color: pink;
            display: flex;
        }
        
        .box span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            color: white;
            text-align: center;
            font-size: 14px;
        }
        
        .box .one{
            /* 其他默认为0所以one要排到最后去了 */
            order: 1;
        }
        
        
    </style>
</head>
<body>
    <div class="box">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

在这里插入图片描述
调整单个元素在侧轴的对齐方式
align-self:

  • stretch 默认值拉伸前提是没有高度
  • flex-start 侧轴的开始位置
  • flex-end 侧轴的结束位置
  • center 侧轴的中心位置
  • baseline 效果跟flex-start一致
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 800px;
            background-color: pink;
            display: flex;
        }
        
        .box span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            color: white;
            text-align: center;
            font-size: 14px;
        }
        
        .box .one{
            /* 其他默认为0所以one要排到最后去了 */
            order: 1;
            /* 这个元素跑到中间去了 */
            align-self: center;
        }
        
        
    </style>
</head>
<body>
    <div class="box">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

在这里插入图片描述
挤压属性
当项目过多的时候宽义马会被挤压，如果需要不挤压可以使用
flex-shrink 取值：0 不挤压 1挤压

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 400px;
            background-color: green;
            display: flex;
            overflow: auto;
        }
        
        .box span{
            width: 200px;
            height: 100px;
            background-color: blueviolet;
            flex-shrink: 0;
        }
        
        
        
    </style>
</head>
<body>
    <div class="box">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span>4</span>
        <span>5</span>
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

在这里插入图片描述
flex:1;项目占余下所有空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 400px;
            background-color: green;
            display: flex;
            flex-direction: column;
        }
        header{
            height: 50px;
            background-color: red;
        }
        section{
            background-color: green;
            /* height: calc(100% - 100px); */
            flex: 1;
        }
        footer{
            height: 50px;
            background-color: blue;
        }
        
        
        
        
    </style>
</head>
<body>
    <div class="box">
        <header>头部</header>
        <section>主体</section>
        <footer>尾部</footer>
    </div>
</body>
</html>

在这里插入图片描述

六、网格布局

网格布局的含义：将页面划分成一个一个的网格区域，用于不同样式的合并，制作不同的效果，网格和flex布局的区别
相同点：

  • 都是通过display属性进行触发的，都分为容器和项目
    不同点：
  • flex布局 一维布局 要么横向要么纵向
  • grid布局 二维布局 里面有行和列
    网格布局组成单元格：
  • 1行1列的单元格 2条横线 2条纵线
  • 1行3列的单元格 2条横线 4条纵线
    触发网格布局：
    语法：display: grid;
    如何划分网格：
  • 使用px
    grid-template-rows: 100px 100px 100px 100px; 四行
    grid-template-columns: 100px 100px 100px 100px; 四列
  • 使用百分比
    grid-template-rows: 20% 20%; 两行
    grid-template-columns: 20% 20%; 两列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 400px;
            background-color: green;
            display: grid;
            grid-template-rows: 20% 20% 20% 20% 20%;
            grid-template-columns: 50% 50%;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

在这里插入图片描述
repeat函数
重复数值

  • grid-template-rows: repeat(重复次数，取值)
  • grid-template-columns: repeat(10, 40px)
    自动填充，平均分配
  • grid-template-rows: repeat(auto-fill, 20%)
  • grid-template-columns: repeat(auto-fill, 10%)
    按片段来划分
  • grid-template-rows: 1fr 2fr 3fr;
  • grid-template-columns: 1fr 2fr 3fr;
    占剩余宽度剩余高度的所有 auto
  • grid-template-rows: 100px 100px auto;
  • grid-template-columns: 100px auto 100px;
    最小最大函数
  • grid-template-rows: 100px 100px 100px minmax(100px, 200px);
  • grid-template-columns: 100px 100px 100px minmax(100px, 200px);

七、网格布局的对齐方式

网格线的命名：
grid-template-rows: [r1]100px [r2] 100px [r3]100px [r4]100px [r5];
grid-template-columns: [c1]100px [c2]100px [c3]100px [c4]100px [c5];
网格的间距
行间距

  • grid-row-gap: 10px;
    列间距
  • grid-column-gap: 10px;
    复写方式
  • grid-gap: 10px 10px;
    对齐方式 取值 start end center
  • place-items: end start;

八、网格布局的项目合并

网格在容器当中的对齐方式：纵向 横向
place-content: center center
项目的排列方向：
grid-auto-flow: column/row

永恒的宁静
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
1.07 css3新特性
10-07
本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，...
CSS3有哪些新特性？
weixin_39491740的博客
03-13 151
1. CSS3实现圆角（border-radius），阴影（box-shadow），2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜4. 增加了更多的CS...
关于前端css一些属性的总结
weixin_42567822的博客
05-06 244
css属性：过渡、变幻、动画、渐变、弹性盒子、视口、媒体查询
HTML5&CSS3新特性
weixin_52972575的博客
05-05 8087
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
h5和css3新特性
msn131420的博客
02-25 2268
一、HTML5 的新特性 1.新增语义化标签 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 **IE9+ 以上版本的浏览器**才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 注意：只需要关注开发常用的新特性即可。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”&.
CSS3新特性汇总
qq_44741577的博客
02-24 941
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS3新特性
王工头的博客
01-24 8084
CSS3新特性 欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~ 声明：本文参考 W3C CSS3 教程、菜鸟教程等，详细移步 W3C 或菜鸟教程 用 CSS3 做过一些小动画，很好用，特别是里面一些新特性，都是 CSS2 不可比拟的，这里整理一些出来，当做笔记，也当做教程，共勉！ CSS3 相比 CSS 2 对边框、背景、渐变、...
CSS3新增了哪些新特性？
u012138854的博客
11-07 4990
即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。background-size属性常用来调整背景图片的大小，主要用于设定图片本身。通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。当我们设置背景图片时，图片是会以左上角对齐，但是是以。
【css】CSS3有哪些新特性
热门推荐
t13965688123的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、css3边框——圆角效果 border-radius2、css3边框——阴影 box-shadow3、css3边框——边框图片 border-image4、css3颜色——颜色之RGBA5、css3颜色——渐变色彩 liner-gradient线性渐变6、CSS3文字与字体——text-overflow与word-wrap7、CSS3文字与字体——@font-face 字体8、CSS3文字与字体——文本的阴影 text-s.
HTML5和CSS3新特性
这个世界上有各种各样的人.
05-12 1800
<header>：描述了⽂档的头部区域，于定义内容的介绍展⽰区域。 <nav>：定义导航链接的部分。 <section>：定义⽂档中的节（section、区段）。比如章节、页眉、页脚或⽂档中的其他部分，section通常 包含了⼀组内容及其标题。 <article>：定义独⽴的内容。 <aside>：定义页⾯主区域内容之外的内容（⽐如侧边栏）。 <figure>：标签规定独⽴的流内容（图像、图表、照⽚、代码等等）。 <figcaption>：定义 <figure>元素的标题。 <main>:main元素
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
发博客了发博客
Cherry_garcia的博客
06-17 166
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。-- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。-- 1.IE盒子模型||怪异盒子模型 box-sizing: border-box;-- 1.标准盒子模型 box-sizing: content-box;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
css3属性
保持学习，时刻复盘
06-17 165
css3属性
【Effective Web】常见的css布局方式--三栏布局
最新发布
Moriarty123666的博客
06-17 139
由于table有自适应的特点，可以把需要自适应的middle的display设置为table-cell。如果要根据窗口自适应，加上一个很大的width，这里设置为2000px。需要把right块提前，同时把middle块加上margin: 0 110px (左右100px + 10px)如果按正常排列，效果会是这样，middle块会尽可能占空间，导致right元素被挤压到下一行。与flex布局类似，不过可以做二维的布局。
css3多列布局
保持学习，时刻复盘
06-17 237
css3多列布局
css3新增伪元素有哪些？
tianxianghuiwei的博客
06-13 408
这些伪元素允许开发者通过 CSS 控制页面上特定部分的样式和内容，例如添加装饰性内容或改变选中文本的样式。使用伪元素可以增强页面的视觉效果和交互性。CSS3 中引入了一些新的伪元素，用于向文档添加特定样式或内容。
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 428
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
css3新特性和h5新特性
05-31
CSS3新特性： 1. 弹性盒模型（Flexbox）：可以更方便地实现自适应布局。 2. 网格布局（Grid）：可以更方便地实现网格化布局。 3. 圆角（border-radius）和阴影（box-shadow）：可以更方便地实现图形效果。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永恒的宁静

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值