CSS重点
CSS重点知识复习
二段飞踢
这个作者很懒,什么都没留下…
展开
-
flex布局 知识小笔记
flex布局优点:解决了,垂直居中问题;不受空白节点的影响(共行的问题)不会脱离文档流(方便x,y居中,两端对齐的问题)特性:弹性盒子,只对父子关系有效,后代不会继承display:flex; 块级弹性盒子display:inline-flex; 行内块级弹性盒子相关面试题:弹性盒子如何实现水平居中,垂直居中弹性盒子-弹性计算问题:放大 flew-grow:1/2/3缩...原创 2020-01-30 11:51:22 · 131 阅读 · 0 评论 -
animation 自定义动画
animation 自定义动画animation-name 动画名animation-duration 动画持续时间keyframes 关键帧自定义动画播放次数animation-iteration-count: infinite;自定义播放顺序: 顺时逆时交替播放animation-direction: alternate;自定义播放顺序: 倒序播放播放animation-...原创 2020-01-29 17:42:33 · 251 阅读 · 0 评论 -
常用布局小节
常见的布局问题1.居中 块级元素--定宽居中 div{ width:0px | 0%; margin-left:auto; margin-right:auto; } 行内块元素(文本居中) .baba{ text-align:center; } .son{ display:inline-block; }2.定...原创 2020-01-29 16:59:52 · 131 阅读 · 0 评论 -
选择符/器 小笔记
选择符知识总结1.通配选择符 *代表所有的元素*{ } 生成环境,有一份单独的reset.css来去除浏览器的默认样式2.元素选择符指代,具体的html标签div{}3.群组选择器指代,多个html标签div,p{}4.类选择器使用类名,进行元素的标识.class{}5.伪类选择器 ele:hover{}6.关系选择器(a,b)关系–由上往下–描述...原创 2020-01-29 16:23:22 · 109 阅读 · 0 评论 -
关于 伪类选择器 小笔记
伪类选择器语法:ele(元素):hover(状态){}常见状态a hover active link visited参数:1.表示—状态 hover 表示鼠标悬停状态 link 表示该连接不在历史记录,没有点过 visited 表示链接已被访问 active 鼠标按住2.表示—位置表示位置的伪类选择器关键词first 第一位置last 最后位置nth(x) ...原创 2020-01-29 16:02:53 · 95 阅读 · 0 评论 -
CSS-position 定位知识 小笔记
position 定位默认值 static 静止1.fixed 固定定位 会脱离文档流需要提供一对坐标点----定位至少提供一个坐标left/righttop/bottom参考点:基于 body 进行定位2.relative 相对定位 子绝父相相对于自己定位,没有脱离文档流参考点:自己一般情况下:我们设置相对定位,是不设置坐标点的更常用于,改变“绝对定位”元...原创 2020-01-29 15:43:47 · 117 阅读 · 0 评论 -
关于 background-image 的一些小笔记
background-image 可为元素设置背景图片引用背景图片background-image: url();约束图片尺寸background-size: 50px 50px;cover 保证背景图铺满容器 ;缺点:不保证看见图片全貌contain 保证背景图可以等比例显示;缺点:不保证能铺满背景背景图不重复平铺 默认情况下是重复平铺background-repeat: no-...原创 2020-01-29 15:35:37 · 155 阅读 · 0 评论 -
vertical-align 的使用
vertical-align 使用及注意点vertical-align: 作用设置垂直方向对齐方式一般情况下,搭配 行内块级元素使用常用参数:middle / top / bottom当两个div都设置了行内块元素,其中一个输入文字,会因为字体对齐方式以基线为准,所以会掉下来, 所以需要设置 vertical-align,让他不要以文字基线对齐,以盒子对齐。注意点vertical-a...原创 2020-01-29 15:15:02 · 236 阅读 · 0 评论 -
Scss的相关安装及使用
Scss 的相关安装及使用一、相关介绍1.Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。2.关于 sass 和 scss 区别:scss其实是sass的更新版本而已。3.使用scss的一些优点:(1)使用scss进行编写时,可以使css实现支持变量,函数,模块化的功能,使其加快开发效率,有效...原创 2020-01-04 23:45:27 · 388 阅读 · 0 评论