![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
昵称叫铃风的小前端
这个作者很懒,什么都没留下…
展开
-
css画任意角度饼图
<div class="shanxing shanxing1"> <div class="sx1"></div> <div class="sx2"></div></div>.shanxing{ position: relative; width: 200px; height: 200px; bor...原创 2020-05-07 15:15:57 · 253 阅读 · 0 评论 -
ie11——css兼容问题
1.flex的align-items: center无效// 父元素(即设置display: flex的元素)添加伪元素&:after{ content:''; min-height:inherit; font-size:0;}2.unset无效// 用none代替,如background:unset,谷歌都支持3.hack// * 或 # ,IE7、IE11...原创 2019-10-29 11:06:27 · 1224 阅读 · 0 评论 -
css可继承的属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-r...原创 2019-04-25 16:49:25 · 70 阅读 · 0 评论 -
css动画效果:transition和animate
transition和animate都可以实现一些动画效果,不同点是transition需要借助交互,动画完成后依原动画效果复原;animation可以自定义关键帧中间状态、控制暂停和播放,结束后默认瞬间复原一.transform(必须由交互来触发)::移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等效果使用:transform属性用于元素自身,tran...原创 2019-06-10 11:56:47 · 971 阅读 · 0 评论 -
文本两端对齐:text-align: justify,当只有一行时不起作用的解决方法
问题:text-align:justify 不处理块内的最后一行文本,当仅有一行文本,也不起效果解决方法:1.text-align-last:justify (注意浏览器兼容性)2.使用空标签,width100%占位最后一行,可能会有空白样式问题...原创 2019-07-09 18:24:21 · 2263 阅读 · 0 评论 -
两个非块级元素的间隙问题
问题描述:两个非块级元素,代码中换行书写,页面渲染两个元素之间会有空隙,如下图解决方案:1)不换行书写:不推荐,不易阅读,可能被其他人代码格式化掉2)标签之间用注释填充:不推荐,理由同上3)float:span设置浮动4)父元素设置font-size为0,再给子元素添加font-size...原创 2019-09-29 10:02:42 · 100 阅读 · 0 评论 -
子元素在父元素居中
1.不需要知道父元素和子元素的宽高// 子元素top: 50%;right: 50%;transform: translate(-50%,-50%);原创 2019-10-11 15:09:26 · 79 阅读 · 0 评论