前端学习之路css3(03)-基础知识

多列

一般情况下，我们是将div分隔成若干行来显示信息的，但是在CSS3中我们还可以将div分隔成若干列来显示布局，一般包含以下属性。

01. column-count

用来设置要分隔的列数，例子。

02. column-gap

用来设置分隔的列之间间隔距离，例子。

03. 分隔样式

column-rule-style，用来设置列与列之间的分隔样式，例子。
column-rule-width，用来设置列与列之间的分隔样式的厚度，例子。
column-rule-color，用来设置列与列之间的分隔样式的颜色，例子。
我们可以通过简写格式来设置列与列之间的样式，column-rule，依次是厚度、样式、颜色，例子。

04. column-span

指定元素跨越多少列，例子。

05. column-width

指定列的宽度，[例子](http://www.runoob.com/try/ try.php?filename=trycss3_column-width)。

更多属性请参照

---

用户界面

在CSS3中添加一些新的用户界面特性来调整元素尺寸、框尺寸、外边框。我们介绍一下三个特性：resize、box-sizing、outline-offset。

resize

是否允许用户去调整一个元素的大小，例子。

box-sizing

属性允许您以确切的方式定义适应某个区域的具体内容，例子。

outline-offset

对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓，轮廓与边框有两点不同：轮廓不占用空间，轮廓可能是非矩形。例子。

更多新增用户界面属性

---

图片

圆角图片
椭圆图片
缩略图1
缩略图2
图片文本-左上角
图片文本-右下角
图片文本-左下角
图片文本-右上角
图片文本-居中
卡片式图片
图片滤镜：CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度)
图片 Modal(模态)

---

按钮

首先，我们来了解一下设置一个按钮的各种属性。

基本属性

• 按钮宽高，默认情况下按钮的宽高自动匹配文本的宽高，也可以用属性width/height自定义宽高，例子。
• 按钮颜色，background-color，例子。
• 按钮大小，font-size，例子。
• 圆角属性，border-radius，例子。
• 边框样式，border：粗细、样式、颜色，例子。

悬停样式

使用hover属性来表示悬停样式，通过属性transition-duration来设置样式过渡的时间，例子。
给出一个简单的，按钮黑底白字，当鼠标放上去后变成白底黑字。

.button{
    background-color: #000000;
    color: #ffffff;
    font-size: 15px;
    padding: 20px;
    border-radius: 4px;
    transition-duration: 0.5s;
    border: none;
}

.button:hover{
    background-color: #ffffff;
    color: #000000;
}

按钮阴影

可以利用box-shadow来给按钮设置阴影样式，例子。

禁用按钮

我们可以将cursor属性设置为not-allowed来禁用一个按钮，和透明度搭配更好用，例子。

按钮组

移除外边距并添加 float:left 来设置按钮组:，例子。

按钮动画

鼠标移动到按钮上后添加箭头标记
点击时添加 “波纹” 效果
点击时添加 “压下” 效果

---

分页

分页实际上就是利用列表样式来实现的，参见。

---

框大小

我们知道一个元素的宽高是如何来计算的呢：宽/高 = width/height + 内边距 + 边框宽(高)度，那么问题就出现了，假如两个元素div1、div2，我们将他们的宽度全都设为200px，它俩都无边框，但是div2的内边距(padding)为50px，那么就出现这种情况，两个宽度设置一致但是实际表现不一致的尴尬情况。如何解决这一情况呢，我们可以将元素的box-sizing属性设置为border-box，这样我们设置width=200px，无论其边框内边距如何设置它实际的宽度就是200px。

解决前例子、解决后例子

---