css 中值与单位的查缺补漏
2019-02-25 本文已影响1人
贵在随心
1、css 中 值 的表示
1.1、整数（integer）
一种数据类型，整数包括正整数，负整数和零。
1.2、实数（Real Numbers）
在 css 规范中，数字可以是整数，也可以是零或多个十进制数字，后面跟着一个点(.)，后面跟着一个或多个十进制数字，还可以是由“e”或“e”和一个整数组成的指数。
1.3、维度☞（Dimension Values）
所谓维度值：即带有单位的数值。在 css 中，维度值专指长度（length）、时间（time）、频率（frequency）、分辨率（resolutions）及其它参量。
1.4、百分比（Percentage）
这个就没啥好说的啦。
1.5、百分比和维度值混合使用
在 calc()表达式 中，clac()兼容性，可以混合使用。如下代码示例：
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
}
:root {
font-size: calc(100vw / 40);
}
.foo {
background: url(top.png), url(bottom.png);
background-repeat: no-repeat;
background-position: 50% 50%, calc(50% + 20px) calc(50% + 20px);
}
.foo {
background-image: linear-gradient(to right, silver,
white 50px,
white calc(100% - 50px),
silver);
}
2、css 单位
2.1 相对单位
参看之前的文章 前端用到的那些单位。
2.2 绝对单位
绝对单位包括：cm, mm, Q, in, pt, pc, px。
所有的绝对单位都是兼容的，这里是以 px（像素单位）为规范单位，下图是各个单位与 px 之间的转换关系：
绝对单位与px之间的转换关系
代码示例：
h1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h3 { letter-spacing: 1Q } /* quarter-millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
p { font-size: 12px } /* px */
3、其它参量单位
3.1 角度（Angle）
角度单位包括：deg，grad， rad， turn。
deg：度（degree），一个完整的圆有360 度。
grad：梯度（gradient），一个完整的圆有 400 个梯度。
rad：弧度（radian），一个完整的圆有 2π 弧度。
turn：转、圈（turn），一个圆就是一圈。
例如：
一个直角 = 90deg = 100grad = 0.25turn ≈ 1.57rad
一般而言，当一个角度在 CSS 中表示一个方向时，它通常被解释为一个方位角，其中 0deg 在屏幕上是“上”或“北”，而较大的角度则按顺时针方向(因此 90deg 是“右”或“东”)。
代码示例：
linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);
渐变结果
3.2 时间（time）
时间单位包括： s， ms
s: 秒（seconds）
ms：毫秒（milliseconds）, 1s = 1000ms
3.3 频率（frequency）
频率单位分为： Hz，kHz。
Hz：赫兹，表示每秒钟发生的次数
kHz： 1kHz = 1000Hz
3.4 分辨率（resolution）
分辨率单位分为： dpi，dpcm， dppx。
dpi：每英寸包含点的数量（dots per inch）
dpcm：每厘米包含点的数量（dots per centimeter）
dppx：每像素包含点的数量（dots per pixel）
三者之间的关系如下：
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
代码示例：
@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }
4、知识点运用
4.1 灵活的背景定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>灵活的背景定位</title>
<style type="text/css">
body {
background-color: #fff;
}
.bg-position {
margin: 50px auto;
width: 600px;
background: #f0f url("img/i_bookmark1.png") right bottom no-repeat;
background-position: right 20px bottom 10px;
}
.bg-origin {
margin: 50px auto;
padding: 20px;
width: 600px;
background: #f0f url("img/i_bookmark1.png") right bottom no-repeat;
background-origin: content-box;
}
.bg-calc {
margin: 50px auto;
padding: 20px;
width: 600px;
background: #f0f url("img/i_bookmark1.png") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
}
</style>
</head>
<body>
<div class="bg-position">
1、利用 background-position 的扩展语法<br /> background-position: right 20px bottom 10px;<br /> 1、在所要设置的偏移量前设置top、right、bottom、left关键字
<br /> 2、为了向前兼容，需要设置：background：url() no-repeat right bottom color;<br /> background-position: right 20px bottom 10px;
</div>
<div class="bg-origin">
2、用 background-origin 的属性<br /> 有三个属性值：border-box、padding-box（默认）、content-box
<br /> 要实现与上面相同的效果：需要借助 padding 这个内边距 和 content-box 俩实现
</div>
<div class="bg-calc">
3、calc（）方案<br /> 与上实现同样的效果：background: url() no-repeat color;<br /> background-position: calc(100% - 20px) calc(100% -10px);<br /> 注意点：calc()函数内部的 - 和 + 运算符两侧必须加一个空格符，避免产生解析错误
</div>
</body>
</html>
4.2 通过阴影来弱化背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>用阴影弱化背景：box-shadow</title>
<style type="text/css">
.lightbox {
position: fixed;
height: 2000px;
width: 500px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);
}
</style>
</head>
<body>
<img src="http://csssecrets.io/images/adamcatlace.jpg" class="lightbox" />
<p style="height: 300px;">Bacon ipsum dolor amet consectetur short loin ut tri-tip alcatra ground round jowl beef meatloaf in pork. Elit chicken ea spare ribs. Shank andouille ex boudin picanha turkey esse. Do doner fugiat tongue.</p>
<p>Pork chop ad cow spare ribs capicola ball tip alcatra cillum magna short ribs tempor. Pork loin do sint magna ea pork belly duis. Shoulder ullamco chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye
enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim.
Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken
porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken
non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo
cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin
venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum
prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip chicken porchetta, ham anim veniam
venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip ham hock non brisket pig cupim commodo ball tip nulla turkey kielbasa corned beef flank. Hamburger pariatur
ham, porchetta cupidatat sirloin pork loin quis nulla culpa tail esse.
</p>
<p>Chuck filet mignon flank pork chop mollit enim veniam sed pork loin aliquip sausage prosciutto in deserunt. Nostrud porchetta non nulla sunt. Cupim et velit picanha laborum salami capicola exercitation alcatra sausage cillum shoulder minim esse. Pig
boudin aliquip aute, tail ut cow incididunt short loin aliqua.
</p>
<p>Et dolor occaecat dolore doner shoulder. Swine pancetta tri-tip irure turducken, kevin est meatball aliqua aute quis ham venison sunt. Consequat pancetta sint beef turkey. Fugiat occaecat commodo, short ribs corned beef aliquip elit eiusmod pork belly
ut eu tri-tip. Sint aute picanha proident corned beef ad beef dolore landjaeger. Laboris est deserunt tempor, bresaola ham hock non brisket frankfurter ad leberkas aute sirloin. Minim et ribeye shank pork loin sint corned beef ball tip dolor.
</p>
<p>Doner alcatra pastrami pig, strip steak eu in frankfurter occaecat in filet mignon chuck short loin nulla meatloaf. Adipisicing aliqua kielbasa nulla proident. Ground round meatloaf kevin, shank adipisicing pork frankfurter t-bone spare ribs cupidatat.
Sed ham non duis enim, in ipsum fugiat est tongue short ribs ad bresaola prosciutto. Non minim picanha, ad in occaecat fugiat veniam dolor deserunt.Bacon ipsum dolor amet consectetur short loin ut tri-tip alcatra ground round jowl beef meatloaf
in pork. Elit chicken ea spare ribs. Shank andouille ex boudin picanha turkey esse. Do doner fugiat tongue.
</p>
<p>Pork chop ad cow spare ribs capicola ball tip alcatra cillum magna short ribs tempor. Pork loin do sint magna ea pork belly duis. Shoulder ullamco chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye
enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip ham hock non brisket pig cupim commodo ball tip nulla turkey kielbasa corned beef flank. Hamburger pariatur ham, porchetta cupidatat sirloin pork loin quis nulla culpa tail
esse.
</p>
<p>Chuck filet mignon flank pork chop mollit enim veniam sed pork loin aliquip sausage prosciutto in deserunt. Nostrud porchetta non nulla sunt. Cupim et velit picanha laborum salami capicola exercitation alcatra sausage cillum shoulder minim esse. Pig
boudin aliquip aute, tail ut cow incididunt short loin aliqua.
</p>
<p>Et dolor occaecat dolore doner shoulder. Swine pancetta tri-tip irure turducken, kevin est meatball aliqua aute quis ham venison sunt. Consequat pancetta sint beef turkey. Fugiat occaecat commodo, short ribs corned beef aliquip elit eiusmod pork belly
ut eu tri-tip. Sint aute picanha proident corned beef ad beef dolore landjaeger. Laboris est deserunt tempor, bresaola ham hock non brisket frankfurter ad leberkas aute sirloin. Minim et ribeye shank pork loin sint corned beef ball tip dolor.
</p>
<p>Doner alcatra pastrami pig, strip steak eu in frankfurter occaecat in filet mignon chuck short loin nulla meatloaf. Adipisicing aliqua kielbasa nulla proident. Ground round meatloaf kevin, shank adipisicing pork frankfurter t-bone spare ribs cupidatat.
Sed ham non duis enim, in ipsum fugiat est tongue short ribs ad bresaola prosciutto. Non minim picanha, ad in occaecat fugiat veniam dolor deserunt.
</p>
</body>
</html>
4.3 紧贴底部的页脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>紧贴底部的页脚</title>
<link rel="stylesheet" type="text/css" href="css/text-3D.css" />
<style type="text/css">
body {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}
/*控制文本的高度:：通过css控制元素的显示和隐藏*/
#contents:checked~p {
display: none;
}
body {
margin: 0;
font: 100%/1.5 Baskerville, Palatino Linotype, Palatino, serif;
}
h1 {
margin: .5em 0 0;
}
header {
text-align: center;
height: 3em;
}
main,
footer {
display: block;
/*控制元素居中设置*/
padding: .5em calc(50% - 400px);
}
footer {
background: linear-gradient(#222, #444);
color: white;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
</header>
<main>
<input type="checkbox" id="contents" /><label for="contents">Toggle contents</label>
<p>Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta. Qui drumstick tail, bacon leberkas shoulder capicola laborum. Minim ipsum bacon, mollit
laboris t-bone pariatur. Ham hock reprehenderit sint beef, sausage pig eiusmod t-bone shankle strip steak.</p>
<p>Cow enim excepteur, boudin dolore lorem magna fugiat consequat voluptate. Picanha fugiat chicken, cupim aliquip magna filet mignon prosciutto ut nostrud. Kielbasa rump frankfurter sunt corned beef. Andouille in cillum deserunt, rump et picanha
landjaeger tongue anim.</p>
<p>Ad meatball ipsum ground round shank. Quis ipsum meatball exercitation. Laborum swine spare ribs, sunt ball tip magna t-bone venison. Velit doner voluptate non occaecat do ribeye kevin strip steak et. Esse biltong shank ribeye dolor pariatur aute
deserunt non est eiusmod pork belly pancetta pork chop. Pork chop id consectetur rump, meatball short loin brisket tail andouille deserunt alcatra irure prosciutto do.</p>
<p>Dolore reprehenderit ex, meatball doner commodo consectetur ea ribeye. Ad aliqua kevin, chuck excepteur minim et cow esse ham hock landjaeger. Alcatra bresaola dolore tempor do, excepteur in velit flank officia dolore meatloaf corned beef picanha.
Eu pancetta brisket eiusmod ipsum aute sausage, culpa rump shoulder excepteur nostrud venison sed pork loin. Tempor proident do magna ground round. Ut venison frankfurter et veniam dolore. Pig pork belly beef ribs kevin, doner exercitation
magna esse shankle.</p>
<p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
<p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
<p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
<p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
</main>
<footer>
<p>利用flexbox 弹性布局来实现页脚紧贴底部；这里需要flex 属性；任何元素只要设置了一个大于0的flex值，就将获得可伸缩的特性；flex值负责控制多个可伸缩元素之间的尺寸分配比例。</p>
</footer>
</body>
</html>
