随笔分类 -  css

摘要:今天晚上面试被问到用canvas实现一个扇形,现在就来总结一下前端实现一个扇形的几种方式 源文件地址:实现一个扇形 代码实现 方法1. border-radius HTML <div class="sector1"></div> CSS width: 50px; height: 50px; bord 阅读全文
posted @ 2020-10-21 22:28 mingL 阅读(775) 评论(0) 推荐(0) 编辑
摘要:最近面试有被问到如何实现一个三角形,借此机会总结一下,将常用的几种方法梳理一遍。 源文件地址:创建一个三角形 绘制三角形的几种方法汇总 方法1. transform rotateZ(45deg) + 父子divoverflow:hidden HTML <div class='triangle1-wr 阅读全文
posted @ 2020-10-08 12:32 mingL 阅读(1207) 评论(0) 推荐(0) 编辑
摘要:什么是BFC(Block formatting context) BFC(块级格式上下文)就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 BFC 就是 ‘块级格式上下文’ 的格式,创建了BFC的元素就是一个独立的盒子,不过只有BLock-level box可以参与创建BFC,它 阅读全文
posted @ 2020-08-09 20:51 mingL 阅读(120) 评论(0) 推荐(0) 编辑
摘要:盒子模型 外边距(margin) 边框(border) 内填充(padding) 内容(content) 盗图一份: 两种盒子模型:计算宽高的方式不一样 W3C盒模型(标准盒模型) :chrome、IE9+、(添加doctype) 实际宽度 = 设置宽度(content值) + border值 + 阅读全文
posted @ 2020-08-09 20:47 mingL 阅读(142) 评论(0) 推荐(0) 编辑
摘要:前言 grid即网格,是在行(横),列(纵)的二维空间中的布局。多行和多列的交叉必然会产生单元格(items),指定的二维空间就是container。 what:grid布局即在二维平面内的多行多列的布局方式 why:应对平面内多行多列的复杂布局 how:display:grid || inline 阅读全文
posted @ 2019-11-20 16:02 mingL 阅读(174) 评论(0) 推荐(0) 编辑
摘要:前言 所谓布局即在指定的范围中(container)对里面的元素(items)进行一个布置。 练习游戏(https://flexboxfroggy.com/) what:flex即弹性盒子 why:在移动端,禁止使用float,适当使用position,一定会使用到flex how:只需在父盒子上加 阅读全文
posted @ 2019-11-15 17:03 mingL 阅读(123) 评论(0) 推荐(0) 编辑
摘要:缺角效果 I have a nice idea 阅读全文
posted @ 2019-03-28 00:04 mingL 阅读(174) 评论(0) 推荐(0) 编辑
摘要:内圆角 I have a nice idea 阅读全文
posted @ 2019-03-27 23:44 mingL 阅读(132) 评论(0) 推荐(0) 编辑
摘要:效果: 代码: 阅读全文
posted @ 2018-09-26 00:09 mingL 阅读(335) 评论(0) 推荐(0) 编辑
摘要:直接上代码,只需切换class就可看效果 运行结果: 相对父组件(div)水平垂直居中 效果如下: 阅读全文
posted @ 2018-04-15 14:53 mingL 阅读(239) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示