用一个CSS属性创建一个响应式网站，让我们来看看它是如何做到的。🤔 以这个模板为例，没有应用css属性。🖥 使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。 clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间。 在此…

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。 <details>标签向用户提供按需查看详细信息的效果。 如果需要按需向用户显示内容，简单的做法就是使用此<details>标签。 默认情况下，它是收起来的…

一、展示二、构思基本元素input单选框+伪类空星+选中后的星—>iconfont实现效果鼠标悬停效果点击效果以上两个效果发生时联动其前面的星星发生相同的效果三、实现html部分双层结构（rate-c

一般切完图后我会把图片压缩一次，这样可以减小图片的体积，压缩工具我用得是这个 https://tinypng.com/，免费的，而且压缩完分辨率也跟原来差不多，视觉上不会有太大的影响。 一些小图标，做成雪碧图能减少图片请求数据，建议只把那些固定的，后期不会修改的图标做成雪碧图，…

1. 初识 flex flex 是 flexible 的缩写，意思为弹性布局，用来为盒模型提供最大的灵活性。 2. flex 布局和正常布局比较 3. flex 属性 flex-direction 改变主轴的方向，默认为 row 横向排列。属性包含 row | row-reve…

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 当然，这种方法简单但是可能缺乏点用户体验。 我们先假设一下，我们的容器的宽度如果是固定的，但是不确定…

请相信生命的韧性是惊人的，跟自己向上的心去合作，不要放弃对自己的爱护。 平时我们最直接的写法是 ：outline: none，取消轮廓线。 特别是行内块元素， 通常用来控制图片/表单与文字的对齐。 white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内…

瀑布流布局是前端领域中一个很常见的需求，由于图片的高度是不一致的，所以在多列布局中默认布局下很难获得满意的排列。 我们的需求是，图片高度不规律的情况下，在两列布局中，让左右两侧的图片总高度尽可能的接近，这样的布局会非常的美观。 注意，本文的目的仅仅是讨论算法在前端中能如何运用，…