CSS3 新特性(2)

最新推荐文章于 2023-11-06 11:31:21 发布

xiahuaxuanlan1113

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量279

点赞数

分类专栏： css3 文章标签： css3

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS3 是最新的 CSS 标准。

1、css3动画(animation)

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst {
	from {background:red;width:100px}
	to {background:yellow;width:200px}
}
div {
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
}

2、css3多列

将文本内容设计成像报纸一样的多列布局

column-count 指定需要分割的列数
column-gap 指定列与列之间的间隙
column-rule-style 指定了列与列间的边框样式
column-rule-width 指定了两列的边框厚度
column-rule-color 指定了两列的边框颜色
column-rule column-rule-*所有属性的简写
column-span 指定元素要跨越多少列
column-width 指定了列的宽度

3、css3用户界面

用户界面属性： resize、box-sizing、outline-offset

4、css3 box-sizing 属性

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中

5、css3弹性盒（Flex Box）

一种新的布局模式。

根据屏幕大小来调整容器中子元素的布局。

display:flex;

弹性容器属性：
(1) flex-direction: row | row-reverse | column | column-reverse （常用）

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

(2)justify-content: flex-start | flex-end | center | space-between | space-around（常用）

应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐

flex-start：弹性项目向行头紧挨着填充。默认值。
flex-end：弹性项目向行尾紧挨着填充。
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

(3)align-items: flex-start | flex-end | center | baseline | stretch（常用）

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（垂直居中）
baseline：弹性盒子元素与基线对齐。
stretch：默认值。拉伸的效果。

(4)flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;（常用）

指定弹性盒子元素的换行方式。

nowrap - 不换行。默认。可能会溢出容器。
wrap - 换行
wrap-reverse -反转 wrap 排列。

(5)align-content: flex-start | flex-end | center | space-between | space-around | stretch（垂直方向）（常用）

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

弹性子元素属性：
(6)order:<integer>  （常用）

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

(7)align-self: auto | flex-start | flex-end | center | baseline | stretch（常用）

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：紧靠该行的侧轴起始边界。
flex-end：紧靠该行的侧轴结束边界。
center：居中放置。
baseline：与基线对齐。
stretch：拉伸的效果。

(8)flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]（常用）

指定弹性子元素如何分配空间。

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

6、CSS3多媒体查询

@media 规则，针对不同媒体类型可以定制不同的样式规则。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

not: 排除掉某些特定设备，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。
all: 所有设备。

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}