江苏龙网

  1. 主页 > 生活百科 > >

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


然后，display: contents的简单代码实际上使元素表现得好像不存在一样 。但是仍然可以看到元素的后代，元素本身并不影响布局 。也就是，。的子元素 。嵌套，也将成为一个Flex项目 。
首先，删除现有的类名 。输入li，然后使用显示:ul和li中的内容:
。feed ul，
。送纸李 {
显示:内容；
}
这时，所有人 。卡在下面 。feed都变成Flex项目(不只是李下的子元素 。馈，也是‘李元素’的传人):
现在你看到的所有卡片都按顺序排列了，只是大小不对:
可以通过将flex属性添加到 。卡片:
。卡片{
flex:1 0 40%；
}
这时，每张牌的大小又恢复了正常:
这时候就好像ul不存在一样 。如果你足够细心，可以发现flex-basis的值被设置为40% 。虽然我们已经将所有元素的box-sizing的值设置为border-box，但是众所周知，box-sizing会影响盒子模型的计算，但是不包括margin，所以为了有足够的空空间放置卡片，重新设置了flex-basis的值 。
这个例子再次向您展示了显示的魔力:内容 。当然，这里没有详细介绍display:contents，但足以向你展示它的威力 。如果你对这个专题感兴趣，或者想深入研究，建议阅读以下文章:
如何理解CSS的 display 属性 CSS的 display:contents 为什么是 display:contents 而不是CSS Grid的 subgrid How display: contents; Works Vanishing boxes with display contents More accessible markup with display: contents步骤04:探索CSS查询特性
虽然display:contents已经达到了预期的效果，但是仍然处于W3C的工作草案状态 。目前我只在Chrome 65+和Firefox 59+看到效果 。
如果你在浏览器开发工具中，禁用display: contents，你会发现你的布局又一次混乱了 。这只模拟浏览器不支持此属性时的效果 。那么接下来我们能做什么呢？这就引出了下一个新的CSS特性——CSS查询特性 。
它的原理有点类似于CSS中的media query (@media)，但是它允许你单独使用CSS表达式，类似于JavaScript中的if/else 。如果条件满足，则在相应的块中应用该样式 。接下来我们以display:contents作为查询特性的条件，然后在{…}块中放置相应的CSS样式 。像这样:
@支持(显示:内容){
。feed ul，
。进纸李 {
显示:内容；
}
。卡片{
flex:1 0 40%；
}
}
在CSS中，查询特性通常被称为CSS的条件特性，主要包括@media、@supports和@viewport 。关于这个的介绍，可以看看@webinista写的PPT——“条件CSS ” 。
可能你第一次接触@supports()会很好奇，不知道这个属性的具体用法 。如果你愿意，我建议你花点时间看看前面排序的文章“/s2/]CSS3条件判断:@supports ”和“说说CSS中的@ supports [/s2]” 。
步骤05:使用not键使代码更清晰
在CSS的世界里，类似@supports这样的东西，其实就是一个逐渐增强，优雅退化的方案 。我们可以使用@supports添加新的样式，但是也可以添加一些降级需要的原有样式 。
如果忽略IE浏览器的话@supports已经很好的支持了 。事实上，您可能希望使用CSS查询特性，而不是某种操作符 。如你所料，我们可以通过@supports的not关键字为不支持display: contents的浏览器添加相应的样式 。因此，我们可以将示例代码修改为:
//支持显示的浏览器:内容采用此代码 。
@supports(显示:内容){
。feed ul，
。送纸李 {
显示:内容；
}
。卡片{
flex:1 0 40%；
}
}
//不支持display:contents的浏览器，使用下面的代码
@不支持(显示:内容){
。进纸李 {
flex:1 0 50%；
}
。饲料李 。嵌套{
弹性基础:100%；
}
。饲料李 。嵌套的ul {
display:flex；
flex-wrap:wrap；
}
}
在支持display:contents的浏览器中，您将看到以下效果:
在不支持display:contents的浏览器中，您看到的效果如下:
步骤06:进一步优化
经过上面的例子，估计你已经体会到CSS查询特性的魅力和潜力了 。更强大的是，你可以结合AND，or和not，让你的条件表达式更强大 。比如你的降级方案，不仅考虑了display:contents，还说用户的浏览器可能不支持display:flex 。在这种情况下，我们可以继续降级到float的布局 。
不过这里不会考虑降级浮动的布局 。但是我们可以降级display: flex和display:contents 。这里将使用@supports中的And和not关键字 。上面的代码如下所示:
@支持(显示:flex)和(显示:内容){
。feed ul，
【css怎么用，divcss布局经典实例】


推荐阅读


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

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