江苏龙网

  1. 主页 > 生活百科 > >

css怎么用，divcss布局经典实例( 四 )


值得注意的是，这个属性并不是W3C标准，而是Web孵化器WICG的一个建议 。但是，也许有一天，这个特性会进入W3C工作组，成为W3C标准 。
有关这方面的更多信息，建议阅读以下文章:
滚动的特性 CSS overscroll-behavior Take control of your scroll: customizing pull-to-refresh and overflow effects第十步:收起聊天框
目前聊天框占据了空相当大的空间，如果我们不和它互动，会分散用户的注意力 。幸运的是，我们可以使用CSS的选择器特性来解决这个问题 。这是CSS的又一新特性，再次显示了CSS的魔力 。
首先，调整现有风格 。默认情况下，我们希望聊天框处理折叠状态，因此将max-height值重置为 。消息设置为0，并将填充重置为0 。因为这个值只是折叠聊天框，并不影响其美观 。为了在聊天框折叠和展开时有过渡动画效果，通过CSS的transition 属性实现 。
。消息{
…
max-height:0；
填充:0；
过渡:最大高度500ms
}
看起来不错，如下图:
步骤11:当聊天框获得焦点时，展开聊天框
我们聊天框中的信息列表现在看不见了 。因为我们之前折叠了信息列表 。现在我们要思考如何通过CSS来扩展它 。这将使用CSS的另一个新特性-: focus-within。
它类似于:focus伪类选择器，但是:focus-within与它的不同之处在于如果元素的任何后代元素获得焦点，它将被匹配 。这就是这个属性的特别之处，因为它与CSS通常的工作方式相反 。通常，我们只能根据元素的祖先来选择元素 。
在我们的示例中，当 。聊天区域获得焦点，重置的最大高度和填充值 。消息 。请记住，为了获得焦点，元素必须接受键盘或鼠标事件或其他形式的输入 。比如在我们的例子中，点击输入框就满足了这个要求，可以达到想要的效果 。
。聊天:专注于内部 。消息{
max-height:300 px；
填充:10px；
}
现在你可以试试效果 。点击输入获得焦点，可以看到聊天框可以展开，反之亦然:
第12步:进一步强调:专注的魔力——在之内
如果只是实现了聊天框的折叠展开效果，那么上一步其实已经完成了 。但是对于一个有追求的前端来说，他总是在尝试很多极端 。让我们回到我们的例子 。如果PM向你提出新的要求，当文本输入框获得焦点时，不仅会扩展聊天框，还希望聊天框下的新闻提要变得模糊 。如何达到这样的效果？
要达到这样的效果，其实并不复杂 。如果你做过自定义单选按钮或复选框(当然是纯CSS)，你应该想个解决办法 。我们可以在CSS选择器中使用兄弟合并器~ ，我们可以很容易地做到这一点 。使用~选择器时有一个前提需要注意 。聊天框 。聊天需要在Newsfeed前面( 。容器)(它指的是HTML结构 。其实我们已经这么做了) 。只有这样，新闻订阅源才能以下列方式变得模糊:
。聊天:焦点-内~ 。容器{
滤镜:模糊(5px)
}
当然，这可能不是最好的解决方案，但只有CSS的技术手段才能达到想要的效果，这已经很酷了 。有兴趣可以亲自体验一下:
请注意，Newfeed添加了过滤效果，这将改变元素的层叠顺序，从而在Newfeed下方出现聊天框 。因此，您需要将z-index的值添加到显式 。聊天 。例如，这里设置了z-index: 1001 。具体原因可以参考@张新旭的文章“/s2/]深入理解CSS中的层叠上下文和层叠顺序” 。
浏览:占位符-显示
首先要明确一点:占位符-showed和::占位符是两回事 。神奇的是:plac holder-showed是W3C标准规范的一个属性，但是::placeholder不是 。*占位符-显示仍然影响占位符文本的样式 。
注意::placeholder-显示的是一个伪类选择器(它是一个处于特定状态的元素)；*占位符是伪元素(DOM中不存在的可见元素) 。
另外，:placeholder-showed也是新增的选择器之一(CSS选择器模块Level 4增加了很多伪类选择器)，可以匹配任何显示占位符文本的输入 。在我们的示例中，文本输入框(input)没有任何占位符文本，所以首先，在HTML的input元素中，添加占位符并添加占位符文本 。
type = " text "class= " input " placeholder = "输入您的消息">
然后在输入后添加一个新元素来帮助用户操作:
class="prompt " >按回车键发送
现在给这个帮助消息添加一些样式 。提示，默认折叠 。
。提示{
行高:2em；
max-height:0；
溢出:隐藏；
填充:0 10px；
text-align:right；
过渡:最大高度500ms
}
单从外观上看，似乎文本框里无非就是一个占位符文本:
虽然没有太大的区别，但为后续效果埋下了伏笔 。继续往下看 。


推荐阅读


上一篇：知识付费市场规模，2020知识付费发展前景

下一篇：青年创业基金在哪里申请，创业基金申请条件与流程