江苏龙网

  1. 主页 > 生活百科 > >

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

。送纸李 {
显示:内容；
}
。卡片{
flex:1 0 40%；
}
}
@支持(显示:flex)和(非(显示:内容)){
。送纸李 {
flex:1 0 50%；
}
。饲料李 。嵌套{
弹性基础:100%；
}
。饲料李 。嵌套的ul {
display:flex；
flex-wrap:wrap；
}
}
您甚至可以在@supports中使用CSS的自定义属性，如下所示:
@ supports(–foo:green){
…
}
如果你对@supports或CSS查询功能的相关知识不满意，建议你阅读下面这篇文章，深入学习这些知识:
CSS3条件判断： @supports 说说CSS中的 @supports Conditional CSS 在 CSS 中使用特征查询 Conditional CSS using CSS feature queries Using Feature Queries in CSS How to use CSS Feature Queries Basic grid layout with fallbacks using feature queries Layout Design with CSS Grid & Feature Queries Feature Queries for CSS Grid fallbacks案例:聊天框
现在我们有了一个漂亮的新闻提要，在之前的新闻提要上添加一个小的聊天框，它固定在屏幕的右下角 。
第七步:添加一个聊天框
我们需要一个消息列表和一个文本字段，以方便用户输入消息 。然后在标签后面添加该聊天框所需的HTML标签:
class="chat " >

消息1
消息2
消息3
消息4
消息5
消息6
消息7
消息8
消息9
消息10

class="input " >
在没有给聊天添加任何风格的情况下，我们看到的效果是:
步骤08:给聊天框添加样式
首先给聊天框添加一些基本样式，让它看起来有点像聊天框:
。聊天{
背景:# fff；
border:10px solid # 000；
bottom:0；
font-size:10px；
位置:固定；
right:0；
宽度:300 px；
}
。消息{
border-bottom:5px solid # 000；
溢出:自动；
填充:10px；
max-height:300 px；
}
。消息{
背景:# 000；
border-radius:5px；
color:# fff；
margin:0 20% 10px 0；
填充:10px；
}
。messages li:最后一个孩子 。消息{
margin-bottom:0；
}
。输入{
border:无；
显示:block；
填充:10px；
宽度:100%；
}
效果如下所示:
步骤09:滚动链接
现在你可以在页面上看到经过美化的聊天框 。这个聊天框有一个可滚动的消息列表和一个文本输入框，它位于前面创建的新闻提要上(如果没有，可以缩小浏览器)，如下所示:
好看吗？但是你有没有注意到当你把聊天框中的信息列表滚动到底部时会发生什么？有兴趣的话，自己试试 。让我们做两个小测试 。首先，滚动页面主体以查看效果:
然后滚动聊天框中的信息列表，直到它到达底部，并查看效果如下:
滚动新闻推送和我们想象的没什么区别；但是当你在聊天框里滚动消息列表的时候，就不一样了 。当您滚动到邮件列表的末尾时，您可以看到页面正文将开始滚动 。这种效果叫做滚动链接，也就是滚动链接 。
在我们的例子中，这可能不是一个大问题，但在某些情况下，这可能是一个大问题 。如模态子弹盒，就要解决这种现象 。
笨拙的解决方法是在正文中加入overflow:hidden，但这可能会影响我们的操作，甚至影响你浏览你的页面 。不过好在CSS有了一个新功能，可以做得更完善，体验更好 。而且用起来也不复杂，只需要一行代码，就是CSS的overscroll-behavior 。该属性有三个值:
auto ：其默认值 。元素（容器）的滚动会传播给其祖先元素 。有点类似JavaScript中的冒泡行为一样 contain ：阻止滚动链接 。滚动行为不会传播给其祖先元素，但会影响节点内的局部显示 。例如，Android上的光辉效果或iOS上的回弹效果 。当用户触摸滚动边界时会通知用户 。注意，overscroll-behavior:contain 在 html 元素上使用，可以阻止导航滚动操作 none ：和 contain 一样，但它也可以防止节点本身的滚动效果Overscroll-behavior属性是overscroll-behavior-x和overscroll-behavior-y的缩写，如果只想控制一个方向的滚动行为，可以使用这些属性之一 。
回到我们的例子，在 。消息类别:
。消息{
over scroll-behavior-y:包含；
}
现在你再试一次，在聊天框的消息列表中上下滚动 。此时，当您滚动到消息列表的末尾时，将不再影响正文的滚动(页面的滚动):
如果想在PWA中达到下拉刷新的效果，比如下拉时刷新Newsfeed，这个属性非常方便 。只需添加over scroll-behavior:contain in body或html元素 。


推荐阅读


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

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