【前端学习】CSS入门（三）

已于 2022-04-27 09:05:00 修改
阅读量464 收藏 1
点赞数 3
文章标签： html5 css3 前端
于 2022-04-26 21:05:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swpeiii_/article/details/124404509
版权

目录

一、浮动float

1、浮动有什么用？

  • 将多个块级元素在一行内水平排列
  • 创建一个浮动框，将其移到左/右侧，排列到前一个的块或浮动框后

2、float代码演示

float具有三种属性：left || right || none

css

.a,.b,.c,.d,.e{
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 10px;
}

.a,.b,.c{
    float: left;
}

.d,.e{
    float: right;
}


html

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</body>

在这里插入图片描述


3、浮动的特性

  • 脱标：脱离标准流（可以理解为“浮在空中”）
  • 不会保留原先位置；标准流会占用原先位置（此时会出现层叠）；只会压住后面的标准流
  • 浮动元素会统一上沿对齐
  • 一行装不下时，自动换行
  • 任何模式元素在添加浮动后，都会具有行内块元素相似的特性

脱标


4、浮动搭配标准流使用

css

.a,.b,.c{
    width: 250px;
    height: 95px;
    background-color: pink;
    margin: 30px;
}
.d,.e,.f,.g{
    width: 75px;
    height: 95px;
    background-color: hotpink;
    margin: 30px;
}
.h{
    width: 600px;
    height: 95px;
    background-color: orange;
    margin: 30px;
}
.a,.b,.c{
    float: left;
}
.d,.e{
    float: left;
}
.f,.g{
    float: right;
}
.e{
    float: left;
}
.x,.y,.z{
    width: 1100px;
    height: 160px;
    border: black solid;
    margin: 20px;
}

html

<body>
    <div class="x">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    
    <div class="y">
        <div class="d">d</div>
        <div class="e">e</div>
        <div class="f">f</div>
        <div class="g">g</div>
    </div>


    <div class="z">
        <div class="h">h</div>
    </div>
</body>

在这里插入图片描述


5、清除浮动clear: both；

（1）清除浮动有什么用
  • 父盒子不需要确定高度（盒内元素会增加），但是浮动元素不占位置会导致父盒子高度为0，进而影响下方的标准流盒子
  • 可以理解为“有家不能回”，因此需要用到以下方法避免

在这里插入图片描述


（2）【推荐】额外标签法（隔墙法）
css

.con{
    width: 1190px;px;
    margin: 30px auto;
    border: black solid;
}

.a,.b,.c,.d,.e{
    width: 215px;
    height: 215px;
    background-color: pink;
    border-radius: 5px;
    margin: 11px;
    float: left;
}

.sta{
    width: 1190px;
    height: 325px;
    margin: 30px auto;
    border: black solid;
}

html

<body>
    <div class="con">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div style="clear: both;"></div>
    </div>

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

在这里插入图片描述

在子盒子后添加了一个空盒子（必须为块级元素！），并且 clear: both; 即可撑开盒子

（3）父盒子添加overflow: hidden;
css

.con{
    width: 1190px;px;
    margin: 30px auto;
    border: black solid;
    overflow: hidden;
}
.a,.b,.c,.d,.e{
    width: 215px;
    height: 215px;
    background-color: pink;
    border-radius: 5px;
    margin: 11px;
    float: left;
}
.sta{
    width: 1190px;
    height: 325px;
    margin: 30px auto;
    border: black solid;
}

html

<body>
    <div class="con">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
    </div>

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

（4）after伪元素清除浮动
css

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;
}
/* 对需要清除浮动的父盒子进行上述操作即可 */

.con{
    width: 1190px;px;
    margin: 30px auto;
    border: black solid;
    overflow: hidden;
}
.a,.b,.c,.d,.e{
    width: 215px;
    height: 215px;
    background-color: pink;
    border-radius: 5px;
    margin: 11px;
    float: left;
}
.sta{
    width: 1190px;
    height: 325px;
    margin: 30px auto;
    border: black solid;
}

html

<body>
    <div class="con clearfix">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
    </div>

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

（5） 双伪元素清除浮动
css

.clearfix:before，.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}
/* 对需要清除浮动的父盒子进行上述操作即可 */

二、过渡

  • 想要改变多个属性时加在“ ，”后面即可
  • 改变所有属性时，选属性（transition中）时选“all”即可
  • 谁做过渡给谁加
css

body{
    background-color: #eae8eb;
}
.a{
    width: 235px;
    height: 300px;
    background-color: #ffff;
    margin: 50px auto;
    /* transition: 过渡属性 过渡时间 速度曲线 开始时间（可省略), 改变多个属性加“ ，”; */
    transition: box-shadow .5s ease;
}
.a:hover{
    box-shadow: 16px 16px 10px -4px rgba(0, 0, 0, .3);
}

html

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

等我把怎么上传视频弄明白，再把代码示例展示出来~~

三、定位position

1、定位的作用

  • 定位可以使盒子固定在盒子或页面中的任意位置
  • 定位可以使盒子盖住别的盒子
  • 标准流和浮动做不到的事情

2、定位的组成

  • 定位 = 定位模式 + 边偏移

  • 定位模式
    在这里插入图片描述

  • 边偏移
    在这里插入图片描述


3、静态定位 static

  • 默认值，无定位
  • 没有脱离文档流
  • 需要用margin来控制位置

4、相对定位 relative

  • 相对于原来位置移动
  • 不脱标，保留文档流中的原有位置（“人走了钱还在”）
  • 常用于给绝对定位提供父盒子
  • 用 left / top 给其设置偏移量

在这里插入图片描述

代码见下一部分（绝对定位），图中即“人走了钱还在”

5、绝对定位 absolute

  • 没有父盒子 或 父盒子无定位 时，绝对定位以浏览器为准
  • 如果父盒子有定位（静态/相对/绝对），则以最近一级有定位的父盒子为参考点移动
  • 不再占有原来的位置（脱标）
  • 口诀：子绝父相（轮播图翻页键原理）
  • 【最常用的盒子水平居中方式】子绝父相，子盒子设置left: 50%; margin-left: 负盒子宽度一半;
css

body{
    background-color: #f5f5f7;
}
.yeye{
    width: 400px;
    height: 500px;
    border-radius: 18px;
    padding: 30px;
    background-color: #ffff;
    box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
    position: relative;
    top: 30px;
    left: 430px;
}
.baba{
    width: 330px;
    height: 105px;
    border-radius: 18px;
    background-color: palegoldenrod;
}
.son{
    width: 315px;
    height: 240px;
    border-radius: 18px;
    background-color: bisque;
    position: absolute;
    top: 200px;
    left: 80px;
}
.sta{
    width: 315px;
    height: 240px;
    border-radius: 18px;
    background-color: #ffff;
    box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
}

html

<body>
    <div class="yeye">
        <div class="baba">
            <div class="son">
            </div>
        </div>
    </div>
    
    <div class="sta"></div>
</body>

在这里插入图片描述

依照代码可以看出：没有定位的baba盒子并没有作为son盒子的参考点，而是将上一级有定位的yeye盒子作为参考

6、固定定位 fixed

  • 以浏览器的可视窗口（顾名思义，可以看到的部分）为参照点，跟父盒子无关
  • 不随页面滚动而滚动
  • 不再占有原来的位置（脱标），可以看做一种特殊的绝对定位
css

body{
    background-color: #f5f5f7;
    
}
.banxin{
    margin: 20px auto;
    width: 900px;
    height: 3000px;
    border-radius: 18px;
    padding: 30px;
    background-color: #ffff;
    box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
    position: relative;
}
.dingbu{
    width: 700px;
    height: 20px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    top: 10px;
}
.dibu{
    width: 700px;
    height: 20px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    bottom: 10px;
}
.fanhui{
    text-align: center;
    width: 80px;
    height: 70px;
    position: fixed;
    bottom: 150px;
    right: 30px;
    border-radius: 18px;
    background-color: pink;
    box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
}

html

<body>
    <div class="banxin">
        <div class="dingbu">顶部</div>
        <div class="dibu">底部</div>
    </div>
    <div class="fanhui"><p>返回<br>顶部</p></div>
</body>

在这里插入图片描述

在这里插入图片描述

7、粘性定位 sticky（先跟随滚动，后固定在某个位置）


8、定位叠放次序 z-index

.box{ z-index: 1; }
  • 默认值为auto，属性值数值越大，盒子叠放层越靠上
  • 属性值相同，按书写顺序后来居上
  • 数字后无单位
  • 具有定位的盒子才有该属性

9、定位的特性

  • 添加定位后，inline元素可直接添加宽高，block元素默认宽高为内容宽高（与浮动类似）
  • 绝对定位 / 固定定位 会完全压住下方盒子，但浮动盒子不会压住标准流盒子中的文字（文字环绕效果）

四、动画 animation

1、动画的基本使用

  1. 先定义动画
  2. 再使用动画

2、定义动画

（1）动画序列@keyframes
  • 0%（动画开始）和 100%（动画结束）等同于：“ from{ } ” 和 “ to{ } ”
  • 以一种样式改变为另一种样式；任意多样式、任意多次数
css

@keyframes move{
    /* 开始状态 */
    0%{
        transform: translateX(0px);
    }
    
    /* 结束状态 */
    100%{
        transform: translateX(100px);
    }
}

（2）使用动画
  • 调用的动画名必须与定义的一致
css

.box{
    /* 调用动画 */
    animation-name: move;

    /* 动画持续时间 */
    animation-duration: 1.5s;
}

2、动画相关属性

在这里插入图片描述


3、动画的简写【常用】

  • animation: 调用的动画名称 - 持续时间 - 运动曲线 - 何时开始 - 播放次数 - 是否反向播放 - 起始或结束状态 ;
  • （上面加粗的是必要属性）
  • 播放次数的 infinite 属性为 无限循环
animation: name duration timing-function delay iteration-count direction fill-mode;
 /* animation: 调用的动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向播放 起始或结束状态; */

css

@keyframes move{
    0%{
        transform: translate(0,0);
    }
    25%{
        transform: translate(300px,0), rotate(45deg);
    }
    50%{
        transform: translate(300px,300px), rotate(45deg);
    }
    75%{
        transform: translate(0,300px), rotate(45deg);
    }
    100%{
        transform: translate(0,0), rotate(45deg);
    }
}

.box{    
    animation: move 2.5s infinite;
}

此为代码样例，动画视频暂时还展示不出来我再学学~

4、同时应用多个动画的问题？


swpeiii_
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端css学习入门资源
02-24
在前端开发领域，CSS（Cascading Style ...通过这些资源，学习者可以系统地学习并实践CSS，为成为合格的前端开发者打下坚实基础。在学习过程中，理论与实践相结合，多做实验，不断尝试，将能更快地掌握这门语言的精髓。
前端-CSS入门.pdf
08-21
前端-CSS入门.pdf
CSS 版心和布局流程
快乐de馒头
01-19 1251
版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程...
关于CSS中的E.class选择器的特殊用法【经常遇到.a.b.c的用法,务必区分...】
weixin_43343144的博客
05-02 495
务必区分三种类选择器 <!DOCTYPE html> <html bgi-auth="" class="theme-light" vw="683" mounted="" view="account" loaded=""> <head> <style> /**多类选择符使用方法【div && .a &amp...
CSS选择器优先级
小狼驿站
06-25 564
CSS样式选择器分为4个等级，a、b、c、d，可以根据这四种等级为依据确定CSS选择器的优先级。 1、如果样式是行内样式，那么a=1； 2、b为ID选择器的总数； 3、c为Class类选择器的总数； 4、d为标签选择器的数量； 5、属性选择器、伪类选择器和Class类选择器的优先级一样 6、！important权重最高，比inline style的还要高 举例：
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
【前端学习】CSS入门
woodwhale的博客
04-08 3999
前端学习：CSS入门 前言 在学习过HTML后，我们就可以开始前端学习的更进一步了——CSS。那么什么是CSS呢。我们可以参考一下百度百科对CSS的解释，如下图所示： 在了解了CSS的内涵之后，我们开始对它的学习！ 注意，这篇文章不含任何框架的知识，仅仅是对原生css进行学习！ 1、class01 1.我的第一个CSS 我们如何写css代码呢？有两种方式： 1、直接在html的<head>标签中写<style>标签,其中就是css代码 2、在html的<head>标签中
前端学习之CSS
weixin_44362089的博客
10-20 2731
前段端学习之CSS,层叠样式表，HTML，三种方式
前端学习路线（简洁清晰，直击学习途径）
m0_67911008的博客
03-30 6万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
前端基础入门之css less
LoveSummer
06-20 7938
是一门的预处理语言在中搜索，点击html 代码使用快捷方式创建代码生成代码 less 代码创建文件，编写代码 插件会帮助我们在所在目录下面生成一个相同名称的文件查看生成的代码 我们直接在 HTML 中引入生成的 运行代码，查看效果中的单行注释，注释中的内容不会被解析到中中的注释，内容会被解析到文件中 父子关系嵌套 在中，父子关系可以直接嵌套 对应的 变量 变量，在变量中可以存储一个任意的值并且我们可以在需要时，任意的修改变量中的值变量的语法： 生成的代码 注意：在中使用语法需要用引号包裹 生成的代码 拼
css入门学习
山有木兮
06-25 3669
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
前端基础入门之css定位 position
LoveSummer
06-21 1万+
需求分析按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现 我们分别给 box2 和 box3 添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位呸！不是！糟老头子定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用属
web前端基础——CSS入门
01-20
本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性以及标签显示模式。 1. CSS的引入方式： - 内部样式：直接在HTML的`<head>`标签内的`<style>`标签中编写CSS代码，这样样式只应用...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端CSS基础入门一个介绍
11-15
在前端开发中，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。本篇将带你深入理解CSS的基础知识，包括选择器、声明、导入方式以及页面布局和美化技巧...
html5路由如何在nginx上部署（vite+vue3）
m0_58002043的博客
07-09 659
我们知道前端常用的有Hash 模式和html5模式的路由，hash模式在nginx上部署不需要额外的操作，而html5模式则需要额外设置，这里介绍下如何在nginx根地址（location / {}）下部署和在非根地址上（location /admin{}）部署。
html5——列表、表格
jiuyuexixi的博客
07-10 713
html5——列表、表格
html5——表单
jiuyuexixi的博客
07-10 1058
html5——表单
WEB前端03-CSS3基础
最新发布
XYX_888的博客
07-13 969
CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。伪类是可以向某些选择器添加特殊效果的、一组CSS预定 义好的类，不需要进行id和class属性的声明，就能自动 地被支持CSS的浏览器所识别。盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。的网页元素定义显示样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值