css3基础

最新推荐文章于 2023-03-28 10:34:29 发布

神奇小白

最新推荐文章于 2023-03-28 10:34:29 发布

阅读量592

点赞数

分类专栏： JavaScript 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/uotail/article/details/124673536

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

https://developer.mozilla.org/zh-CN/docs/Web/CSS

css的由来历史->1996/12 css1.0->20210 css3.0
css working group 2010

兼容性

https://caniuse.com/

CSS3选择器

属性选择器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

[attr]表示带有以 attr 命名的属性的元素。
[attr=value]表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr^=value]表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value]表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

<div lang="zh-CN">世界您好！</div>

/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
   无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
div[lang|="zh"] {
  color: red;
}

[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）

UI元素状态伪类选择器

:hover hover 鼠标滑入
:focus 输入框焦点聚焦
:active 激活状态的样式（元素按住不松开）（松开后返回原状态）

<a>baidu</a>
<input type="text"/>
<div>按住变色</div>
<style>
    a:hover{
        color: red;
    }
    input:focus{
        color: red;
    }
    div:active{
        color: red;
    }
</style>

focus active 的对比

    <style>
        button.focus:focus{
            background-color: orange;
        }
        button.active:active{
            background-color: palegreen;
        }
    </style>
    <button class="focus">focus测试</button>
    <button class="active">active测试</button>

:enabled :disabled

:enabled 元素能够输入点击被激活的元素

<input type="text" disabled/>
<input type="password"/>
<style>
    input:disabled{
        background-color: red;
    }
    input[type="password"]:enabled{
        background-color: green;
    }
</style>

:read-only :read-writed

只读和禁用的区别-只读可以进行表单提交,而禁用不可以

<input type="text" value="read-only" readonly/>
<input type="text" value="read-write"/>
<style>
    input:read-only{
        background-color: rgb(236, 202, 202);
    }
    input:read-write{
        background-color: rgb(174, 230, 174);
    }
</style>

:checked :default
:default默认选中不会随着反复点击而丢失默认样式

<input type="radio" value="radio"/>
<input type="checkbox" value="checkbox" id="read">
<label for="read">read</label>
<input type="checkbox" value="checkbox" id="play" checked>
<label for="play">play</label>
<style>
    input:checked{
        outline: 2px solid red;
    }
    input:default{
        outline: 3px solid green;
    }    
</style>

:indeterminate 不确定状态

<input type="checkbox" id="sleep">
<label for="sleep">sleep</label>
<style>
    /* 不确定 */
    input:indeterminate+label{
        background-color: hotpink;
    }
</style>
<script>
    var inputs = document.getElementsByTagName('input')
    for(var i =0;i<inputs.length;i++){
        inputs[i].indeterminate = true; //此时复选框处于选中和未选中之间的状态
    }
</script>

::selection 选中状态

<div id="box">
    <p>sdasd dfd dfsdfsdsadsdadadadsadasda dff
        dfpsdfd[sg]<br> dsfsfspdgsd
        sdfpisdpg
    </p>
</div>
<style>
    p::selection{
        color: red;
        background-color: yellow;
    }
</style>

user-select禁止复制

<div id="box">
    <p>sdasd dfd dfsdfsdsadsdadadadsadasda dff
        dfpsdfd[sg]<br> dsfsfspdgsd
        sdfpisdpg
    </p>
</div>
<style>
    #box{
        user-select: none;
    }
</style>

伪类结构选择器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类选择器优先级高于标签

:root
:root 选择器匹配文档根元素。
在 HTML 中，根元素始终是 html 元素。

html{}
/*  */
:root{
    backgroundColor:orange
}

:not

这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 table 内部的 a 上, 因为 tr将会被 :not(table) 这部分选择器匹配。

/* 非 <p> 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
/* not里面放的是其他选择器  */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

<div class="one">
    one
</div>
<div>
    <div class="two">
        two
    </div>
</div>
<style>
    /* :not(.one) {
        color: red;
    } */

    /* body:not(.one) {
        color: red;
    } */

    /* 只有这个生效 */
    div:not(.one) {
        color: red;
    }
</style>

:empty

<div class="box"><!--有注释的元素--></div><!--empet生效-->
<div class="box">这是空的元素</div>
<div class="box">
    <!--有换行的元素-->
</div>
<style>
    .box{
        background-color: red;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }
    .box:empty{
        background-color: blue;
    }
</style>

:target
a标签对应的锚点

<h4 id="one">h4</h4>
<p id="two">p</p>
<a href="#one">锚点测试h4</a>
<a href="#two">锚点测试p</a>

<style>
    :target{
        background-color: red;
    }
</style>

:firest-child
:last-child
:nth-child(an+b) an+b=1第一个
:nth-last-child(n) n=2倒数第二个
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type

<div>
    <p>第一个子元素</p> 
    <h1>第二个子元素</h1>
    <span>第三个子元素</span>
    <span>第四个子元素</span>
</div>

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。
然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢
p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
14. :onle-child
CSS伪类:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.

/* Selects each <p>, but only if it is the */
/* only child of its parent */
p:only-child {
  background-color: lime;
}
/* 选择main 下面 是父元素唯一的子元素 */
main :only-child {
  color: red;
}

伪类内容选择器

first-line first-letter
伪类选择器 first-line first-letter

只能在块级元素中生效

<div id="box">
    <p>sdasd dfd dfsdfsdsadsdadadadsadasda dff
        dfpsdfd[sg]<br> dsfsfspdgsd
        sdfpisdpg
    </p>
</div>
<style>
    #box{
        width:100px;
        word-wrap: break-word;
    }
    /*表示获取内容的第一行*/
    #box:first-line {
        color: aqua;
    }
    /*表示获取内容的第一个字*/
    #box:first-letter {
        font-size: 50px;
    }
</style>

关系选择器

关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~，还有+等，这些都是非常常用的选择器。

后代选择器：选择所有合乎规则的后代元素。空格连接。
并列选择器：选择器之间不需要加空格
直接子元素选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略。>连接。
一般兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。
相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。

h1+p{color:red;}
<h1>h1元素</h1>
<p>第一个元素red</p>
<p>第二个元素</p>

文本

文本阴影 text-shadow

文字换行 word-wrap,overflow-wrap

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

normal
行只能在正常的单词断点处中断。（例如两个单词之间的空格）。
break-word
表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
对于英文默认换行规则半角空格和连字符
对于中文,任何单字都是一个单独的单词,都会换行,浏览器对于中文,标点符号不能出现在行首
- 解决,换行处标点符号加空格
与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

文字断行word-break

normal
使用默认的断行规则。同word-wrap的normal
break-all
对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-CJK 文本表现同 normal。
break-word
他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。
注意：与 word-break: break-word 和 overflow-wrap: break-word 对比，word-break: break-word 将在文本可能溢出其容器的确切位置创建一个断点。

white-space

https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

normal
连续的空白符会被合并，换行符会被当作空白符来处理。文本会自动在空白符出换行。
nowrap
和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre
连续的空白符会被保留。在遇到换行符或者br元素时才会换行。 (文本原样显示)
- pre-wrap(…会自动换行)
  …或者需要为了填充「行框盒子(line boxes)」时才会换行。
- pre-line(…合并空白符,会自动换行)
  连续的空白符会被合并。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时会换行。
break-spaces
与 pre-wrap的行为相同，除了：
任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

text-overflow单行文本溢出成小圆点

<body>
    <div class="wscont">
        前面也空格了哦,傳前至家法入到飛成子能體點有自習且著就等急且用而四，
        前面也空格了哦,家公看成久各食等海灣整似,这里也有空格哦們等急且用而四，家公看成久各食等海灣整似。
    </div>
</body>
<style>
    .wscont {
        width: 300px;
        border: 1px solid #bababa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
</html>

语法

css声明,声明以;隔开
css声明块,以{}的形式组合起来
css规则集合,简称css规则
css层叠算法,决定哪个优先级更高

at规则 @keyframes
@charset
@import
@namespace
@media
@font-face

@font-face

<link href="https://fonts.font.im/css?family=Kirang+Haerang" rel="stylesheet">
<!-- 如果需要引用在线字体，首先需要找到在线字体，国内推荐谷歌字体，
http://www.googlefonts.cn/specimen/Kirang+Haerang?selection.family=Kirang+Haerang
 -->
<body>
    <h2>local font</h2>
    <h2 style="font-family:'Kirang Haerang' ;">online font</h2>
</body>
<style>
    /*引入外部字体文件*/
    @font-face {
        font-family: myFirstFont;
        /* font-family就是之后使用时候的字体名称了，如此一来CSS中就可以直接使用本地的字体了 */
        /*eot格式兼容IE*/
        src: url(fonts/AdineKirnber.eot);
        /*ttf格式兼容非IE*/
        src: url(fonts/AdineKirnber.ttf);
    }

    h1 {
        font-family: myFirstFont;
        font-size: 4em;
    }
</style>
</html>

布局

columns

<‘column-width’> || <‘column-count’>

https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns

<p class="content-box">
    This is a bunch of text split into three columns
    using the CSS `columns` property. The text
    is equally distributed over the columns.
</p>
<style>
    .content-box {
        border: 2px solid red;
        width: 450px;
        /* 分为三列 */
        /* columns: 3; */
        /* column-count: 3; */

        /* 每列100px。最多5列 */
        /* columns: 100px 5; */
        
        /* column-width: 225px;*/
        
        /* 每列100 共四列 */
        column-width: 100px;
        
        /* 间隔空白的大小 */
        column-gap: 2em;

        /* 间隔边框 不是最外边的边框*/
        /* column-rule: 1px solid red; */

        /* 同上 */
        column-rule-width: 5px;
        column-rule-style: ridge;
        /* dotted dashed solid double groove ridge inset outset*/
        column-rule-color: red;
    }  
</style>
``
* 可以通过父级元素的字体大小font-size 控制间隔符的大小
* 但也会影响父级元素下的其他字体元素
* 建议使用column-gap 控制间隔的大小（gap是间隙的意思）

* 设置标题 column-span
```html
<div class="content-box">
    <h5>TITLE</h5>
    <p>This is a bunch of text split into three columns</p>
    <p>using the CSS `columns`property. </p> 
    <p>>The textis equally distributed over the columns.</p>
</div>
<style>
    .content-box {
        border: 2px solid red;
        width: 450px;
        column-count: 3;
        column-rule: 2px solid red;
    } 
    h5{
        text-align: center;
        column-span: all;
    } 
</style>

颜色

英文

16进制

RGB

RGBA

a代表透明度0.0-1

background-color: rgba(0,0,0,.5);
/* rgba(0,0,0,0.5); */

hsl

background-color: hsl(120,70%,12%);
/* hue色调-360~360的整数 saturation饱和度百分比 light亮度百分比; */

hsla

渐变色background-image

渐变色实际上是一种图片

<div></div>
<style>
    div {
        width: 100px;
        height: 100px;
        /* 线性渐变 */
        /* background-image: linear-gradient(red,green); */
        /* background-image: linear-gradient(red 0,green 100%); */
        /* background-image: linear-gradient(red 0,yellow 50%,green 100%); */
        background-image: linear-gradient(to right,red 0,yellow 50%,green 100%);
        background-image: linear-gradient(to top right,red 0,yellow 50%,green 100%);
        background-image: linear-gradient(65deg,red 0,yellow 50%,green 100%);
    } 
</style>

布局2

flex一维布局

viewport

<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 
        1px就是1个像素，而1个像素就是屏幕上一个点的大小，这个点究竟有多大，是由显示器的分辨率以及显示器的物理尺寸来决定的，比如电脑的显示器有1920像素的（指宽度），手机的屏幕也有1920像素的（指高度），但是手机屏幕的物理尺寸却比电脑显示器小得多，这就是说手机上的1个像素大小要比电脑显示器的1个像素要小得多！
        content属性值 :
            width:可视区域的宽度，值可为数字或关键词device-width
            height:同width
            intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
            maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
            maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
            user-scalable:是否可对页面进行缩放，no 禁止缩放
     -->
<!-- flex中文名叫弹性盒子
    以子元素的排列方向为基准分为主轴和交叉轴 

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。
目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

容器的属性
以下6个属性设置在容器上(display: flex;/ inline-flex;)。
flex-direction 决定主轴的方向（即项目的排列方向）。
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
    nowrap（默认）：不换行。
    wrap：换行，第一行在上方。
    wrap-reverse：换行，第一行在下方。
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 定义了项目在主轴上的对齐方式。(存在剩余空间的时候设置间距)
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 属性定义子项目在交叉轴上如何对齐。
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用(即主轴出现了换行之后就会生效)
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。
flex-basis 设置所有项目宽度，设置后width失效。如果为350px，则所有的项目将占据固定空间350px。也可以在项目中单独设置，会覆盖此属性

子项目的属性
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 不常用
flex-basis 基准值 参考容器的flex-basis属性
flex-grow   扩充比例。存在剩余空间时的处理方法 默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间
flex-shrink 缩小比例。空间不足时的处理方法   默认为1，即如果空间不足，该项目将缩小。
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
     该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
     300px (1,1,300px)
     30% (1,1,30%)

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto。
           该属性可能取6个值，除了auto，其他都与align-items属性完全一致。-->

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
容器的属性
1. flex-direction: 决定主轴的方向（即项目的排列方向）
  flex-direction: row | row-reverse | column | column-reverse;
2. flex-wrap: flex-wrap属性定义，如果一条轴线排不下，如何换行。
  flex-wrap: nowrap | wrap | wrap-reverse;
3. flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4. justify-content: 定义了项目在主轴上的对齐方式。
  justify-content: flex-start | flex-end | center | space-between | space-around;
5. align-items: 定义项目在交叉轴上如何对齐。
  align-items: flex-start | flex-end | center | baseline | stretch;
  - stretch 如果子元素没有设置高度,此时高度拉满
6. align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目的属性
1. order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3. flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）.浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
  - flex-basis: 100%;此项将占据整轴,没有剩余空间
5. flex: flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
阮一峰骰子布局和圣杯布局
6个骰子布局

<!-- 
□ □ □
  □
□   □  
-->
<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>
<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: black;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
    }

    .item:nth-child(4){
        flex-basis: 20%;
        margin: 0 40%;
    }

    .item {
        margin: 10px;
        background-color: yellowgreen;
        width: 60px;
        height: 60px;
    }
</style>

HTM5圣杯布局

<html>
<head>
    <style>
        header,
        section,
        footer,
        main,
        nav,
        aside {
            outline: 2px solid;
            margin: 5px;
        }

        /* 以下为整个页面的布局 */
        body {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* 从上到下3个子元素,中间子元素设为自扩大 */
        header,
        footer {
            height: 50px;
        }

        section {
            flex: 1;
            display: flex;
        }

        /* 左右固定大小 中间自适应 */
        nav,
        aside {
            width: 100px;
        }

        main {
            flex: 1;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <header>标题栏top</header>
    <section>
        <nav>左边导航栏left</nav>
        <main>主内容main，自动伸缩</main>
        <aside>右边right提示栏</aside>
    </section>
    <footer>页脚栏footer</footer>
</body>
</html>

京东布局-todo

<style>
    body {
        margin: 0;
        background-color: #f2f3ef;
    }

    h3 {
        font-weight: normal;
        margin: 0;
    }

    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    i {
        font-size: normal;
    }

    ul,
    li,
    div {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
    }

    img {
        width: 100%;
    }

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    /* ul::after,
    div::after{
        content: "";
        display: block;
        clear: both;
    } */

    .floor-header{
        border: 1px solid black;
        width: 1190px;
        height: 45px;
        line-height: 45px;
        text-align: center;
    }
    .floor-header h3{
        /* border: 1px solid black; */
        position: relative;
        width: 150px;
        height: 45px;
        margin: 0 auto 20px;/*居中*/
        padding: 0 50px; /*撑开横线*/
    }
    /* 设置两边短线 */
    .floor-header h3::after,
    .floor-header h3::before{
        content: "";
        display: block;
        position: absolute;/*相对于h3的内部*/
        top: 50%;
        width: 50px;
        height: 3px;
        background-color: #000;
    }
    .floor-header h3.floor-title::before{
        left: 0;/*相对于元素的内部 left>0 向左 left<0 向右*/
    }
    .floor-header h3.floor-title::after{
        right: 0;
    }

    /* --------------------- */
    .show-wrapper{
        width: 1190px;
        height: 450px;
    }
    .show-wrapper .show-box{
        float: left; /* 块级元素一排显示 */
        width: 390px;
        height: 100%;
        background-color: #fff;
        margin-right: 10px;
    }
    .show-wrapper .show-box.last{
        margin-right: 0;
    }
    .show-wrapper .show-box .show-header{
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
    }
</style>
<body>
    <div class="floor-header">
        <h3 class="floor-title">智能先锋</h3>
    </div>
    <div class="show-wrapper">
        <div class="show-box left-box">
            <!-- div.show-header>a>h3+i+span  -->
            <div class="show-header">
                <a href="javascript:;">
                    <h3 class="show-hd-title">手机频道</h3>
                    <i class="icon-arrow"></i>
                    <span class="show-subtitle">一个极客的诞生</span>
                </a>
            </div>
        </div>
        <div class="show-box middle-box"></div>
        <div class="show-box right-box last"></div>
    </div>
</body>

grid二维布局

两个主轴xy
二维布局

动画

Value_definition_syntax

组合符号 :https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax

transforms属性:transform-origin,transform

transform-origin
指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
transform
指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。
https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function
https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle
笛卡尔坐标系和右手定则
- 伸出右手拇，食，中三指成垂直状，拇指——对应x轴正向；食指——对应y轴正向；中指——对应z轴正向。
- CSS 3D转换采用的是左手坐标系,Z轴正向面向屏幕。

transform-function Scale, Rotate, Translate and Skew

Scale 缩放的作用就像你可以放大和缩小目标元素。默认的比例值是1，它是原始大小的乘数
Rotate 180°的翻转会使物体上下颠倒，360°的翻转则会使物体回到原来的直立位置。
Translate
Skew 在水平轴(X)或垂直轴(Y)上倾斜对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            top: 200px;
            /* 居中的写法 */
            /*
            1. left: 50%;
            margin-left: -150px; 
            2. left: calc(50% - 150px);
            */
            left: calc(50% - 150px);
            width: 300px;
            height: 300px;
            padding: 50px;
            border: 1px solid #000;
        }
        .box::before{
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            z-index: 9;
            width: 400px;
            height: 3px;
            background-color: #000;
            
        }
        .box::after{
            content: "";
            position: absolute;
            left:50%;
            top: 0;
            z-index: 9;
            width: 3px;
            height: 400px;
            background-color: #000;
            
        }
        .inner{
            width: inherit;
            height: inherit;
            background-color: orange;
            transform: rotate(70deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner"></div>
</div>
</body>
</html>

rotate(a)
- 通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
- rotate3d(x, y, z, a)
- rotateX(a)是 rotate3D(1, 0, 0, a)的简写形式。
- rotateY(a) 是 rotate3D(0, 1, 0, a) 的简写形式。
- rotateZ(a) 是 rotate3D(0, 0, 1, a) 的简写形式。
scale(sx) or scale(sx, sy)
- scale3d(sx, sy, sz)
- scaleX(s)
- scaleY(s)
- scaleZ(s)
skew(ax)或skew(ax, ay)
- skewX(a)
- skewY(a)
translate(tx)或translate(tx, ty)
- translate3d(tx, ty, tz)
- translateX(t)
- translateY(t)
- translateZ(t)
- transform: translate(120px, 50%);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zHdqTVIE-1652096408709)(https://gitee.com/jingyu7/pic/raw/master/202112311301597.png)]

transitions过渡

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

transition-property
指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
- 默认值是all;所有属性
transition-duration
指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长
- 默认值是easy
transition-delay
指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
transition-timing-function
指定一个函数，定义属性值怎么变化。
缓动函数 Timing functions 定义属性如何计算。
- ease：默认值，逐渐变慢
- linear：匀速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速，后减速
- 贝塞尔曲线(也叫三次贝塞尔曲线)(cubic-bezier):cubic-bezier(x1, y1, x2, y2)
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8f0qL8c-1652096408710)(https://gitee.com/jingyu7/pic/raw/master/202112302323858.png)]
  P0：默认值 (0, 0)
  P1：动态取值 (x1, y1)
  P2：动态取值 (x2, y2)
  P3：默认值 (1, 1)

transition简写语法：后面可以写多组属性动画,以逗号分隔

div {
    transition: <property> <duration> <timing-function> <delay>;
}

transition实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            top: 200px;
            left: calc(50% - 150px);
            width: 300px;
            height: 400px;
            background-color: orange;
        }
        div:hover{
            transform: rotate(90deg);
            transition-property: transform;
            transition-duration: 1.5s;
            transition-delay:.5s;
            transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
 <div></div>
</body>
</html>

transition多个属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            top: 200px;
            left: calc(50% - 150px);
            width: 300px;
            height: 400px;
            background-color: orange;
        }
        div:hover{
            width: 100px;
            height: 100px;
            transform: rotate(90deg);
            transition: transform 2s , width 2s ,height 2s;
        }
    </style>
</head>
<body>
 <div></div>
</body>
</html>

Animation动画

animation-name
https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-name
animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

@keyframes
from等价于 0%。
to等价于 100%。
percentage 动画序列中触发关键帧的时间点，使用百分值来表示。

@keyframes slidein {
from {
    transform: translateX(0%); 
}

to {
    transform: translateX(100%);
}
}

重复定义
如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。
属性个数不定

/* 如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉） */
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
/* 例子中，top 属性分别出现在关键帧 0%、30% 和 100% 的中，而 left 属性分别出现在关键帧 0%、68%、72% 和 100% 中。 */

同一关键帧中的相同属性被重复定义

/* 如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。 */
@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}

关键帧中的 !important

@keyframes important1 {
from { margin-top: 50px; }
50%  { margin-top: 150px !important; } /* 忽略 */
to   { margin-top: 100px; }
}

animation-duration
animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。
animation-timing-function
animation-delay
animation-iteration-count
- infinite无限循环播放动画.
- number 定义动画在结束前运行的次数可以是1次无限循环.
- 如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。
animation-direction
指示动画是否反向播放 reverse
animation-fill-mode
设置CSS动画在执行之前和之后如何将样式应用于其目标
- none
  动画未执行前不会有动画样式,动画结束后,动画样式消失
- forwards
  动画结束后保留动画最后一个关键帧样式
- backwards
  动画在延迟执行之前就立即应用第一个关键帧中定义的值
- both
  动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
animation-play-state
定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
- running
  当前动画正在运行。
- paused
  当前动画已被停止。

animation初始值

/* as each of the properties of the shorthand: */
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

animation语法

/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;
/* @keyframes name | duration */
animation: slidein 3s;

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .polling_message {
            color: white;
            float: left;
            margin-right: 2%;
        }

        .view_port {
            background-color: black;
            height: 25px;
            width: 100%;
            overflow: hidden;
        }

        .cylon_eye {
            background-color: red;
            background-image: linear-gradient(to right,
                    rgba(0, 0, 0, .9) 25%,
                    rgba(0, 0, 0, .1) 50%,
                    rgba(0, 0, 0, .9) 75%);
            color: white;
            height: 100%;
            width: 20%;
            animation: 4s linear 0s infinite alternate move_eye;
        }

        /* keyframes定义动画的实现 帧 */
        @keyframes move_eye {
            from {
                margin-left: -20%;
            }

            to {
                margin-left: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="view_port">
        <div class="polling_message">
            Listening for dispatches
        </div>
        <div class="cylon_eye"></div>
    </div>
</body>
</html>

transform-function perspective() perspective-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective()
perspective(d) d>=0 best >>0
Sets the distance between the user and the z=0 plane.

transform-function translate3d()

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate3d()

translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

translate3D 可以调用GPU进行3D加速
translate 因为是 2D 移动，所以不能调用GPU进行3D加速
translate3D 可以在一个 z-axis （Z轴）方向进行移动，正值会感觉元素离你更近，负值会感觉更远，不像translate只能平移。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translateZ
translate 是二个维度的向量
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate
translate3D 是三个维度的向量
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate3d
translate3D 和 translate 都有的 X 和 Y 移动

transform-style

设置元素的直接子元素是位于 3D 空间中还是平面中。

flat
设置元素的子元素位于该元素的平面中。
preserve-3d
指示元素的子元素应位于 3D 空间中。

backface-visibility

指定当元素背面朝向观察者时是否可见。
元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。（此属性对 2D 变换没有影响，它没有透视。）

visible
背面朝向用户时可见。
hidden
背面朝向用户时不可见。

3种居中写法和3D动画加速

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            /* 使容器内元素居中 */
            /* 1. 容器设置padding,容器内元素宽高设为100% */
            /* padding: 100px; */
            /* 2. flex弹性布局 */
            /* 3. 绝对定位:容器相对定位,容器内元素绝对定位 */
            /* 3.1 容器内元素,top,left:50%;margin-left,margin-top为元素对应高宽的一半 */
            /* 3.2 使用calc 直接设置*/
            /* 3.3 容器内元素,top,left:50%;使用transform: translate(-width,-height); */
            /* 3.4 对于容器内元素宽高不定的情况可以设置 transform: translate(-50%,-50%);  3.5 也可以开启GPU加速 transform: translate3d(-50%, -50%, 0);
            */
            position: relative;
            background-color: green;

            transform-style: preserve-3d;
            opacity: .7;
        }
        .box{
            /* height: 100%;
            width: 100%; */
            background-color: orange;

            width: 100px;
            height: 100px;
            position: absolute;
            /* top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px; */
            /* top: calc(50% - 50px);
            left: calc(50% - 50px); */

            top: 50%;
            left: 50%;
            /* transform: translate(-50px,-50px); */
            font-size: 20px;
            /* 方案3几种方式都是对容器内的元素宽高已知的情况下设置的 */
            /* 加入容器内的元素是一个块文本,而文本内容不确定,如何设置 */
            /* transform: translate(-50%,-50%);  */

            /* 模拟z-index, 容器要设置 transform-style: preserve-3d; */
            /* transform: translateZ(-1px); */
            transform: translate3d(-50%,-50%,-1px);

            /* transform:xx3d属性 会开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能的一系列活动。 */
            /* GPU固然加速了网页，但是同时它增加了内存的使用，如果3d动画过多可能会导致严重的性能问题 */
            /* 平时我们写的css3动画（没有触发硬件加速的）都是使用浏览器软件渲染引擎来执行,浏览器会自动对css树进行优化*/
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">this is a test</div>
    </div>
</body>
</html>

响应式设计

视口

viewport视口:宽度为设备宽度.初始大小为1倍

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询@media

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

媒体类型
媒体类型（Media types）描述设备的一般类别。
除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。
- all
  适用于所有设备。
- screen
  主要用于屏幕。一般都是使用这个类型

媒体查询引入方式

内联样式 2种写法
- style>media
- style中media属性
外部样式 2中写法
- link中media属性
- style>import meida

<html>
<style>
    #div {
        margin: 15em auto;width: 250px;height:  250px;
    }
    /* 1. 定义子style标签里面 */
    @media screen and (min-device-width:100px) and (max-device-width:500px) {
        #div {
            background-color: red
        }
    }
    @media screen and (min-device-width:501px) and (max-device-width:1000px) {
        #div {
            background-color: green
        }
    }
</style>
<!--2. media直接写在style属性里 -->
<style media="(min-device-width:1001px) and (max-device-width:2000px)">
    #div {
        background-color: yellow
    }
</style>
<!-- 1. media 写在link中引入外部样式表 -->
<!-- <link href='css/test.css' ref="stylesheet">  -->
<link href='css/test.css' ref="stylesheet" media="(min-device-width:0px) and (max-device-width:100px)"> 

<style>
    /* 2. import media引入外部样式*/
    /* style中可以使用import引入外部css文件 */
    @import url(css/test.css);
    /* 也可以使用媒体查询 */
    @import url(css/test.css) screen and (min-device-width:0px) and (max-device-width:100px);
</style>
<div id="div"></div>
</html>

link和import的区别
- 本质的差别：link属于XHTML标签，而@import是CSS提供的语法。
- 加载顺序的差别：link是异步加载,@import同步加载,需要等待css资源下载完成
- 兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，而link标签无此问题。
- DOM控制:link支持使用Javascript控制DOM去改变样式；而@import不支持。
- 权重:link的权重高于@import × @import权重等于link,谁在后显示谁×
  import css 加载机制
  - @import url(./test.css); 必须写在css文件或style的开头,否则不生效
  - 所以我们的import会写在普通css的前面, 被后面的普通样式覆盖
  - 后面导入的样式会覆盖前面的
```
@import url('./test.css'); /* background-color: red */
/*@import url(./test.css);*/
@import url('./test2.css'); /* background-color: green; */
body{
    background-color: blue
}
```

媒体查询中的逻辑运算和视口方向

视口方向orientation:landscape(横屏) | portrait(竖屏)

与 and

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

或 ,逗号分开

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

非,not

/**你可以用not操作符让整个媒体查询失效。这就直接反转了整个媒体查询的含义。
因而在下面的例子中，文本只会在朝向为竖着的时候变成蓝色。*/
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}
@media not screen and (min-width: 400px) {
    body {
        color: blue;
    }
}

em rem

https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

em 相对长度单位，这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身，它则表示元素继承的 font-size 值。
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
- font-size在很多地方都会被设置,对布局影响较大,所以出现了rem

rem 相对于根标签html的font-size的大小

动态设置html font-size

    document.documentElement.style.fontSize 
    = document.documentElement.clientWidth / 37.5 + 'px'

最佳实践: rem + 媒体查询

<html>
<head>
    <style>
        html{font-size: 12px;}
        .b{ font-size: 1rem;}
        .c{ font-size: 3rem;}
        /* 竖屏 */
        @media screen and (orientation:portrait) {
            .a{ font-size: 3rem;}
        }
        /* 横屏 */
        @media screen and (orientation:landspace) {
            .a{ font-size: 1rem;}
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p class="a">横屏是1个rem,竖屏是3个rem</p>
        <p class="b">我是1个rem</p>
        <p class="c">我是3个rem</p>
    </div>
</body>
</html>

webkit属性

-webkit-appearance

https://developer.mozilla.org/zh-CN/docs/Web/CSS/appearance
用于按照浏览器所在的操作系统所用主题，以平台本地的样式显示元素。

模拟button样式,只能手机上显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        div{
            width: 500px;
            -webkit-appearance: button; 
            -moz-appearance: button;
        }
    </style>
</head>
<body>
    <div>divButton</div>
</body>
</html>

-webkit-filter.filter滤镜属性

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
将模糊或颜色偏移等图形效果应用于元素。
滤镜通常用于调整图像，背景和边框的渲染。

/* 模糊 */
filter: blur(5px);

blur() 函数将高斯模糊应用于输入图像
brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。
值为 0％将创建全黑图像。
值为 100％会使输入保持不变。
其他值是效果的线性乘数。
如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。
contrast() 函数可调整输入图像的对比度。
值是 0% 的话，图像会全黑。
值是 100%，图像不变。
值可以超过 100%，意味着会运用更低的对比。
若没有设置值，默认是 1。
opacity() 转化图像的透明程度。

webkit-line-clamp

-webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数.
https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,
并且在内容显示为指定行数后还会显示省略号(ellipsis ).

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

-webkit-text-fill-color

The -webkit-text-fill-color CSS property specifies the fill color of characters of text.
If this property is not set, the value of the color property is used.

<head>
    <style> 
        p {
        margin: 0;
        font-size: 3em;
        -webkit-text-fill-color: green;
        }
    </style>
</head>
<body>
    <p>This text is green.</p>
</body>

-webkit-text-stroke文字描边

为文本字符指定了宽和颜色 .

p{
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

-webkit-box-reflect文字倒影

p{
   -webkit-box-reflect: below 0 linear-gradient(transparent, white); 
}

设备像素和设备独立像素

设备像素
又称物理像素（physical pixel），设备能控制显示的最小单位
我们常说的分辨率指的就是物理像素，比如 iphone 6S Plus 的分辨率是 1920x1080，表示横向有 1920 个物理像素，竖向有 1080 个物理像素。
设备独立像素(DIP)
Device Independent Pixels 的简写。
独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。
所以它只是一个虚拟像素单位，那么为什么会有这种虚拟像素的产生呢？举个例子，iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960，这也就是意味着同样长度的屏幕，iPhone 3GS 有 320 个物理像素，iPhone 4/4s 有 640 个物理像素。如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位。