編者按：本文作者：安佳，360?搜索事業部的前端開發工程師，W3C?CSS?工作組成員。

本次大會共有?7?個主題：

新時代?CSS?布局。陳慧晶

剖析?css-tricks?新版，為你所用。大漠

CSS?創意與視覺表現。張鑫旭

CSS?生成藝術。袁川

你(可能)不知道的五個?CSS?新特性。勾三股四

10?things?I?wish?CSS?authors?knew?about?animations。Brian?Birtles

CSS?TIME。陳在真

下文若引用了相關主題的內容，則會用對應的角標 ⁿ 標出

聊幾個有意思的技術點。

margin:?auto

margin:?auto 配合 display:?flex 帶來的驚喜 ¹。

示例1：輕松實現水平垂直居中(在線預覽:https://codepen.io/anjia/pen/zXKvxZ?)

關鍵代碼：

<div?class="demo1">

??<div?class="cont">div>

div>

<style>

.demo1?{

??display:?flex;

}

.demo1?.cont?{

??margin:?auto;

}

style>

示例2：一層?HTML?結構實現左“右”布局(在線預覽:https://codepen.io/anjia/pen/zXKvxZ?)

關鍵代碼：

<ul?class="demo2">

??<li>首頁li>

??<li>動態li>

??<li>話題li>

??<li>活動li>

??<li>登錄? ?注冊li>

ul>

<style>

.demo2?{

??display:?flex;

}

.demo2?> li:last-child?{

??margin-left:?auto;

}

style>

@supports

@supports?是?CSS?的特性查詢。它定義的一組規則，只有當瀏覽器支持的時候才會生效。非常適合做一些純?CSS?層面的漸進增強和優雅降級。

eg.

@supports?(display:?grid)?{

??div?{

????display:?grid;

??}

}

@supports?not?(display:?grid)?{

??div?{

????float:?right;

??}

}

CSS?Conditional?Rules?共有四個規則，分別是：

• @supports 特性查詢

• @media 媒體查詢

• @import 引入外鏈樣式的

• @document 基于 url 加載樣式(尚在實驗中)

詳見?CSS?Conditional?Rules?Module?Level?3(https://drafts.csswg.org/css-conditional-3/)

這種特性檢測也有對應的 JS API CSS.supports()。

eg.

var?result?=?CSS.supports('display:?grid');?// 返回 boolean

var?result?=?CSS.supports('display',?'grid');

CSS 的邊界技巧

技巧是靈活運用?CSS?屬性值的“有效”區間。

eg. opacity ³當它的值小于?0?時，會被當成?0?處理；當它的值大于?1?時，會被當成?1?來處理。所以，用它就可以實現?CSS?里的?Boolean?值了。比如下面的效果?³：在線預覽:https://www.zhangxinxu.com/study/201903/css-idea/animation-pie.php

eg. CSS 漸變里的 ?=???當的值比它上一個顏色的位置的值小時，則會被“修正”成和上一個位置相等的值。這樣就可以“偷懶”實現下面的效果了：在線預覽:https://codepen.io/anjia/pen/vMxKxJ

之所以這樣“修正”，是和漸變本身的特性相關的。詳見深入理解?CSS?linear-gradient(https://mp.weixin.qq.com/s/Ot0tqtPUiqjX0mrOWhXAEg)

css-doodle

css-doodle(https://css-doodle.com/)?的效果簡直是太驚艷了，我只想說袁川是一名拿著?CSS?畫筆的畫家。在線欣賞他的各種作品?codepen.io/collections(https://codepen.io/yuanchuan/collections/popular/)。

基礎素材：各種形狀(直線/虛線/圓角/圓形/半圓/三角形/多邊形等)和?Unicode?字符(等)

方式：平鋪、隨機、數量(等)

配色：Color?Hunt、Coolors.co(等)???

畫龍點睛：設計感和思考力(等)

后面都加了“(等)”，是因為這些都是我作為一名觀眾的心得，比較主觀

關于?css-doodle?更準確的信息，可查看其源碼?yuanchuan/css-doodle(https://github.com/css-doodle/css-doodle)。

其它

• 滾動特性 ^2,5

  • scroll-snap-type:?x|y|both?mandatory|proximity?滾動-捕捉-類型

  • scroll-snap-align:?none|start|end|center?滾動-捕捉-對齊

  • scroll-snap-stop:?normal|always?滾動-捕捉-停止

  • 詳見 CSS?Scroll?Snap?Module?Level?1

  • scroll-behavior:?smooth

  • scrollbar-width

  • scrollbar-color

  • 自定義滾動條樣式

  • 讓錨點定位的滾動更“平滑”。性價比很高的一個特性

  • 讓由觸摸滑動或鼠標滾輪觸發的滾動更精細

• 可變字體 ⁵

  • 好處是加載一個字體文件，便可以得到不同風格的字體。你可以動態設置它的width?weight和style等

  • 在線體驗功能?Variable?Fonts?

  • 入門可查看?Variable?fonts?guid

• 設置打印樣式 ⁵

  • @media print {}

更多

• 所有的?PPT?和視頻均可在線查看?(https://www.yuque.com/cssconf/5th)

• 知乎?/?參加2019年03月30日深圳第五屆CSSConf是如何體驗？(https://www.zhihu.com/question/318056547/answer/636586391)

• 照片墻?/?中國第五屆CSS大會(http://s.taopaipai.com/v3/indexpc.html?id=9077)

關于奇舞周刊

《奇舞周刊》是360公司專業前端團隊「奇舞團」運營的前端技術社區。關注公眾號后，直接發送鏈接到后臺即可給我們投稿。

總結

以上是生活随笔為你收集整理的css如何让滚轮滚动时 不让页面滚动_中国第五届 CSS 大会参会总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。