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