知行合一，跬步致远

<!-- div class="asset-body" --> <h2>一、概述</h2>网格布局（Grid）是最强大的 CSS 布局方案。 <!-- /div --> <!-- di...

概括通过js创建一个内嵌样式表，并添加需要修改的伪类样式，覆盖原始的伪类样式。介绍html代码<ul>　　<li>apple</li>　　<li>banana</li>　　<li>pear</li></ul>css代码ul li{ list-style: no...

一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。&amp;amp;amp;lt;div class=&amp;amp;quot;box&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;span class=&amp;amp;quot;item&amp;amp;q

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介...

-webkit-line-clamp 结合其他样式属性一起使用，可以实现内容指定行数来显示的效果，不过，它还是一个不规范的属性，没有被列入CSS 规范草案（不影响实现效果）。代码如下：与其他属性配合使用：-webkit-line-clamp:n; //设置行数，n为行数（必选）display: -webkit-box; //盒子模型（必选）-w...

white-space:nowrap;         //强制不换行（中英文都起作用）white-space:pre-wrap;       //只对中文起作用，强制换行word-break:break-all;        // 只对英文起作用，以字母作为依据，强制换行word-break:break-word;    //只对英文起作用，以单词作为依据，强制换行overfl...

通过css实现自动换行：pre{white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; ...

ul是无序列表，所谓的无序列表只要举个例子，大家就会明白了。     ●这是第一个列表     ●这是第二个列表     ●这是第三个列表ol是有序列表，同样举个例子。    1、这是第一个列表    2、这是第二个列表    3、这是第三个列表 这就是ul与ol的区别。ul与ol前的符号是可以修改的。只需要修改它们的type值。ul的type属性有：disc—实心圆(...