女王控的博客

CSS

25 篇文章

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

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

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… »

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%