CSS
关注
分享
扫一扫
也无风雨丶
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css 特殊属性用法
1. vertical-align 只能应用于内联元素和display为table-cell的元素。 inline-block 元素没有包含内联元素或者overflow不是visible时，baseline位置就是底部margin位置，否则就是内容baseline位置。 2. border border设置为transparent 可以用于增加button点击范围。 3. inline-......原创 2020-11-15 11:33:54 · 194 阅读 · 0 评论 -
CSS网页变灰
IE7, 8, 9 body { filter: gray; } IE10, 11 由于grayscale.js会使页面渲染速度变慢，而且会在IE低版本下无效，所以要判断浏览器版本，给IE10, 11单独使用。 <script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/j...原创 2020-04-06 11:21:48 · 351 阅读 · 0 评论 -
css控制文字溢出...
利用overflow实现单行文字溢出点点点效果： text-overflow：clip|ellipsis|string; white-space:nowrap; overflow:hidden; clip: 直接修剪文本，文本末端可能会出现字符显示不全的现象。 ellipsis：用省略号来代替修剪的文本。 string: 用给定的字符串来代替修剪的文本（只在火狐浏览器有效）。 ...原创 2018-10-30 22:29:44 · 300 阅读 · 0 评论 -
padding属性有趣的用法
1. 用padding实现三条杠菜单按钮 .menu { width: 18px; height: 2px; padding-top: 4px; padding-bottom: 4px; border-top: 2px solid #f40; border-bottom: 2px solid #f40; background-clip: content-box; ...转载 2019-01-27 11:10:40 · 334 阅读 · 0 评论 -
marin实现的有趣效果
1. 等高布局 // margin和padding高度抵消，但多了9999px可用高度，overflow使得视觉上等高。 .container { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; } // table-cell...转载 2019-02-08 10:19:07 · 268 阅读 · 0 评论 -
BFC 自适应布局
BFC全称为block formatting context，块级上下文结构，具有BFC结构的元素的内部元素不会影响外部元素的布局和结构。 BFC可以由以下几种方式触发： <html>根元素 float不为none overflow不为visible position除relative和static display的值为inline-block或table-cell BFC...转载 2019-02-10 14:39:54 · 374 阅读 · 0 评论 -
overflow: hidden;实现选项卡切换
锚点定位触发条件： 1.URL 地址中的锚链与锚点元素对应并有交互行为； 2.可 focus 的锚点元素处于 focus 状态。 通过overflow: hidden;将其他选项卡隐藏，利用label和input的对应关系，使得点击label时input元素获得焦点。 同时设为overflow: hidden;的元素依旧可以滚动，因此可以实现选项卡切换功能而不需要使用JavaScript。 &l...转载 2019-02-16 18:09:29 · 322 阅读 · 0 评论 -
触发层叠上下文的CSS属性
层叠上下文，又称stacking context，是指元素在垂直于屏幕的z轴上的排列布局。 其中影响层叠上下文的属性包括以下几种： 1. flex元素的子元素，同时z-index不是auto 2. opacity值不为1的元素 3. transform值不为none的元素 4. position值为relative/absolute/fixed的元素 当元素发生层叠时，当具有明显的层叠...原创 2019-02-18 21:46:22 · 597 阅读 · 0 评论 -
隐藏logo对应元素内的文字
1. display/visibility直接隐藏文字, 但屏幕阅读设备会忽略。 display: none; visibility: hidden; 2. font-size设置为零，文字会直接被隐藏掉。 font-size: 0; 3. text-index元素设置一个较大的文字缩进，会使得文字移出屏幕，屏幕阅读设备无法读取文字。 text-indent: -9999px; ...原创 2019-02-18 21:58:55 · 685 阅读 · 0 评论 -
text-align: justify列表的两端对齐布局
通过设置inline-block与justify实现列表的两端对齐布局，但是处于列表最后一行的元素却无法对齐，我们通过在最后一行放置一个高度为0，宽度100%的inline-block不可见元素来充当最后一行，可以使得所有的可见元素实现两端对齐的布局。 ul { text-align: justify; } ul > li { display: inline-block; } span...原创 2019-02-19 22:09:05 · 484 阅读 · 0 评论 -
设置元素垂直水平居中
// 垂直居中的几种方式 // 1.元素的宽高已知，可以用绝对定位，top/left设为（50%-高/宽的一半）实现 .main { position： absolute; top: calc(50% - 3em); left: calc(50% - 9em); width: 18em; height: 6em; } // 2.宽高未知，利用绝对定位以及t...原创 2019-02-25 21:40:45 · 226 阅读 · 0 评论 -
图标与内容文字垂直对齐
1.如果图标较小，可以使其高度为1ex(即字母x的高度)，由于字母x是一个标准居中的字母，所以图标与文字天然居中对齐。 .icon { display: inline-block; width: 20px; height: 1ex; background: url(arrow.png) no-repeat center; } 2.如果图标较大，推荐使用ver...原创 2019-02-25 22:02:11 · 647 阅读 · 0 评论