css
文章平均质量分 72
小航哥sir
前端初级开发攻城狮,某中厂前端
展开
-
CSS之filter属性和calc函数
1. 有哪些属性值 和 作用属性值:blur作用:实现透明度,和opacity类似2. calc函数轻松实现 几个盒子的宽度根据父级自适应原创 2022-01-15 22:04:24 · 332 阅读 · 0 评论 -
什么是BFC
1. BFC概念BFC是什么块级格式化上下文。是一个独立的运行环境,其中的元素是不受上下文的布局的影响。2. BFC的布局规则:内部的盒子会垂直,一个一个摆放margin决定内部的盒子的垂直距离,如果是同一个BFC盒子,内margin会重叠BFC区域不会与浮动的盒子的重叠3. BFC对于我们布局有什么启发?...原创 2021-11-23 22:30:15 · 272 阅读 · 0 评论 -
CSS进阶 如何实现圆形&半圆
1. CSS实现半圆 div { width: 50px; height: 100px; border: 1px solid #000; background-color: pink; /* 顺序是 左上 右上 右下 左下 */ /* 半圆,右边上下角是圆的,左边上下角的宽度设置为0 */ /* div盒子高度为宽度的一半 */原创 2021-11-22 22:42:17 · 3082 阅读 · 0 评论 -
CSS进阶 光标类型&设置遮罩
1. 光标设置鼠标移动到元素上面,鼠标呈现的效果。2. 有哪些光标光标 效果 default 默认 pointer 小手-点击 text 工字形-文本 move 十字-移动 3. 应用cursor: pointer;常常用于a标签、logo,和点击功能结合cursor: move;鼠标经过,光标变成十字型,和移动功能结合cursor: text;鼠标经过,光标变成工字型,表示文本可以移动。切记原创 2021-11-21 16:32:51 · 380 阅读 · 0 评论 -
CSS 精灵图的使用;精灵图不见了;如果一次性设置多个精灵图
1. 精灵图是什么2. 为什么要使用精灵图3. 精灵图的使用步骤4. 精灵图的高效率小技巧15. 精灵图小技巧26. 精灵图出错点汇总原创 2021-11-20 16:27:12 · 1531 阅读 · 0 评论 -
字体图标的使用
阿里矢量图网站:iconfont-阿里巴巴矢量图标库目录第一步,登录网站,页面如下;注册账号第二步,直接搜索图标第三步,点击购物车第四步,link引入文件第五步,解压后放在你需要的根目录第一步,登录网站,页面如下;注册账号第二步,直接搜索图标并加入购物车鼠标经过图标会有购物车出现,点击第三步,点击购物车并点击添加至项目创建一个项目,或者选择一个已有的项目【一般新增图标的时候使用】。再点击下载至本地 第四步,li...原创 2021-11-14 22:38:12 · 293 阅读 · 0 评论 -
CSS三角 border: 20px solid #fff; width:0;height:0;
1.等腰三角形尖角朝右边的三角形 div { width: 0; height: 0; border: 20px solid transparent; border-left-color: red; }核心步骤:1. 宽度和高度都设置为02. 四条边的边框设置大小,颜色,和样式3. 其中一条边设置颜色为【transparent】4. 设置left值,三.原创 2021-11-13 22:47:12 · 600 阅读 · 0 评论 -
CSS【进阶】线性&径向渐变background-image:linear-gradient();background-image:radial-gradient();
1. 线性渐变: <div>123</div>1.1 从左到右渐变div { width: 200px; height: 200px; background-image: linear-gradient(to right, pink, yellow);}1.2 从下到上渐变background-image: linear-gradient(to top, pink, yellow);1.3 从左下角到右上角渐变原创 2021-11-12 20:35:25 · 3710 阅读 · 0 评论 -
vertical-align:middle/top/bottom/baseline,文本框无法贴顶,表单和按钮对齐,表单和图片对齐
1. 有哪些参数topmiddlebaselinebottom2. 作用能够实现表单和表单的对齐 #text { height: 30px; vertical-align: bottom; } #pwd { height: 40px; }原创 2021-11-11 09:30:44 · 482 阅读 · 0 评论 -
CSS background-color、background-image、background-repeat、background-position、backgroundsize……
以下代码均基于一个div盒子作介绍1. background-color作用:设置背景颜色 div { width: 200px; height: 200px; /* 1. 直接设置英文 */ /* background-color: pink; */ /* 2. 设置十六进制 */ /* background-color: #fff;原创 2021-11-10 10:40:02 · 3549 阅读 · 1 评论 -
【font-size】【font-weight】【font-weight】【text-align】【overflow:hidden】CSS文字属性 文字样式 字体样式 常用&不常用集合
1. 常用属性属性 作用 属性值 font-faimily 字体 ·一般先写英文,再写中文 font-size 文字大小 ·16px ·1.25em,表示1.25*父元素字体大小(很少用) font-weight 文字粗细 ·700,400 ·bold,normal, color 文字颜色 ·white;英文 ·#000;十六进制 ·rgb(255,2...原创 2021-10-31 10:22:59 · 344 阅读 · 0 评论