- 博客(10)
- 收藏
- 关注
RSS订阅原创 弹性盒子（css）
弹性盒子弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。优势：1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题
2020-11-23 20:38:42
535
原创 动画使用及基础
动画（animation）：将静态的页面变得动起来，并且不同于过渡，可以不需要触发，仅设置时间就可以实现。也可以无限重复等。使用步骤：通过设置@keyframs关键帧 定义动画 并命名通过animation来调用动画定义动画：@keyframs +动画名（尽量不要使用关键代码，可能会引起冲突）{ from{ 初始帧 } to{ 结束帧 } }调用动画：animation:动画名（-name） 动画完成时间（-duration） 执行次数
2020-11-19 19:31:39
623
原创 css中对背景图片（background-image）进行编辑
精灵图片：什么是精灵图片呢：将网页中需要的零星的小图片集成到一个大的图片中，网页加载大图片速度就会相对较快。比如一些网页中的logo。通过background-position来改变背景图片的位置，从而显示出我们想要显示出来的部分。过渡：2D转换缩放：2D位移：绝对定位居中：不用margin来进行居中，通过固定定位将上下左右位置都设置为50%就可实现倾斜：（不经常使用）transform：skew来设置旋转：3D旋转：只是视觉上的呈现不是真正的3D。...
2020-11-17 20:36:54
403
原创 css学习 行内块与浮动的区别 伪类元素
行内块与浮动的区别 /* 浮动后每个块之间没有间隙，但当把他们转变为行内块是有间隙，且当行内块中有内容是会以内容的基线对其，使其似被挤了下去；而浮动不会出现此情况。 */ /* 清除行内块对齐方式 1.设置vertical-align 2.是块内都有内容或者都没有内容 */浮动： 行内块元素：伪元素：::before ::after<!DOCTYPE html><html lang="en"><head> &
2020-11-12 20:51:49
820
原创 css学习第五天 定位
****## css定位**1. z-index 属性：定位元素专用的。 属性值是数字，数值大的会压盖住数值小的1. z-index都没有值或值相同的时候，写在后面的盒子会盖住前面的盒子。2.数值大的会盖住数值小的，z-index是一个自然数，默认为0.3.从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。css定位属性共有三种：相对定位 relative绝对定位 absolute固定定位 fixe
2020-11-11 20:40:29
81
原创 h5学习（css第四天）：浮动
今日所学：标准文档流+浮动。定义：内容从左到右，从上到下书写的。前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。web页面，就是一个标准的文档流。内容跟咱们的书写顺序有关。标准文档流的特性（1）空白折叠现象无论多少个空格，tab，换行都会折叠为一个空格。<div>张老师 真帅</div>(2)高矮不同，底部对齐妖怪我要你助我修行<img src="img/zhaoshifu.jpg" alt="">
2020-11-10 20:39:05
329
原创 h5学习（css第三天）
今日所学：盒模型最终结果可以做到<!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>
2020-11-09 20:51:19
657
原创 学css的第二天
注意兼容性问题强调必须是父子关系可以是父子，也可以是爷孙甚至更大注意顺序不可乱，遵循link visited hover active 顺序一定是紧挨的哪一个关于这些选择器的还有很多，可以去https://flukeout.github.io/这个网站中练习...
2020-11-09 20:18:07
104
原创 h5学习，第一天（css）
@@第一天<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鹧鸪天</title> <style> body {
2020-11-05 20:03:28
188
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人