CSS
也无风雨丶
这个作者很懒,什么都没留下…
展开
-
css 特殊属性用法
1. vertical-align只能应用于内联元素和display为table-cell的元素。inline-block 元素没有包含内联元素或者overflow不是visible时,baseline位置就是底部margin位置,否则就是内容baseline位置。2. borderborder设置为transparent 可以用于增加button点击范围。3. inline-......原创 2020-11-15 11:33:54 · 166 阅读 · 0 评论 -
CSS网页变灰
IE7, 8, 9body { 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 · 315 阅读 · 0 评论 -
css控制文字溢出...
利用overflow实现单行文字溢出点点点效果:text-overflow:clip|ellipsis|string; white-space:nowrap;overflow:hidden;clip: 直接修剪文本,文本末端可能会出现字符显示不全的现象。ellipsis:用省略号来代替修剪的文本。string: 用给定的字符串来代替修剪的文本(只在火狐浏览器有效)。...原创 2018-10-30 22:29:44 · 246 阅读 · 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 · 302 阅读 · 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 · 235 阅读 · 0 评论 -
BFC 自适应布局
BFC全称为block formatting context,块级上下文结构,具有BFC结构的元素的内部元素不会影响外部元素的布局和结构。BFC可以由以下几种方式触发:<html>根元素 float不为none overflow不为visible position除relative和static display的值为inline-block或table-cellBFC...转载 2019-02-10 14:39:54 · 353 阅读 · 0 评论 -
overflow: hidden;实现选项卡切换
锚点定位触发条件:1.URL 地址中的锚链与锚点元素对应并有交互行为;2.可 focus 的锚点元素处于 focus 状态。通过overflow: hidden;将其他选项卡隐藏,利用label和input的对应关系,使得点击label时input元素获得焦点。同时设为overflow: hidden;的元素依旧可以滚动,因此可以实现选项卡切换功能而不需要使用JavaScript。&l...转载 2019-02-16 18:09:29 · 298 阅读 · 0 评论 -
触发层叠上下文的CSS属性
层叠上下文,又称stacking context,是指元素在垂直于屏幕的z轴上的排列布局。其中影响层叠上下文的属性包括以下几种:1. flex元素的子元素,同时z-index不是auto2. opacity值不为1的元素3. transform值不为none的元素4. position值为relative/absolute/fixed的元素当元素发生层叠时,当具有明显的层叠...原创 2019-02-18 21:46:22 · 567 阅读 · 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 · 660 阅读 · 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 · 459 阅读 · 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 · 206 阅读 · 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 · 621 阅读 · 0 评论