江苏龙网

  1. 主页 > 生活百科 > >

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

虽然CSS很简单，但是CSS是一门非常有趣的语言 。CSS每年都在变化，不同的博主在不同的时间段总结了CSS的一些新特性 。这些新功能虽然不能马上被很多浏览器支持，但随着时间的发展，总会被浏览器支持 。即使不支持，浏览器也有一些方法支持，比如最流行的css 。
next ，就可以让很多未来的CSS特性就立马使用，并且不用花太多时间来考虑浏览器的兼容性 。
今天在这篇文章中，@Daniel Crisp对当前CSS的新特性-五个最新的CSS特性(其实这些特性对我来说并不新鲜)做了一个简单的总结，并结合实例告诉你如何使用 。接下来，我们来看看这五个新特性是什么 。以及如何使用它 。如果你感兴趣，请继续读下去 。
前言
@Daniel Crisp在他的博客文章中，讨论了CSS的五个新特性，介绍了这五个特性可以做什么，以及如何将它们应用到您的项目中 。再者，提供了例子每一步的代码，可以在GitHub 的仓库中获取，不过接下来，我会借助Codepen给大家演示一下 。
接下来要引入的五个CSS新特性是:
CSS Display Module Level 3 ： display:contents CSS Conditional Rules Module Level 3 ： @support(…){…} CSS Overscroll Behavior Module Level 1 ： overscroll-behavior: contain CSS Selectors Module Level 4 ： :focus-within ，:placeholder-shown CSS Containment Module Level 1 ： contain:paint估计已经有同学接触过这些CSS特性了 。如果你还没有，我建议你继续按照下面的步骤读下去 。
案例:创建新闻源) S2/]
以新闻提要为例，本文解释了新闻提要是如何制作的，以及这五个CSS特性是如何在不同的步骤中使用的 。
步骤1:新闻提要的HTML模板
我们的情况其实很简单 。我们没有使用任何JavaScript框架，但是我们使用了原始的HTML结构来做这个演示 。所以我们需要一些简单的HTML标签来帮助我们创建演示 。这里是一个类名为 。容器，它包含一个类名为的ul 。feed，然后创建十个li，每个li包含一个类名为 。卡 。
在第五个和第六个li之间创建另一个名为nested的li，它包含一个无序列表ul，并包含三个li来创建三张卡片 。
class="container " >
卡片1
卡片2
卡片3
卡片4
卡片5

卡片A
卡片B
卡片C

卡片6
卡片7
卡片8
卡片9
卡片10

没有任何风格，你看到的效果是这样的:
第二步:添加样式
现在向示例添加一些基本样式，使其看起来更像新闻提要:
body {
背景色:灰色；
}
。容器{
max-width:800 px；
margin:0 auto；
}
。卡片{
背景色:# fff；
填充:10px；
margin:10px；
最小高度:300 px；
}
最后，在上使用Flexbox相关的功能 。进纸，这样每行有两张卡:
。饲料{
display:flex；
flex-wrap:wrap；
李 {
flex:1 0 50%；
}
}
效果如下:
如果你从未接触过Flexbox相关的知识，强烈建议你花些时间阅读这些文章 。因为Flexbox发展到今天，已经开始取代float进行布局，成为最主流的布局方式之一，尤其是在移动端 。
步骤03:解决布局问题
当你向下滚动列表时，你会发现下面有三个李 。嵌套(对应CardA ~ CardC)影响整体布局效果:
实际上，我们希望，或者说理想情况下，所有的卡片都按流排列，但事实并非如此 。出现这种现象的原因是在Flex容器-ul.feed中设置了display: Flex(创建了一个Flex容器) 。flex容器创建后，只会影响其子元素(ul.feed > li.card)，即子元素会自动变成Flex项目 。但这不会影响其后代的子元素 。换句话说 。嵌套>李灿不会自动成为Flex项目 。
通常情况下，解决这个问题的唯一方法是更改HTML模板，但是在某些情况下，比如在CMS系统中(假设你没有修改HTML标签的权限)，那么面对这种情况你就无能为力了 。当然，您可能会想到使用JavaScript来处理它 。也许你以前是这样想的，但是今天，我们可以通过一个新的CSS特性来解决这个问题——显示:内容 。
W3C规范是这样描述 display:内容的:
"元素本身不生成任何框，但是它的子元素和伪元素仍然照常生成框 。出于框生成和布局的目的，如果在文档树中已被替换为其子元素和伪元素，则该元素必须被视为
元素本身不生成任何边界框，但是它的子元素和伪元素仍然生成边界框，元素文本照常显示 。为了同时兼顾包围盒和布局，在处理这个元素的时候，假设这个元素不在元素树结构中，只留下内容 。这包括原始文档中元素的子元素和伪元素，例如::before和::after 。和往常一样，前者仍然是在元素的子元素之前生成，而后者是在之后生成 。"


推荐阅读


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

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