Wind_waving的博客

可访问性隐藏：在页面上看不到，但是可以被其他辅助设备捕捉，如无障碍识别或者SEO等。众所周知的隐藏方式有设置display、visibility为不可见，但是设置不可见同样会导致屏幕阅读器不可捕捉。因此这种方法并不推荐，以下为几种较好的方式：一、利用clip+absolute（普遍适用）clip属性生效的前提是position为absolute/fixed实现方式： <div style="width: 100px;height: 60px;"> <span

触发BFC的方式html根元素；float的值不为none；overflow的值为auto、scroll或hidden；display的值为table-cell、table-caption和inline-block中的任何一个；position的值不为relative和static。BFC的特性之一是BFC内部的元素不受外界影响也不影响外界，基于BFC特性 可以实现多栏自适应布局，但是触发BFC的属性自身也有一些奇怪的特性，因此并不是所有的方式都适合自适应布局，以下针对overflow和.

参考张鑫旭——《CSS世界》margin不具有兼容性问题，也就是在各个浏览器下表现一致有滚动条的容器最好使用子元素的margin-bottom取代padding添加底部留白，因为IE和旧版Firefox浏览器是超过padding box触发滚动条，因此其padding-bottom值会在滚动的情况下被忽略。margin实现等高布局（margin负值应用）满足的场景：auto高度的容器内部具有多个水平排列的分栏，且各个分栏的高度始终和容器一致先看效果：代码：//html <di

参考《CSS世界》——张鑫旭background-clip属性用于描述背景绘制的区域，默认为border-box，还可以取值content-box，padding-box效果一：移动端经常使用的折叠菜单图标分析：上下两条使用border-top/bottom实现，中间条利用黑色绘制背景部分。想要背景和border中间有间隙，设置上下padding。默认背景绘制包含padding和border，使用background-clip属性修改背景绘制区域代码：.menu{ w

根据是否可以通过修改某个属性值更改元素呈现的内容，可以分为替换元素和非替换元素替换元素以下元素都是可替换元素，以及在各种浏览器下的默认display值（图片来源《CSS世界》——张鑫旭）针对 <input type="button" value="按钮">和<button type="button">按钮</button>，区别在于如果出现很长的文字，前者会直接裁剪溢出文字，而后者会自动换行，如下图所示：设置样式为input[type='button'],b

前提熟知的图片懒加载的方式是使用getBoundingClientRect函数判断是否在可视区域内，但是调用这个函数会引起回流，影响浏览器性能。可替代的方式是使用IntersectionObserver对象，使用方式参考IntersectionObserver API 使用教程——阮一峰关于回流，参考前端优化总结正题先看效果：模拟图片加载堵塞的情况，图片到达可视区域2s后才加载出图片，在图片加载出来之前鼠标移动到图片上时可显示图片描述文字上代码：//html: <!-- 模

效果：//html部分：<span class="loading">正在加载中<dot>...</dot> </span>//css： .loading{ display: flex;/*让dot和文字在同一行*/ } dot{ /*让点垂直居中*/ height: 1em; line-height: 1;

由于版权问题，博客地址为flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？

1. 问题重现：简易版复现这个问题的代码如下：<div id='wrapper' style="height: 80px;background-color: bisque;width: 400px;overflow-x: auto;display: flex;flex-wrap: nowrap;"> <div class="menu">111 <div style="width: 100%;position: absolute;bot

1. 视图封装模式有哪几种借用angular对三种视图模式的解释：ShadowDom 模式使用浏览器原生的 Shadow DOM 实现（参阅 MDN）来为组件的宿主元素附- 加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)Emulated 模式通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。(

使几个块级元素（如display设置为block）在同一行显示，设置块级元素float为left属性，同时设置元素的宽度以调整同一行可以显示的元素个数。通过改变margin和height，line-height调整元素的对齐方式。...

转载自https://blog.youkuaiyun.com/comeonJ/article/details/17284455

在使用HTML5+CSS做一套前端的过程中的笔录：使用flex布局，配合justify-content和align-items实现居中效果 div下的img默认不会充满div，在底部留有一些空白，解决办法：将img的display设置为block。参考：https://cloud.tencent.com/developer/ask/25502 li设置float属性之后，脱离正常文档流，所...

text-shadow 属性：把四个方向都设置同样的偏移距离，模糊度为0，则为描边效果。把偏移距离设置为0，增加模糊度，则为发光效果。把左上方设置为文字颜色，右下方为阴影颜色，模糊度为0，则为凸出效果，相反方向则是凹进效果。 text-overflow属性：先设置white-space属性：no-wrap，或者text-wrap：none单行显示；再设置overflow属性：hidden、aut...

background-origin和background-clip： 都指定背景的显示区域。背景是图片时调整background-origin，背景是颜色时，调整background-clip。在属性为border-box时，如果为实线边框，边框将覆盖住背景的图片或者颜色，和padding-box的效果一样。 background-size：如果为cover，则图片按比例缩放直到覆盖要求的区域（...

使用box布局时加上前缀-webkit-box、-moz-box。（我的测试是加上才有效果） box-orient：horizontal、vertical，默认为前者，此时使用box-pack表示水平对齐方式，box-align表示垂直对齐方式，后者则相反。还受到box-direction影响。 box-direction：normal、reverse。 box-ordinal-group：...

columns：所设置的列宽和列数的乘积至少要等于区域宽度。如果乘积比区域宽度小，按照列数调整宽度，如果比之大，按照宽度调整列数同时调整列数。 column-rule：列间分割线。同于border用法。 column-span：横跨列。属性为all时横跨所有列，通常用于标题。 column-gap：列间距。...