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

尽管CSS简易，但CSS是一门十分好玩儿的语言表达，CSS每一年都会有转变，并且都是有不一样的时尚博主都是在不一样的时间范围汇总一些CSS的新特性。尽管这种新特性没法马上获得诸多浏览器的支持，但一直伴随時间的发展趋势，这种特性都是会获得浏览器的支持。就算未获得支持，也是有一些方式 让浏览器支持，例如更为外出的 cssnext ，就可以让许多以后的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特性，可能有一些同学们已经触碰过去了，假如你未触碰过，提议你再次跟伴随着下边的流程再次向下阅读文章。

实例：建立一个新闻内容（Newsfeed）

根据一个新闻内容为例子，分不一样的流程向我们论述这一新闻内容是如何制作的，及其在制造这一例子的情况下，这五个CSS特性是怎样在实例中获得应用。

Step1：新闻内容的HTML模版

大家这种实例其实不是很难，并没有应用一切JavaScript架构，或是应用最原始的HTML构造来做这一Demo。因此大家要一些简易的HTML的标识，协助人们建立Demo。这儿应用了一个类名叫 .container 的 div ，该 div 包括了一个类名叫 .feed 的 ul ，随后建立了十个 li ，每一个 li包括了一个类名叫 .card 的 div 。

在第五个和第六个 li 中间建立了另一个名叫 nested 的 li ，其涵盖了一个无序列表 ul ,并且包括了三个 li 建立三个信用卡。

<div class=”container”>

<ul class=”feed”>

<li><div class=”card”>Card 1</div></li>

<li><div class=”card”>Card 2</div></li>

<li><div class=”card”>Card 3</div></li>

<li><div class=”card”>Card 4</div></li>

<li><div class=”card”>Card 5</div></li>

<li class=”nested”>

<ul>

<li><div class=”card”>Card A</div></li>

<li><div class=”card”>Card B</div></li>

<li><div class=”card”>Card C</div></li>

</ul>

</li>

<li><div class=”card”>Card 6</div></li>

<li><div class=”card”>Card 7</div></li>

<li><div class=”card”>Card 8</div></li>

<li><div class=”card”>Card 9</div></li>

<li><div class=”card”>Card 10</div></li>

</ul>

</div>

在没有款式的情形下，你见到的成效是如此的：

Step2：加上款式

如今要给示例加上一些基本上款式，使其看上去更像一个新闻内容：

body {

background-color: grey;

}

.container {

max-width: 800px;

margin: 0 auto;

}

.card {

background-color: #fff;

padding: 10px;

margin: 10px;

min-height: 300px;

}

最终，在 .feed 上应用Flexbox有关的特性，让每排有二张信用卡：

.feed {

display: flex;

flex-wrap: wrap;

li {

flex: 1 0 50%;

}

}

实际效果如下所示：

假如你从没了解过Flexbox有关的专业知识， 强烈要求你花一点时间阅读文章这种文章内容 。由于Flexbox发展趋势到今日，已经逐渐替代 float 来合理布局，变成最流行的布置方法之一，特别是在手机端上的合理布局。

Step03：处理格局问题

如果你往下翻转目录时，你就会发现 .nested 下的三个 li （相匹配的是 CardA ~ CardC ）危害了总体的布置实际效果：

实际上大家需要的，换句话说理想化情况下，全部的卡片按流的方法排序，但实际上并没有如此。导致这种现象的因素是Flex容器 —— ul.feed 设定了 display:flex （创建了一个Flex容器），创建Flex容器以后，只能对他的儿子原素（ ul.feed > li.card ）有影响，就可以子原素全自动会变为Flex新项目。但并不会影响到其子孙后代子原素，也就是说， .nested > li 是没法全自动变为Flex新项目。

通常处理这个问题的唯一方式 是变更HTML模版，但很多状况下，例如在CMS系统软件中（假定你没有改动HTML标识的支配权），那麼应对这样的事情，你也就会无计可施了。自然，你说不定会想起应用JavaScript来解决。也许之前你能那么想，但时迄今日，我们可以根据新的CSS特性来处理这个问题 —— display:contents 。

W3C标准是这种对 display:contents 叙述 的：

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.“

大到意思是：“ 原素自身不造成一切界限框，而原素的子元素与伪元素依然形成界限框，原素文本仍旧表明。为了更好地与此同时照料界限框与合理布局，解决这一原素时，要想像这一原素没有在原素树形构造里，而仅有內容留有。这包含原素在原文本文档中的子原素与伪元素，例如 ::before 和 ::after这两个伪元素，如平时一样，前面一种依然在原素子元素以前形成，后面一种在以后形成。 ”

那麼 display: contents 这一简单的代码事实上让原素主要表现得仿佛不会有一样。但依然能够看见原素的子孙后代，并且原素本身并不危害合理布局。换句话说， .nested 的子原素 .card 也将变为Flex新项目。

最先删掉目前 .feed li 的类名，随后在 ul 和 li 是应用 display: contents ：

.feed ul,

.feed li {

display: contents;

}

这个时候 .feed 下任何的 .card 都变成了Flex新项目（不但是 .feed 下的子原素 li ，还包含下一代的 li 原素）：

如今你见到的全部卡片全是合理的排序，可是规格不对：

可以利用在 .card 上加上 flex 特性来处理这个问题：

.card {

flex: 1 0 40%;

}

这个时候每一张卡片的大小就又恢复过来了：

这个时候就好像 ul 不会有了一样。假如你够认真得话，你能发觉 flex-basis 的值设定为 40% 了，尽管大家设定了全部要素的 box-sizing 的数值 border-box ，但我们都知道， box-sizing 可以危害盒模型的测算，但对 margin 不包括以内，因此为了更好地有充足的区域置放卡片，把 flex-basis 的值再次测算了，也就是我们所看见的 40% 。

这一实例也再度向我们表明了 display:contents 的奇特之处。自然，这儿并没对 display:contents 做具体的详细介绍，但也充足向我们展现其强劲之处。假如你对该特性有兴趣，或是想进一步的学习培训，提议阅读文章下边这2~3篇文章内容：

• 怎样看待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

Step04：探寻CSS查看特性

虽然 display:contents 完成了大家需要的实际效果，但它依然处在W3C的工作中议案情况。现阶段只在Chrome 65 、Firefox 59 中见到实际效果。

假如你在电脑浏览器微信开发工具中，屏蔽掉 display: contents ，你能见到你的格局又逐渐紊乱了。那样做仅仅仿真模拟电脑浏览器不兼容该特性时的实际效果。那麼大家下面能干什么呢？这就引出了下一个CSS新特性 —— CSS查看特性 。

它的基本原理有点儿类似CSS中的媒体查询（ @media ）一样，可是它容许你独立应用CSS关系式，类似JavaScript语言表达中的 if / else 之类。假如标准合乎运用相匹配块中的款式。下面使我们把 display:contents 做为查看特性的标准，随后将相应的CSS款式置放在 {…} 块中。如同下边那样：

@supports (display: contents) {

.feed ul,

.feed li {

display: contents;

}

.card {

flex: 1 0 40%;

}

}

在CSS中，查看特性许多情况下也被称作CSS的标准特性，其主要包含 @media 、 @supports和 @viewport 。有关于这方面的详细介绍可以阅读文章@webinista写的PPT —— 《 Conditional CSS》。

很有可能你第一次接触到 @supports() 得话会觉得很好奇，并不了解该特性的详细应用，要是你愿意得话，提议你花一点时间阅读文章初期梳理过的文章内容《 CSS3条件判断： @supports 》和《 说说CSS中的 @supports 》。

Step05: 应用 not 重要让编码越来越更清楚

在CSS的全球中，像 @supports 那样实际上也就是一种 渐近提高和雅致降权的计划方案 。我们可以应用 @supports 来增加新的款式，但还可以加上降权需要的一些初始款式。

假如忽视IE电脑浏览器得话， @supports 已取得有效的适用。事实上你也许想要应用的是CSS查看特性，而不是某一种运算符。它的工作方式与你预估的一样，因而我们可以根据 @supports 的 not 关键字对这些不兼容 display: contents 电脑浏览器加上相应的款式。根据这一缘故，我们可以把实例的编码改动成：

// 适用 display: contents的电脑浏览器，选用的是一段编码

@supports (display: contents) {

.feed ul,

.feed li {

display: contents;

}

.card {

flex: 1 0 40%;

}

}

// 不兼容display:contents的电脑浏览器，选用下边这一段编码

@supports not (display: contents) {

.feed li {

flex: 1 0 50%;

}

.feed li.nested {

flex-basis: 100%;

}

.feed li.nested ul {

display: flex;

flex-wrap: wrap;

}

}

在适用 display:contens 的电脑浏览器，你将见到的作用如下所示：

在不兼容 display:contents 的电脑浏览器，见到的实际效果又像下边那样：

Step06: 更进一步提升

通过以上的实例，可能你已经体会到了CSS查看特性的风采与发展潜力了，上边使用的只是是查查看特性中的一部分作用，更强劲的是你能 and 、 or 和 not 结合在一起，使你的条件表达式更加强劲。例如，你的降级计划方案除开考虑到 display:contents 以外，还要说有可能客户的电脑浏览器对 display:flex 也不兼容。在那样的情形下，我们可以再次降级到 float 的合理布局。

但是大家在这儿不容易考虑到降级到 float 的合理布局。但我们可以对 display: flex 和 display:contents 开展降级解决。这儿会使用 @supports 中的 and 和 not 关键字。上边的编码就变为像下边那样：

@supports (display: flex) and (display: contents) {

.feed ul,

.feed li {

display: contents;

}

.card {

flex: 1 0 40%;

}

}

@supports (display: flex) and (not (display: contents)) {

.feed li {

flex: 1 0 50%;

}

.feed li.nested {

flex-basis: 100%;

}

.feed li.nested 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

实例：聊天框

如今大家得到一个美观的新闻内容（Newsfeed），下面在前面的Newsfeed基本上加上一个小的聊天框，这一聊天框固定不动在手机屏幕的右下方。

Step7: 加上聊天框

大家必须一个消息列表和一个文本域字段名，便捷客户键入信息。那麼在 <body> 标识的后边加上这一聊天框所必须的HTML标识：

<div class=”chat”>

<div class=”messages”>

<ul>

<li><div class=”message”>Message 1</div></li>

<li><div class=”message”>Message 2</div></li>

<li><div class=”message”>Message 3</div></li>

<li><div class=”message”>Message 4</div></li>

<li><div class=”message”>Message 5</div></li>

<li><div class=”message”>Message 6</div></li>

<li><div class=”message”>Message 7</div></li>

<li><div class=”message”>Message 8</div></li>

<li><div class=”message”>Message 9</div></li>

<li><div class=”message”>Message 10</div></li>

</ul>

</div>

<input type=”text” class=”input”>

</div>

在都没有给闲聊加上一切款式的情形下，大家看见的成效是：

Step08：给聊天框加上款式

先给聊天框加上一些基本上款式，让它看上去有些像聊天框的模样：

.chat {

background: #fff;

border: 10px solid #000;

bottom: 0;

font-size: 10px;

position: fixed;

right: 0;

width: 300px;

}

.messages {

border-bottom: 5px solid #000;

overflow: auto;

padding: 10px;

max-height: 300px;

}

.message {

background: #000;

border-radius: 5px;

color: #fff;

margin: 0 20% 10px 0;

padding: 10px;

}

.messages li:last-child .message {

margin-bottom: 0;

}

.input {

border: none;

display: block;

padding: 10px;

width: 100%;

}

效果看上去像下边那样：

Step09：滚动连接

如今网页页面上能够看见已经装饰好的聊天框了，这一聊天框有一个可滚动的消息列表和一个文字文本框，并且坐落于前边建立子的Newsfeed上边（要是没有得话，你能将你的电脑浏览器变小），如下所示：

看起来是否非常好。可是你有没有注意到，如果你滚动聊天框中的信息内容目录到底端的情况下，会产生哪些？有兴趣得话，亲自试一试。我们做2个趣味测试，先滚动网页页面 body ，看一下效果：

随后再聊天框的信息内容目录中滚动，一直滚动到最底部，滚没动才行，看一下效果因此：

滚动Newsfeed，和大家预料的并没差别；但滚动聊天框中的消息列表时，却不一样，滚动到消息列表尾端时，能够看见网页页面 body 将逐渐滚动。这类效果被称作 滚动连接 ，即 Scroll Chaining 。

在咱们这一例子中，这很有可能不是什么问题，但在某种情形下，它也许便是一大问题了。例如Modal弹窗，那么就很必须处理那样状况。

较为拙的解决办法便是给 body 加上 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 的缩写，假如你只想要操纵在其中一个角度的滚动个人行为，可以运用在其中的某一个属性。

返回人们的实例来，在 .messages 类中加上下边这行编码：

.messages {

overscroll-behavior-y: contain;

}

如今你再试着一下，在聊天框中的消息列表中左右滚动。这时你再滚动到消息列表尾端时，它不会再会危害 body 的滚动了（网页页面的滚动）：

假如你要在PWA中完成页面刷新的效果，例如往下拉时更新Newsfeed，那麼这一属性就特别便捷。只要在 body 或 html 原素中加上 overscroll-behavior:contain 就可以。

特别注意的是，这一属性还并不是W3C规范，反而是Web创业孵化器WICG的一个提议。但是，或许哪一天，这一特性就加入到W3C调研组中，变成W3C的一个规范。

有关于这方面的大量详细介绍，提议阅读文章下边2~3篇文章内容：

• 滚动的特性
• CSS overscroll-behavior
• Take control of your scroll: customizing pull-to-refresh and overflow effects

Step10：伸缩聊天框

现阶段，聊天框占有了十分大的室内空间，如果我们不与其说互动得话，会有点儿分散化使用者的专注力。幸运的是，大家可以用CSS的选择符特性来处理这个问题。这也是CSS的另一新特性，再一次向我们展现了CSS的魔法。

最先调节一下目前的款式。默认设置状况下，大家期待聊天框是解决一个伸缩情况，因而把 .message 的 max-height 值重设一下，在这里设定为 0 ，而且把 padding 也重设为 0 。由于这一值正好伸缩了聊天框，并且又不干扰其美观大方。为了更好地让聊天框伸缩和进行时有一个衔接的动漫效果，依靠 CSS的 transition 属性来完成。

.messages {

…

max-height: 0;

padding: 0;

transition: max-height 500ms;

}

效果看上去还不错，如下所示所显示：

Step11：当聊天框获得聚焦点时，进行聊天框

如今大家的聊天框中的信息内容目录是看不见。由于大家前边把信息内容目录伸缩起来了。如今我们要考虑的是怎样根据CSS来将其进行。这便会使用CSS的另一新特性 —— :focus-within 。

有点儿类似 :focus 伪类选择器一样，可是 :focus-within 与其说不同点是， 假如原素的一切子孙后代原素获得聚焦点，它便会被配对 。这就是这一属性独到之处，因为它与CSS通常的工作方式反过来，通常大家只有依据要素的先祖来挑选原素。

在咱们这一例子中，当 .chat 地区内的其他问题获得聚焦点时，重设一下 .message 的 max-height 和 padding 值。请记牢，一个原素务必接纳电脑键盘或鼠标事件或其它类型的键入，便于接受聚焦点。例如大家这一实例，点一下 <input> 文本框就合乎这一规定，可以做到人们需要的预估效果。

.chat:focus-within .messages {

max-height: 300px;

padding: 10px;

}

你如今可以来尝试一下效果。点一下 input 让其获得聚焦点，能够看见聊天框可以进行，相反聊天框又会伸缩下去：

Step12：进一步显出 :focus-within 的魔法

假如只是完成聊天框的伸缩和进行效果，到上一步实际上已经完成了。但针对一位有向往的前面，一直在试着许多极限值性。返回人们的实例中，假如PM跟你提了一个新要求，当文字文本框获得聚焦点以后，除开能进行聊天框以外，还期待聊天框下边的Newsfeed越来越模糊不清。针对那样的一个效果，如何来完成呢？

要保持那样的效果，实际上并不繁杂，假如您有做了 自定单选按钮或勾选框 （自然是纯CSS），你应该会想起解决方法。我们可以 应用CSS选择符中的朋友组成器 ~ ，就可以比较容易的做好这一点。应用 ~ 选择符有一个条件必须留意，聊天框 .chat 必须在Newsfeed（ .container）前边（指的是HTML构造，实际上大家已经那样进行了）。仅有如此才能够根据接下来的形式让Newsfeed越来越模糊不清：

.chat:focus-within ~ .container {

filter: blur(5px)

}

自然，这也许并不是最合适的一个计划方案，但仅根据CSS的方式方法就能做到期望的效果，已经很帅了。有兴趣得话，自身可以体会一下：

留意，Newfeed加上了 filter 效果，这可能会更改原素的重叠次序，导致聊天框在Newsfeed下边。因此必须显式的 .chat 中加上 z-index 的值。例如这儿设定了 z-index: 1001 。实际因素可以查看@张鑫旭教师的《 深入理解CSS中的层叠上下文和层叠顺序 》一文。

探寻 :placeholder-shown

最先要先分清晰， :placeholder-shown 和 ::placeholder 是不一样的2个东西。奇妙的是 :placholder-shown 是W3C技术标准的一个属性，而 ::placeholder 却并不是。 ::placeholder-shown 依然会危害占位符文本的款式。

留意： :placeholder-shown 是一个伪类选择器（它是一个处在特殊情况的元素）； ::placeholder 是一个伪元素（一个在DOM中并没有的由此可见元素）。

此外， :placeholder-shown 也是新的选择符之一（CSS Selectors Module Level 4新增加了很多种多样伪类选择器），它可以搭配一切表明占位符文本的键入。在人们的例子中，文本文本框( input ）并没有占位符文本，因此先往HTML中的 input 元素中，加上 placeholder ，新增加占位符文本。

<input type=”text” class=”input” placeholder=”Enter your message”>

随后在 input 以后插入一个新的元素，用于协助客户实际操作：

<div class=”prompt”>Press enter to send</div>

如今给这一协助信息内容 .prompt 加上一些款式，默认设置状况之它是被伸缩起来了。

.prompt {

line-height: 2em;

max-height: 0;

overflow: hidden;

padding: 0 10px;

text-align: right;

transition: max-height 500ms;

}

仅从外形上看，好像仿佛没空出哪些，便是在文本框中多了一个占位符文本：

尽管没多少差别，但这为之后的实际效果已埋下了一个悬念。然后往下看。

Step14：应用信息提示由此可见

这时信息提示处在伸缩情况，并不由此可见，我觉得大伙儿也想起了，要如何使用 :placeholder-shown 让其由此可见？大部分网页会表明占位符文本，直到客户在 input 中键入确实值。为了更好地 提升客户应用表格的感受 ，假如 input 获得相应的热点以后，占位符文本并不掩藏，还起着提醒功效，是否更有趣，也对客户有更快的协助，终究我们不期待客户推送空的信息，因此我们可以将这种行为关系下去，仅有在客户键入值时才表明信息提示（也就是 .prompt 进行由此可见）。

:placeholder-shown 表明的是团块文本符由此可见的情况，而信息提示由此可见的情况下，团块文本符不由此可见，也就是 input 拥有一个真实的值。换句话说而言，大家要有一个 :placeholder-shown 的翻转（团块文本符不由此可见），这个时候我们可以依靠 :not() 选择符来帮大家做这种的翻转。

.input:not(:placeholder-shown) .prompt {

max-height: 2em;

}

将 max-height 设定为 font-size:10px 的二倍，这儿应用了 2em ，这个时候可以进行提信信息内容块。简易而有干净整洁。假如这一看起来平淡无奇的伪类选择器能过根据最后的标准，那麼大家就会看见一些精妙的应用。赶到这一步，实际效果变为：

亲自感受一下，你在 input 随意键入一点內容，就算是空格符，也可以见到信息提示被展现出来：

无论 :focus-within 或是 :placeholder-shown ，他们全是CSS选择符新提升的伪类选择器，假如有兴趣，提议你花些时长对这种领域开展了一掌握：

• Focusing on Focus Styles
• A CSS Approach to Trap Focus Inside of an Element
• CSS :focus-within
• CSS :focus-within via @w3cplus
• :placeholder-shown
• Visually validate an input field using CSS
• Intriguing CSS Level 4 Selectors
• The Future Generation of CSS Selectors: Level 4
• 下一代选择符：CSS4
• 将要发布的CSS4 Level 4 Selectors
• CSS Level 4 Selectors to Watch Out For

Step15：让它充满活力

到现在为止，大家根据简洁的HTML和一些CSS特点完成了一个含有闲聊功能模块的新闻内容的基础构架，可是现阶段它是沒有生命力的，只是一个纯静态数据的物品。换句话说客户并不有效它做一切事儿。这一实例包括了一些有意思的CSS新特点，但到现在为止不可以改动DOM。假如想让这一实例更加栩栩如生，那麼就要借助于一些JavaScript作用，便于客户能根据聊天框加上信息。

最先，必须向 <input> 和类名 .messages 的子元素 ul 加上一个 ID ，便于JavaScript更强的获得到相匹配的元素。与此同时给 input 元素加上一个 required 属性，当客户未键入一切信息内容的情况下，表格可以全自动较验。

<ul id=”messages” …

<input type=”text” id=”input” required …

随后建立一个名叫 script.js 文档，而且存放在 </body> 以前。但是大家的实例是在Codepen上做对应的演试，因此不用考虑到建立一个单的 .js 文档。

Step16：加上一些JavaScript

大家必须给 <input> 加上一个事情函数公式，当监视到按键的 Enter 事情，获得到 input 的值（假如合理）并将其增加到消息列表的结尾，消除字段名并翻转到信息的底端。

// 获得对应的元素

const input = document.getElementById(‘input’);

const messages = document.getElementById(‘messages’);

// 监视input的电脑键盘事情

input.addEventListener(‘keypress’, (event) => {

// 查验是不是按住Enter键

if (event.keyCode === 13) {

// 查验字段名是不是合理

if (input.validity.valid) {

// 应用该值建立DOM元素

const message = createMessage(input.value);

// 将创好的DOM元素加上到消息列表

messages.appendChild(message);

// 消除文本框的值

input.value = ”;

// 翻转到消息列表的底端

messages.parentNode.scrollTop = messages.parentNode.scrollHeight;

}

}

});

// 将input的值转换成为HTML的字符串数组

function createMessage (value) {

return stringToDom(`<li><div class=”message”>${value}</div></li>`)

}

// 将字符串转化为实际的DOM

function stringToDom (string) {

const template = document.createElement(‘template’);

template.innerHTML = string.trim();

return template.content.firstChild;

}

如今，如果你在 input 中键入字段名并按 Enter 键时，你将见到你导入的信息加上到消息列表的底端。

Step17：加上一造成附加的信息内容

为了更好地向我们演试最后一个CSS新特点 —— contain ，我们要做一些设计方案。大家将完成一个实际效果，在消息列表顶端的框中推送最新动态的时长。如果你将鼠标悬停在信息处时，便会有这一实际效果。

最先，大家必须将那些信息内容加入到咱们的最新动态中。我们可以改动 createMessage 函数公式回到的值。

function createMessage (value) {

return stringToDom(`

<li>

<div class=”message message–mine” data-timestamp=”${new Date().toString()}”> ${value} </div>

</li>

`);

}

你已经留意到了，在 message 中澳提升了一个类 message–mine 。并给这一类加上对应的款式：

.message–mine {

background: #ff2089;

margin-left: 20%;

margin-right: 0;

}

如果你新键入內容，按住 Enter 键时，新提升的消息列表相匹配的构造就变为像下面的图那样的：

表明时间格式

大家的目的性是将建立信息的时间格式表明在消息列表的顶端，大家必须如此做，便于即使在翻转消息列表时，这一时间格式也一直由此可见的。这儿大家依靠CSS的伪元素来做：

.message–mine::after {

content: attr(data-timestamp);

}

这个时候你所看见的成效是如此的：

这一实际效果并没有大家需要的。我们在款式上稍做改动，电脑鼠标飘浮到新加入的消息列表处时才可以见到时间格式，并且这一时间格式固定不动在信息地区的顶端。

.message–mine:hover::after {

background: #000;

color: #ff2089;

content: attr(data-timestamp);

left: 0;

padding: 5px;

position: fixed;

top: 0;

width: 100%;

}

这一实际效果如今转变成那样了：

如今时间格式固定不动在界面的顶端，可以再次提升一下，在 .messages 中加上 position: relative 。

但也失灵，那是由于固定定位是相比于 viewport 的，而不是相对性于其先祖原素。那麼这个时候，最后一个CSS新特点应当要上场了。

Step19：探寻Containment

CSS Containment是一个激动人心的新出题。它有很多选择项，可以限定电脑浏览器的款式、合理布局和对特殊原素的制作。这在改动DOM时非常有效。在网页中，就算是不大的改变都是有有可能导致电脑浏览器重绘全部网页页面，那样的购买是太贵，即使电脑浏览器勤奋为大家做过许多提升，网页页面的重绘或是对功能有一定危害的。

应用CSS Containment，我们可以把界面的一部分框起来，随后说“这儿发生什么事，只在这儿做相对应的事”。这也是另一种方式 ，可以维护原素不会受到外界的变动而受影响。

CSS的Containment是一个新特性，应用关键词 contain ，它适用四个特性值：

layout

paint

size

style

您还能够融合关键词，如 contain: layout paint ，这将仅适用一个要素的这种个人行为。但也包括适用2个附加的值：

• contain: strict 意同 contain: layout style paint size
• contain: content 意同 contain: layout style paint

每一个值都有点儿不全透明，因此我建议你阅读文章标准并在微信开发工具中应用他们来查询具体造成的状况。

layout 和 paint 是两种关键的值，由于他们在必须很多实际操作DOM时，对功能有一定的提升。但是，在人们的演试中，我们可以运用 contain: paint 我助大家开展时间格式精准定位。

依据标准所叙述，当应用 paint 时，“ 原素做为一个包括绝对定位和固定定位子孙后代的块 ”。这代表着，我们可以在 .chat 上设定 contain: paint ，这样一来， .chat 中要素的固定定位将根据 card 而不是 viewport 。你能根据应用 transform: translateZ(0) 得到同样的实际效果。

试着一下下，实际效果极致了：

CSS Containment是较新的特点，现阶段只在Chrome 52 版本号能够看见。假如你要深层次的掌握这方面的专业知识，可以浏览一下接下来的文章内容：

• CSS Containment in Chrome 52 （ 译文翻译 ）

汇总

到这儿就结束了，大家对这五个新的CSS特点拥有一定的掌握。在其中大部分全是比较简单的，但针对CSS Containment来讲或是比较繁杂，提议花大量的时间段去深入分析。尽管这也是一些新特点，并且在一部分电脑浏览器中还未取得不错的适用，但这种新特终究会有一天会走进你的身旁，你能在工程项目中应用。今日花那么的篇数，而且根据2个例子来论述这五个特点，主要是向我们展现这五个特点有什么作用，怎样在具体项目中应用。