![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 79
Neil-
吾日三省吾身~
展开
-
issues: 父级元素包含transform导致fixed定位失效
fixed定位失效, transform影响fixed定位, 包含块原创 2021-12-11 07:37:09 · 1654 阅读 · 0 评论 -
background-clip与box-shadow
background-clip背景裁剪,默认属性值为border-box,常用属性值包括border-box、content-box、padding-box、text等;background-clip:text用于进行包含文字的背景裁剪;要实现下图中外边框和内容间的透明效果,可以通过设置以下代码实现:.box { border: 5px solid lightblue; backgroun...原创 2020-10-03 14:37:14 · 287 阅读 · 0 评论 -
CSS3 animation steps
背景css3引入了transition和animation属性为我们提供了强大的动画效果,也为前端设计和实现提供更多的可能性;需求:利用给定的一组图片,实现动画效果;优势:纯CSS实现,不需要借助gif;更好的性能表现Action:借助animation steps实现;属性介绍用法:steps(n, <jumpterm>)steps其实是一个分段的阶跃函数,n相当于单...原创 2019-12-02 16:37:18 · 418 阅读 · 0 评论 -
CSS图形绘制
圆使用border-radius特性;代码实现,具体可见jsfiddle.net <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS图形绘制</title></head><body> &...原创 2019-10-25 19:47:57 · 320 阅读 · 1 评论 -
再谈水平垂直居中
DOM结构 <div class="wrapper"> <div class="box-1"></div> </div>容器内只有一个子元素:使用display: flex加margin: auto,父元素使用flex布局,子元素使用margin: auto属性;具体可以参考中国第五届CSS大会视频;如果子元素设置margin-top...原创 2019-06-14 18:24:38 · 133 阅读 · 0 评论 -
BFC:块级格式化上下文
BFC含义: BFC(Block Formatting Context),即块级格式化上下文,是css视觉渲染的一部分;通常出现在一个块级元素中的浮动元素与其他元素的相互作用中,故对元素定位和清除浮动有重要意义;块级格式化上下文触发条件:文档根元素(<html>)值不为none的float属性;值为absolute及fixed的position属性;值不为visible...原创 2019-06-06 23:04:17 · 254 阅读 · 0 评论 -
Grid网格布局入门
简介grid布局和Flex布局有一些相似,其中的一些概念也是相通的;比如容器与项目的概念;容器指的是整个grid布局块的包裹元素,在容器层设置display:grid或者display: inline-grid;项目则是指容器内的最顶层元素;当然,除了flex的容器和项目的概念,grid还引入了网格线和单元格的概念,不管水平方向,网格线总比单元格数多1,并且可以指定每条网格线的名称;容器属性...原创 2019-05-22 21:04:40 · 309 阅读 · 0 评论 -
图片宽度自适应
1、使用paddingpadding和margin一般是相对于其包裹元素的宽度定义的,可以使用包裹元素的padding属性占据一部分位置,然后让图片相对于包裹元素绝对定位并填充这些位置。这样也同时避免了图片加载过程中图片从无到有时页面的闪烁;下例实现了宽高自适应<div class="wrapper"> <img src="1.jpg" alt="pic"></div>.wrapper {原创 2017-09-03 01:27:23 · 1787 阅读 · 0 评论 -
cssText
浏览器的重排(reflow)和重绘(repaint)均是开销昂贵的操作,会导致用户UI暂时阻塞或卡顿。因此,为了提高性能,需要减少这样的操作,或者将多次操作合并。首先,介绍一些相关的基本知识。浏览器在加载完HTML标记、JS脚本、CSS、图片等之后会生成两个我们经常听到的内部数据结构——DOM树和渲染树;DOM树用来表示页面结构,而渲染树则定义了可见的DOM节点的显示和布局规则。当两者均构建完原创 2017-06-15 18:17:11 · 297 阅读 · 0 评论 -
CSS3 transform
CSS3的transform属性引入了许多方法用于元素位置形状等进行变换,每个方法列在下边(省略prefix)transform: translate(dx, dy) /* 表示元素平面内平移的距离分别为dx,dy;对应有translateX()和translateY() */transform: rotate(deg) /* 正值表示顺时针旋转,单位为角度 */transform: sca原创 2017-07-22 18:14:17 · 257 阅读 · 0 评论 -
CSS响应式布局
响应式网页仅使用HTML+CSS进行设计,其内容会随着设备尺寸自动的resize以适应设备显示能力。通常它能够在各种类型的媒介上均呈现出很好的布局效果,可以为绝大多数或所有的用户带来最好的用户体验。viewport是指用户对网页的可视区域。HTML5引入的新方法控制viewport。即在head中引入以下标签:<meta name="viewport" content="width=device-翻译 2017-04-23 17:24:47 · 1175 阅读 · 0 评论 -
CSS 计数器
原文地址点此查看CSS Counter是CSS原生的计数器,可以进行自动计数。使用它有利于文档内容的排版,使文档有序化。counter的使用中需要用到的参数有:counter-reset:创建或者重置一个计数器;counter-increment:增加技术值;content:插入生成内容;counter()或counters():增加一个元素计数器的值;<!DOCTYPE html><h翻译 2017-04-23 15:57:11 · 882 阅读 · 0 评论 -
CSS属性选择器
本文讲述的为CSS原生的选择器: 1. element[attribute]: 选择具有所有特定attribute属性的HTML元素,不论其属性值是什么; 2. element[attribue=”value”]: 3. element[attribue~=”value”]: 选择HTML的element的attribute属性中含有属性值为value的eleme原创 2017-04-23 15:32:42 · 737 阅读 · 0 评论