CSS学习笔记（二十）CSS object-fit 属性,按钮，分页，多列
CSS object-fit 属性
CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。
CSS object-fit 属性
CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。
这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。
一个300x300 像素的图片，如果设置成了 200x300 像素，图片就会被压缩。
图像被压缩以适合 200x300 像素的容器，并且原始宽高比被破坏了。
如果我们使用 object-fit: cover;，它会剪切图像的侧面，保留长宽比，并填充空间
实例
img {
width: 200px;
height: 400px;
object-fit: cover;
}
CSS object-fit 属性的所有值
object-fit 属性可接受如下值：
fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）
CSS 按钮
基本按钮样式
实例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
可悬停按钮
当鼠标移动到按钮上方时，使用 :hover 选择器可更改按钮的样式。
提示：请使用 transition-duration 属性来确定“悬停”效果的速度：
实例
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
禁用的按钮
请使用 opacity 属性为按钮添加透明度（创建“禁用”外观）。
提示：您还可以添加带有 “not-allowed” 值的 cursor 属性，当您将鼠标悬停在按钮上时，该属性会显示 “no parking sign”（禁停标志）：
实例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
按钮分组
删除外边距并向每个按钮添加 float:left，来创建按钮组：
实例
.button {
float: left;
}
垂直按钮组
使用 display:block 取代 float:left 将按钮上下分组，而不是并排：
实例
.button {
display: block;
}
CSS 分页
简单的分页
如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：
实例
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>简单分页</h1>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
活动的可悬停分页
用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：
实例
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h1>活动的可悬停分页</h1>
<p>请把鼠标移动到数字上：</p>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
圆角的活动可悬停分页
如果您需要圆角的 “active” 和 “hover” 按钮，请添加 border-radius 属性：
实例
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
链接之间的空间
提示：如果不想组合页面链接，请添加 margin 属性：
实例
.pagination a {
margin: 0 4px; /* 上下外边距为 0，可灵活修改 */
}
分页尺寸
请使用 font-size 属性更改分页的大小：
实例
.pagination a {
font-size: 22px;
}
居中的分页
如需居中分页，请使用设置了 text-align:center 的容器元素（如
实例
.center {
text-align: center;
}
面包屑
分页的另一种形式是所谓的“面包屑”（breadcrumbs）：
实例
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
CSS 多列
CSS 多列布局
CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：
CSS 多列属性
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
CSS 创建多列
column-count 属性规定元素应被划分的列数。
下面的例子将 <div> 元素中的文本分为 3 列：
实例
div {
column-count: 3;
}
CSS 指定列之间的间隙
column-gap 属性规定列之间的间隔。
下面的例子指定列之间的间距为 40 像素：
实例
div {
column-gap: 40px;
}
CSS 列规则
column-rule-style 属性规定列之间的规则样式：
实例
div {
column-rule-style: solid;
}
column-rule-width 属性规定列之间的规则宽度：
实例
div {
column-rule-width: 1px;
}
column-rule-color 属性规定列之间的规则的颜色：
实例
div {
column-rule-color: lightblue;
}
column-rule-color 属性规定列之间的规则的颜色：
实例
div {
column-rule-color: lightblue;
}
column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。
下例设置了列之间的规则的宽度、样式和颜色：
实例
div {
column-rule: 1px solid lightblue;
}
指定元素应该横跨多少列
column-span 属性规定元素应跨越多少列。
下例规定了<h2> 元素应跨所有列：
实例
h2 {
column-span: all;
}
指定列宽度
column-width 属性为列指定建议的最佳宽度。
下例规定了列的建议最佳宽度应为 100px：
实例
div {
column-width: 100px;
}
CSS 多列属性
