女王控的博客

CSS

25 篇文章

复选框单选框与文字对齐问题

产生的条件 对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。(见下图) 但是,对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。(见下图) 这就是本文所要研究与解决的问题,可以肯定的是单复选框与文字默认以 vertical-align:baseline 的方式对齐的。 解决方案 vertical-align: text-bottom css代码如下:vertical-align:text-bottom; margin… »

CSS练手测试

练习地址: 小测答题收集区 CSS测试一 具体实现 overflow: hidden + float(不完美,显示的顺序与实际的 html 顺序不一致) flex + flex:1 table + table-layout: fixed(兼容性较好) 实现要点 大家布局其实这3类:float+overflow,然后是flex布局,很少人使用的table布局。 float布局技巧:float:right+overflow:hidden;text-overflow:ellipsis;white… »

flex深入理解

语法 语法解构 CSS语法中的特殊符号的含义绝大多数就是正则表达式中的含义,例如单管道符|,方括号[],问号?,个数范围花括号{}等。具体说明: 首先是单管道符|。表示或者。也就是这个符号前后的属性值都是支持的。因此,下面这些语法都是支持的: 接下来是 … 这一部分。其中方括号 表示范围。也就是支持的属性值在这个范围内。我们先把方括号 内其他特殊字符去除,可以得到下面的语法: 这就是说,flex属性值支持空格分隔的… »

CSS数据上报和HTML验证

纯CSS实现数据上报 举个例子,要跟踪并统计某个按钮的点击事件: 此时,当我们点击按钮的时候,相关行为数据就会上报给服务器,这种上报,就算把JS禁掉也无法阻止。 点击页面的两个按钮,可以看到发出了如下的请求: 当然,我们可以统计的不仅仅是单击行为,hover行为,focus行为都可以统计,当然,还有很多其他方面的。例如: 不支持CSS3浏览器比例统计 例如,我的Chrome发出的图片请求地址就是: 类似的,我们可以检测支持其他一些CSS… »

如何借助content属性显示CSS var变量值

变量作为字符动态呈现 CSS var变量(CSS自定义属性)很好用,然后,有时候,需要这些变量能够同时作为字符在页面中呈现,我们想到的是使用::before/::after伪元素配合content属性,但是,把CSS变量直接作为content属性值是没有任何效果的。 借助CSS计数器呈现CSS var变量值 也就是虽然content属性本身不支持变量,但是counter-reset… »

0%