Day06-HTML5 CSS3

已于 2023-12-02 15:34:45 修改
阅读量23 收藏
点赞数
文章标签： html5 css3 前端
于 2023-12-02 14:09:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134751437
版权
本文详细介绍了CSSFlexbox布局中的关键属性，如flex-direction控制主轴方向，flex-wrap决定换行，justify-content和align-items调整项目在主轴和副轴上的对齐方式，align-content用于多行排列的对齐，以及透明度、filter和hsla颜色函数的应用。
摘要由CSDN通过智能技术生成

一.体验flex布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 200px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;

            /* 项目（子元素们）会默认按照主轴排列 */
        }

        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

二.父元素的属性flex-direction

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 200px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
            /* flex-direction: ; */
            /* row 默认值        主轴正常排列 */
            /* row-reverse       主轴颠倒排列  */
            /* column            副轴排列  */
            /* column-reverse    副轴颠倒排列;  */
            flex-direction: row;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        
        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>

</body>

</html>

三.父元素属性flex-wrap

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
            /* flex-wrap: ;(换行) */
            /* nowrap（默认 不换行）; | wrap(换行 第一行在上方); | wrap-reverse(换行 第一行在下方); */
            flex-wrap: nowrap;
            flex-wrap: wrap;
            flex-wrap: wrap-reverse;
        }
        
        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
    </div>

</body>

</html>

四.父元素属性flex-flow

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
            /* flex-flow: 主轴的方向 || 换行; */
            /* flex-direction  flex-wrap  简写 */
            /* flex-flow: <flex-direction> || <flex-wrap>; */
            flex-flow: column wrap;
        }
        
        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
    </div>

</body>

</html>

五.父元素属性justify-content

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
            /* 主轴上面的对齐方式 */
            /* justify-content: 
            flex-start(默认值)   正常主轴排列 
            flex-end            主轴末尾对齐 
            center              主轴居中对齐 
            space-between       主轴两端对齐 
            space-around        元素之间的间距一致 左右两边的间距加起来=元素之间的间距; */
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;
            justify-content: space-between;
        }
        
        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

六.父元素属性aling-items

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
            /* 副轴上面的对齐方式 */
            /* align-items: */
            /* flex-start | flex-end | center | baseline | stretch; */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            align-items: baseline;
            align-items: stretch;
        }
        
        .container .item {
            width: 100px;
            /* height: 100px; */
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

七.你有几种写法让元素居中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            /* position: relative; */
            /* 3.display: flex;
                 justify-content: center;
                 align-items: center; */
        }
        
        .content .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 1.margin: 350px auto; */
            /* 2.position: absolute;
                 top: 50%;
                 left: 50%;
                transform: translate(-50%,-50%); */
        }
    </style>
</head>

<body>

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

</body>

</html>

八.父元素属性align-content

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
            flex-wrap: wrap;
            /* align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
            /* align-content: 
               stretch(默认)   默认排列方式
               flex-start      开始对齐
               flex-end        末尾对齐 
               center          居中对齐 
               space-between   两端对齐 
               space-around    元素之间的间隙一致*/
            align-content: stretch;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-around;
            align-content: space-between;
        }
        
        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
        <div class="item">item10</div>
    </div>

</body>

</html>

九.透明度

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: black;
            /* 透明度 */
            /* 0-1 */
            /* opacity: 0; */
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <h3>123456</h3>

    <script>

        var box = document.querySelector('.box');

        var timer = null;
        box.onmouseenter = function () {
            var num = 1;
            timer = setInterval(function () {
                num -= 0.1
                if (num <= 0) {
                    clearInterval(timer);
                } else {
                    box.style.opacity = num;
                }
            }, 50)
        }

    </script>

</body>

</html>

十.filter过滤（灰度）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            background-image: url(https://x.dscmall.cn/storage/data/gallery_album/141/original_img/141_P_1685299852438.png);
            background-repeat: no-repeat;
            background-size: cover;
            /* 过滤 */
            /* grayscale设置灰度 */
            /* filter: grayscale(100%); */
            /* filter: blur(10px); */
        }
        
        .box2,
        .box3,
        .box4 {
            width: 600px;
            height: 600px;
            /* blur 设置模糊 */
            filter: blur(200px);
            position: absolute;
        }
        
        .box2 {
            background-color: pink;
            top: 50%;
            margin-top: -300px;
            left: 10%;
        }
        
        .box3 {
            background-color: skyblue;
            top: 40%;
            left: 50%;
            margin-left: -300px;
        }
        
        .box4 {
            background-color: purple;
            right: 10%;
            top: 50%;
            margin-top: -300px;
        }
    </style>
</head>

<body>

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

    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>

</body>

</html>

十一.css函数（色相-饱和度-亮度）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            /* hsla 表示`色相-饱和度-亮度`（Hue-saturation-lightness）模式。 */
            /* hsla(颜色值0-360, 饱和度0%-100%,亮度0%-100%, 透明度0-1) */
            background-color: hsla(0, 100%, 50%, 1);
        }

        .box2 {
            /* calc() 计算 */
            /* 1920 */
            /* 1440 */
            /* 1560 */
            /* 414 */
            width: calc(100% - 100px);
            height: 300px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>

<body>

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

</body>

</html>

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4689
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 2042
Web前端html5+css3前端开发入门学习笔记
20day-HTML&CSS-1~24
DaB210的博客
03-31 965
20day-HTML&CSS-1~24
day10-HTML5&CSS3提高
weixin_48697269的博客
04-22 906
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div>
前端web入门-CSS-day06-标准流和flex布局
来自计科大一萌新的编程记录本
06-17 1502
学习目标：1. 了解标准流概念 2.学会使用flex布局
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
chengkai730的博客
06-29 1548
Day3 CSS 第1天
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
m0_47268176的博客
11-30 1万+
day06 布局核心： 盒模型（间距） 浮动 （并排） 定位 （覆盖+ 特殊位置） 定位类型position 静态定位 position:static; 默认值 静态定位不能使盒子位置变化 不适合布局 作用：解决低版本浏览器兼容问题 相对定位 position:relative; 能不能使盒子发生位置变化 yes ​ 2. 参考对象：自身初始位置 ​ 3. 脱离不脱离标准流 不脱离标准（保留原来位置 ） ​ 4. 是否适合布局：不适合
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
qq_36595761的博客
07-15 2560
HTML5+CSS3实现鼠标悬停图文卡片动画切换特效
day07.11.HTML-CSS盒模型练习
m0_61566562的博客
06-29 813
【代码】HTML-CSS盒模型练习。
day06-HTML&CSS.zip
03-01
同时，这也会涉及到HTML5的新特性，如语义化标签、音频/视频嵌入、离线存储等，以及CSS3的新功能，如过渡、动画、多列布局等。 总之，HTML和CSS是构建网页不可或缺的工具，掌握它们能让你具备创建动态、交互式网页...
day10-HTML5&CSS3提高.pdf
10-11
HTML5与CSS3是现代网页开发的基石，它们带来了许多增强功能和改进，使得网页设计更加丰富和动态。HTML5的新特性主要集中在增强网页的语义化、多媒体支持以及表单元素的扩展。 语义化标签是HTML5的一大亮点，它们...
day5-html-css-js
05-10
在"day5-html-css-js"的学习资源中，你可能会深入学习以下HTML知识点： 1. **HTML5新特性**：HTML5增加了许多新的标签，如`<header>`, `<footer>`, `<article>`, `<section>`等，使页面结构更加清晰，便于SEO和无...
Day06-CSS布局-浮动
07-10
3. 布局复杂性：随着CSS布局技术的发展，如Flexbox和Grid，浮动在复杂布局中的应用逐渐减少，因为它们提供了更强大、更灵活的解决方案。 四、现代CSS布局替代方案 虽然浮动在某些场景下仍然有效，但现代CSS布局...
高级软件人才培训专家-day01-HTML-CSS
03-10
### 3. Web标准 - **Web标准**：由一系列标准组成，主要用于规范网页的结构、表现和行为。这些标准大多由W3C（World Wide Web Consortium，万维网联盟）负责制定。 - **Web标准的组成部分**： - **HTML**：负责...
HTML5服装电商网上商城模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
08-19 1531
HTML5服装电商网上商城模板源码，前端商城源码，商城网站源码，商城模板，服装商城源码，内置8个页面，各种好看的商品的展示，可以让自己的设计思路更加明确，表单，轮播图，演示，表格，登录，弹框等界面效果齐全，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
CSS3 3D 转换
最新发布
lly202406的博客
08-24 475
CSS3 3D 转换是一种强大的技术，它允许开发者创建出令人印象深刻的3D视觉效果，而无需复杂的JavaScript或第三方库。通过使用CSS3的3D转换功能，设计师可以轻松地将元素旋转、倾斜、移动或缩放，以创建出深度和透视感。在本文中，我们将探讨CSS3 3D转换的基础知识，包括如何使用它们以及一些实际的应用示例。
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 679
【代码】原神4.8版本抽到角色和重点培养数据表。
CSS3页面布局-三栏-中栏流动布局
业精于勤荒于嬉，行成于思毁于随
08-23 267
控制两个外包装容器的外边距，一个包围三栏，一个包围左栏和中栏。实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。
HTML5与CSS3：前端开发的革新与标准演变
HTML5和CSS3是现代Web开发中的核心技术，它们分别代表了网页结构语言和样式表语言的最新进展。2010年7月20日，在WebRebuild.org/W3Cday的活动上，主题演讲者谢子斌（ZiBin）针对这两者进行了深入探讨。 首先，他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值