专栏首页魏晓蕾的专栏CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem

CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem

1、CSS 盒模型

元素尺寸

CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小,样式表如下:

属性

说明

CSS版本

width

auto、长度值或百分比

设置元素的宽度

1

height

auto、长度值或百分比

设置元素的高度

1

min-width

auto、长度值或百分比

设置元素最小宽度

2

min-height

auto、长度值或百分比

设置元素最小高度

2

max-width

auto、长度值或百分比

设置元素最大宽度

2

max-height

auto、长度值或百分比

设置元素最大高度

2

// 设置元素尺寸
div {
	width: 200px;
	height: 200px;
}

解释:设置元素的固定尺寸。

// 限制元素尺寸
div {
	min-width: 100px;
	min-height: 100px;
	max-width: 300px;
	max-height: 300px;
}

解释:这一组主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它最大和最小的值。

// auto 自适应
div {
	width: auto;
	height: auto;
}

解释:auto 是默认值,width 在 auto 下是 100%的值,height 在 auto 下是自适应。

// 百分比方式
#a {
	background: silver;
	width: 200px;
	height: 200px;
}
#b {
	background: gray;
	width: 80%;
	height: 80%;
}
<div id="a">
<div id="b">我是 html5</div>
</div>

解释:百分比就是相对于父元素长度来衡定的。

元素内边距

CSS 盒模型中可以设置元素内部边缘填充空白的大小,我们称为内边距。样式表如下:

属性

说明

CSS版本

padding-top

长度值或百分比

设置顶部内边距

1

padding-bottom

长度值或百分比

设置底部内边距

1

padding-left

长度值或百分比

设置左边内边距

1

padding-right

长度值或百分比

设置右边内边距

1

padding

1 ~ 4 个长度值或百分比

简写属性

1

// 设置四个内边距
div {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
// 简写形式,分别为上 10px、右 10px、下 10px、左 10px
div {
	padding: 10px 10px 10px 10px;
}
// 简写形式,分别为上 10px,左右 50px,下 200px
div {
	padding: 10px 50px 200px;
}
// 简写形式,分别是上下 10px,左右 20px
div {
	padding: 10px 20px;
}
// 简写形式:上下左右均 10px
div {
	padding: 10px;
}
元素外边距

CSS 盒模型中可以设置元素外部边缘填充空白的大小,我们称为外边距。样式表如下:

属性

说明

CSS版本

margin-top

长度值或百分比

设置顶部外边距

1

margin-bottom

长度值或百分比

设置底部外边距

1

margin-left

长度值或百分比

设置左边外边距

1

margin-right

长度值或百分比

设置右边外边距

1

margin

1 ~ 4 长度值或百分比

简写属性

1

// 设置四个外边距
div {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
// 简写形式,分别为上 10px、右 10px、下 10px、左 10px
div {
	margin: 10px 10px 10px 10px;
}
// 简写形式,分别为上 10px,左右 50px,下 200px
div {
	margin: 10px 50px 200px;
}
// 简写形式,分别是上下 10px,左边 20px
div {
	margin: 10px 20px;
}
// 简写形式:上下左右均 10px
div {
	margin: 10px;
}
处理溢出

当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。溢出主要朝两个方向:右侧和底部。我们可以通过 overflow 系列样式来控制它。

属性

说明

CSS版本

overflow-x

溢出值

设置水平方向的溢出

3

overflow-y

溢出值

设置垂直方向的溢出

3

overflow

溢出值

简写属性

2

溢出处理主要有四种处理值:

说明

auto

浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条,否则就不显示滚动条

hidden

如果有溢出的内容,直接剪掉

scroll

不管是否溢出,都会出现滚动条。但不同平台和浏览器显示方式不同

visible

默认值,不管是否溢出,都显示内容

// 设置溢出为 auto 值
div {
	overflow-x: auto;
}
元素可见性

使用 visibility 属性可以实现元素的可见性,这种样式一般可以配合JavaScript来实现效果。样式表如下:

属性

说明

CSS版本

visibility

visible

默认值,元素在页面上可见

2

hidden

元素不可见,但会占据空间

2

collapse

元素不可见,隐藏表格的行与列,如果不是表格,则和 hidden 一样

2

// 设置元素隐藏,但占位
div {
	visibility: hidden;
}
// 隐藏表格的行或列,但不占位,Chrome 和 Opera 不支持
table tr:first-child {
	visibility: collapse;
};
元素盒类型

CSS 盒模型中的 display 属性,可以更改元素本身盒类型。那么元素有哪些盒类型呢?主要有:1. 块级元素(区块);2. 行内元素(内联);3. 行内-块级元素(内联块);4. 隐藏元素。

  1. 块级元素 所谓块级元素,就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p> 等文档元素。
  2. 行内元素 所谓行内元素,不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。比如:<span>、<b>等文本元素。
  3. 行内-块元素 所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>

属性

说明

CSS版本

display

block

盒子为块级元素

1

inline

盒子为行内元素

1

inline-block

盒子为行内-块元素

2

none

盒子不可见,不占位

1

// 将行内元素转成块级元素
span {
	background: silver;
	width: 200px;
	height: 200px;
	display: block;
}
// 将块级元素转换成行内元素
div {
	background: silver;
	width: 200px;
	height: 200px;
	display: inline;
}
// 将块级元素转化成行内-块元素
div {
	background: silver;
	width: 200px;
	height: 200px;
	display: inline-block;
}
// 将元素隐藏且不占位
div {
	display: none;
}
元素的浮动

CSS 盒模型有一种叫浮动盒,就是通过 float 属性建立盒子的浮动方向,样式表如下:

属性

说明

CSS版本

float

left

浮动元素靠左

1

right

浮动元素靠右

1

none

禁用浮动

1

// 实现联排效果
#a {
	background: gray;
	float: left;
}
#b {
	background: maroon;
	float: left;
}
#c {
	background: navy;
	float: left;
}
// 实现元素右浮动
#c {
	background: navy;
	float: right;
}
// 取消元素的浮动
#c {
	background: navy;
	float: none;
}

刚才的浮动有一个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致元素不可见或部分不可见。我们可以使用 clear 属性来处理。

属性

说明

CSS版本

clear

none

允许两边均可浮动

1

left

左边界不得浮动

1

right

右边界不得浮动

1

both

两边都不得浮动

1

// 两边均不可浮动
#c {
	background: navy;
	clear: both;
}

2、边框和背景

声明边框

边框的声明有三个属性设置,样式表如下:

属性

说明

CSS版本

border-width

长度值

设置边框的宽度,可选

1

border-style

样式名称

设置边框的样式,必选

1

border-color

颜色值

设置边框的颜色,可选

1

这三个属性值,只有 border-style 是必须声明,才可以出现边框。而其他两个属性会出现默认值。

// 最简单的边框,边框长度默认 3px,边框颜色为黑色
div {
	border-style: solid;
}
// 配置完整的边框
div {
	border-style: solid;
	border-width: 2px;
	border-color: red;
}

如果元素长和高均为 200px 时,四个边框均为 2 时,元素的长高总尺寸均为 204px。

边框样式

边框的样式主要有三种,分别是边框长度取值、边框的颜色和边框的线条类型。颜色是通用的颜色代码,和所有其他颜色取值一下。而长度和线条类型,边框有自己独到的部分。 边框宽度取值表如下:

说明

长度值

CSS长度值:比如 px、em 等

百分数

直接设置百分数:1、2、3 等

thin

medium

使用长度名称的预设宽度,这三个值的具体意义由浏览器来定义,从小到大依次增大

thick

一般来说,边框为了更加精准,还要计算元素盒子的总尺寸,使用长度值的比较多。而定义边框线条的样式如下样式表:

说明

none

没有边框

dashed

破折线边框

dotted

圆点线边框

double

双线边框

groove

槽线边框

inset

使元素内容具有内嵌效果的边框

outset

使元素内容具有外凸效果的边框

ridge

脊线边框

solid

实线边框

// solid 实线使用频率最高
div {
	border-style: solid;
	border-width: 10px;
	border-color: red;
}

如果想对四条边中某一条边单独进行设置,可以使用如下样式表:

属性

说明

CSS版本

border-top-width

定义顶端

1

border-top-style

border-top-color

border-bottom-width

定义底部

1

border-bottom-style

border-bottom-color

border-left-width

定义左侧

1

border-left-style

border-left-color

border-right-width

定义右边

1

border-right-style

border-right-color

// 只设置顶端
div {
	border-top-style: solid;
	border-top-width: 10px;
	border-top-color: red;
}

如果四条边都一致,那么没必要分写成三句样式,直接通过简写即可:

属性

说明

CSS版本

border

<宽度> <样式> <颜色>

设置四条边的边框

1

border-top

只设置上边框

border-bottom

只设置下边框

border-left

只设置左边框

border-right

只设置右边框

// 简写形式四条边设置
div {
	border: 10px solid red;
}
圆角边框

CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性,就可以达到这种效果,样式表如下:

属性

说明

CSS版本

border-radius

长度值或百分数

四条边角

3

border-top-left-radius

长度值或百分数

左上边角

3

border-top-right-radius

长度值或百分数

右上边角

3

border-bottom-left-radius

长度值或百分数

左下边角

3

border-bottom-right-radius

长度值或百分数

右下边角

3

// 设置圆角矩形
div {
	border: 10px solid red;
	border-radius: 10px;
}
// 四条边分别设置
div {
	border: 10px solid red;
	border-radius: 10px 20px 30px 40px;
}
设置背景

盒模型的尺寸可以通过两种方式实现可见性,一种就是之前的边框,还有一种就是背景。CSS 背景设置的样式表如下:

属性

说明

CSS版本

background-color

颜色

背景的颜色

1

background-image

none 或 url

背景的图片

1/3

background-repeat

样式名称

背景图片的样式

1/3

background-size

长度值或其他

背景图像的尺寸

3

background-position

位置坐标

背景图像的位置

1

background-attachment

滚动方式

背景图片的滚动

1/3

background-clip

裁剪方式

背景图片的裁剪

3

background-origin

位置坐标

背景图片起始点

3

background

复合值

背景图片简写方式

1

background-color

说明

CSS版本

颜色

设置背景颜色为指定色

1

transparent

设置背景颜色为透明色

1

div {
	background-color: silver;
}

解释:设置元素的背景颜色。属性值是颜色值。

div b {
	background-color: transparent;
}

解释:默认值为 transparent,为透明的意思。这样<div>内部的元素就会继承<div>的背景色。一般来说这个属性使用频率很低,原因是不需要改变色彩时就默认,需要改变色彩时又是颜色值。

body {
	background-color: silver;
}

解释:在<body>元素下可以设置整个页面的背景色。

background-image

说明

CSS版本

none

取消背景图片的设置

1

url

通过 URL 设置背景图片

1

body {
	background-image: url(loading.gif);
}

解释:url 里面是图片的路径,设置整个页面以这个图片为背景,如果图片不足以覆盖,则复制扩展。

div {
	background-image: none;
}

解释:如果多个 div 批量设置了背景,而其中某一个不需要背景,可以单独设置 none值取消背景。 在 CSS3 中,背景图片还设置了比如线性、放射性等渐变方式。

background-repeat

说明

CSS版本

repeat-x

水平方向平铺图像

1

repeat-y

垂直方向平铺图像

1

repeat

水平和垂直方向同时平铺图像

1

no-repeat

禁止平铺图像

1

body {
	background-image: url(loading.gif);
	background-repeat: no-repeat;
}

解释:让背景图片只显示一个,不平铺。

background-position

说明

CSS版本

top

将背景图片定位到元素顶部

1

left

将背景图片定位到元素左部

1

right

将背景图片定位到元素右部

1

bottom

将背景图片定位到元素底部

1

center

将背景图片定位到元素中部

1

长度值

使用长度值偏移图片的位置

1

百分数

使用百分数偏移图片的位置

1

body {
	background-image: url(loading.gif);
	background-repeat: no-repeat;
	background-position: top;
}

解释:将背景图片置于页面上方,如果想置于左上方则值为:top left。

body {
	background-image: url(loading.gif);
	background-repeat: no-repeat;
	background-position: 20px 20px;
}

解释:使用长度值或百分数,第一值表示左边,第二个值表示上边。

background-size

说明

CSS版本

auto

默认值,图像以本尺寸显示

3

cover

等比例缩放图像,使图像至少覆盖容器,但有可能超出容器

3

contain

等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合

3

长度值

CSS 长度值,比如 px、em

3

百分数

比如:100%

3

body {
	background-image: url(loading.gif);
	background-size: cover;
}

解释:使用 cover 相当于 100%,全屏铺面一张大图,这个值非常实用。在等比例放大缩小的过程中,可能会有背景超出。

div {
	background-image: url(loading.gif);
	background-size: contain;
}

解释:使用 contain 表示,尽可能让图片完整的显示在元素内。

body {
	background-image: url(loading.gif);
	background-size: 240px 240px;
}

解释:长度值的用法,分别表示长和高。

background-attachment

说明

CSS版本

scroll

默认值,背景固定在元素上,会随着内容一起滚动

1

fixed

背景固定在视窗上,内容滚动时背景不动

1

body {
	background-image: url(loading.gif);
	background-attachment: fixed;
}

解释:fixed 属性会导致背景产生水印效果,拖动滚动条而背景不动。

background-origin

说明

CSS版本

border-box

在元素盒子内部绘制背景

3

padding-box

在内边距盒子内部绘制背景

3

content-box

在内容盒子内部绘制背景

3

div {
	width: 400px;
	height: 300px;
	border: 10px dashed red;
	padding: 50px;
	background-image: url(img.png);
	background-repeat: no-repeat;
	background-origin: content-box;
}

解释:设置背景起始位置。

background-clip

说明

CSS版本

border-box

在元素盒子内部裁剪背景

3

padding-box

在内边距盒子内部裁剪背景

3

content-box

在内容盒子内部裁剪背景

3

div {
	width: 400px;
	height: 300px;
	border: 10px dashed red;
	padding: 50px;
	background-image: url(img.png);
	background-repeat: no-repeat;
	background-origin: border-box;
	background-clip: padding-box;
}

解释:在内边距盒子内部裁剪背景。

background
div {
	width: 400px;
	height: 300px;
	border: 10px dashed red;
	padding: 50px;
	background: silver url(img.png) no-repeat scroll left top/100%
	border-box content-box;
}

解释:完整的简写顺序如下:

[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];

3、表格和列表

表格样式

表格有五种独有样式,样式表如下:

属性

说明

CSS版本

border-collapse

边框样式

相邻单元格的边框样式

2

border-spacing

长度值

相邻单元格边框的间距

2

caption-side

位置名称

表格标题的位置

2

empty-cells

显示值

空单元格是否显示边框

2

table-layout

布局样式

指定表格的布局样式

2

border-collapse

说明

CSS版本

separate

默认值,单元格边框独立

2

collapse

单元格相邻边框被合并

2

table {
	border-collapse: collapse;
}

解释:单元格相邻的边框被合并。

border-spacing

说明

CSS版本

长度值

0 表示间距,其他使用 CSS 长度值

2

table {
	border-spacing:10px;
}

解释:border-collapse: separate;的状态下才有效,因为要设置间距,不能合并。

caption-side

说明

CSS版本

top

默认值,标题在上方

2

bottom

标题在下方

2

table {
	caption-side: bottom;
}

解释:设置表格标题。

empty-cells

说明

CSS版本

show

默认值,显示边框

2

hide

不显示边框

2

table {
	empty-cells: hide;
}

解释:单元格内容为空时隐藏边框。

table-layout

说明

CSS版本

auto

默认值,内容过长时,拉伸整个单元格

2

fixed

内容过长时,不拉伸整个单元格

2

table {
	table-layout: fixed;
}

解释:内容过长后,不会拉伸整个单元格。

列表样式

列表有四种独有样式,样式表如下:

属性

说明

CSS版本

list-style-type

类型值

列表中的标记类型

1/2

list-style-image

none或url

图像作为列表标记

1

list-style-position

位置值

排列的相对位置

1

list-style

简写属性

列表的简写形式

1

list-style-type

说明

CSS版本

none

没有标记

1

disc

实心圆

1

circle

空心圆

1

square

实心方块

1

decimal

阿拉伯数字

1

lower-roman

小写罗马数字

1

upper-roman

大写罗马数字

1

lower-alpha

小写英文字母

1

upper-roman

大写英文字母

1

ul {
	list-style-type: square;
}

解释:列表前缀的标记类型,这里是 CSS1 版本的。CSS2 版本还包含比如日文、亚美尼亚数字、希腊文等前缀。

list-type-position

说明

CSS版本

outside

默认值,标记位于内容框外部

1

inside

标记位于内容框内部

1

ul {
	width: 120px;
	list-style-position: inside;
}

解释:标记位于内容框的内部。

list-type-image

说明

CSS版本

none

不使用图像

1

url

通过 url 使用图像

1

ul {
	list-style-image: url(bullet.png);
}

解释:使用图片作为前缀的标记。

list-style
ul {
	list-style: lower-alpha inside url(bullet.png);
}

解释:简写形式。

垂直对齐

<table><td>单元格,我们可以使用 text-align 属性水平对齐,但是垂直对齐就无法操作了。CSS 提供了 vertical-align 属性用于垂直对齐。

说明

CSS版本

baseline

内容对象与基线对齐

1

top

内容对象与顶端对齐

1

middle

内容对象与中部对齐

1

bottom

内容对象与底部对齐

1

table tr td {
	vertical-align: bottom;
}

解释:将单元格内的内容对象实现垂直对齐。

说明

CSS版本

sub

垂直对齐文本的下标

1

super

垂直对齐文本的上标

1

b {
	vertical-align: super;
}

解释:文本上下标设置。

说明

CSS版本

长度值

设置上下的偏移量,可以是负值

1

百分比

同上

1

div span {
	vertical-align: -200px;
}

解释:负值往下,正值往上。如果默认基线在上面,用负数。如果默认基线在下面,用正值。

4、颜色和透明度

颜色包括字体颜色、背景颜色、边框颜色,设置字体颜色也称为文本块的前景色。

属性

说明

CSS版本

color

颜色值

设置文本前景色

1

p {
	color: red;
}

解释:设置文本颜色。 CSS3 提供了一个属性 opacity,可以设置元素的透明度。

属性

说明

CSS版本

opacity

0 ~ 1

设置元素的透明度

3

p {
	color: red;
	opacity: 0.5;
}

解释:设置元素的透明度。

5、盒子阴影和轮廓

box-shadow

CSS3 提供了一个非常实用的效果样式,就是阴影效果。通过 box-shadow 属性来实现,样式表如下:

属性

说明

CSS版本

box-shadow

hoffset

阴影的水平偏移量,是一个长度值,正值表示阴影向右偏移,负值表示阴影向左偏移

3

voffset

阴影的垂直偏移量,是一个长度值,正值代表阴影位于元素盒子的下方,负值代表阴影位于元素盒子上方

3

blur

(可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。默认值为 0,边界清晰

3

spread

(可选)指定阴影延伸半径,是一个长度值,正值代表阴影向盒子各个方向延伸扩大,负值代表阴影沿相反方向缩小

3

color

(可选)设置阴影的颜色,如果省略,浏览器会自行选择一个颜色

3

inset

(可选)将外部阴影设置为内部阴影

3

div {
	width: 200px;
	height: 200px;
	border: 10px solid silver;
	box-shadow: 5px 4px 10px 2px gray;
}

解释:给元素盒子增加阴影效果。

box-shadow: 5px 4px 10px 2px gray inset;

解释:实现内部阴影。

outline

CSS3 还提供了轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。样式表如下:

属性

说明

CSS版本

outline-color

颜色

外围轮廓的颜色

3

outline-offset

长度

轮廓距离元素边框边缘的偏移量

3

outline-style

样式

轮廓样式,和 border-style 一致

3

outline-witdh

长度

轮廓宽度

3

outline

简写

<颜色> <样式> <宽度>

3

div {
	width: 200px;
	height: 200px;
	border: 10px solid silver;
	outline: 10px double red;
}

解释:在边框的外围再增加一圈轮廓。

6、光标样式

我们不但可以指定页面上的元素样式,就连光标的样式也可以指定。样式表如下:

属性

说明

CSS版本

cursor

光标样式

auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll

1

div {
	cursor: move;
}

解释:设置当前元素的光标为移动光标。

7、CSS3 前缀

在 CSS3 的很多新属性推出时,这些属性还处在不太稳定的阶段,随时可能被剔除。而此时的浏览器厂商为了实现这些属性,采用前缀方法。各大厂商前缀列表如下:

浏览器

厂商前缀

Chrome、Safari

-webkit-

Opera

-o-

Firefox

-moz-

Internet Explorer

-ms-

我们之前学习过几个 CSS3 的新属性,比如:box-shadow、border-radius、opacity等。这几个属性我们在前面的使用中,并没有添加所谓的浏览器厂商前缀。那是因为,这些属性已经在主流浏览器或版本成为了标准。具体进化步骤如下:

  1. 属性尚未提出,这个属性所有浏览器不可用;
  2. 属性被提出,但未列入标准,浏览器厂商通过私有前缀来支持该属性;
  3. 属性被列入标准,可以使用前缀或不使用前缀来实现属性特性;
  4. 属性不需要再使用前缀,所有浏览器都稳定支持。

我们就拿 border-radius 举例,它是 CSS3 的标准属性。早期的时候处于实验阶段,尚未列入标准时,需要使用厂商前缀。具体浏览器支持度如下:

属性

浏览器

带前缀版本

不带前缀版本

标准/实验

border-radius

IE

不支持

9.0+

标准

Firefox

3.0 需带-moz-

4.0+

标准

Safari

3.1 需带-webkit-

5.1+

标准

Chrome

4.0

5.0+

标准

Opera

不支持

10.5+

标准

如果是手机等移动端一般采用的是 IOS 或安卓系统,那么基本上它的引擎是 webkit,直接参考-webkit-即可。 在 CSS3 手册上,Chrome 支持 border-radius 的版本为 13.0,而部分教材和文章上写到只要 5.0。当然,这里可能表达的含义可能不同。而截至到 2015 年 4 月份最新的 Chrome 版本已经到 41.0 了,所以,不管是 5.0 还是 13.0 都是老古董了,没必要深究。Opera 支持 border-radius 版本为 11.5,而目前的版本是 28.0,也无伤大雅了。而被列入标准的 box-shadow 和 opacity 基本与 border-radius 前缀版本一致。

// 因为目前处在标准阶段,没必要写前缀了
div {
	border-radius: 50px;
}
// 实验阶段的写法
div {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

实验阶段的写法有三句,分别解释一下:-webkit-表示 Chrome 浏览器的私有属性前缀、-moz-表示 Firefox 私有属性前缀,如果是处于实验阶段的旧版本浏览器,那么不支持 border-radius,从而通过厂商前缀的方式来支持。如果是新版浏览器,已经是处于标准阶段,那么又有两种说法:1.如果新版浏览器废弃了前缀,那么前缀写法就不支持了,仅支持标准写法;2.如果新版浏览器没有废弃前缀,那么两种写法都可以,但要注意顺序,且属性值要保持一致。 如果同时出现四个前缀+一个标准写法,四个前缀是当实验阶段时让四种引擎的浏览器厂商支持自己的私有属性,一个标准写法表示当这个属性列入标准后,使用新版浏览器运行时直接执行这个标准属性。

// 前缀写法写在标准后面,且值不一样,就会出现问题
div {
	border-radius: 50px;
	-webkit-border-radius: 100px;
}

特别注意:1. IE 的前缀-ms-,和 Opera 的前缀-o-,在 border-radius 中不存在;2. 现在的Opera浏览器也支持-webkit-前缀,-webkit-border-radius就能支持;3. Safari for Windows 已被苹果公司在 2012 年放弃,遗留版本为 5.1.7。 最后说明:W3C 官方的立场表示实验阶段的属性仅为了测试,未来有可能修改或删除。而大量的开发者也认为在实际项目中不应该使用前缀,而使用一种优雅降级保证一定的用户体验,而通过渐进增减的方式让新版高级浏览器保证最高的效果。

8、长度单位 rem

CSS3 引入了一些新的尺寸单位,这里重点推荐一个:rem 或者称为(根 em)。目前主流的现代浏览器都很稳定的支持。它和 em、百分比不同的是,它不是与父元素挂钩,而是相对于根元素<html>的文本大小来计算的,这样能更好的统一整体页面的风格。

// 首先,来一段 HTML
<h1>标题<em>小标题</em></h1>
<p>我是一个段落,我是一段<code>代码</code></p>
// 其次来一段 CSS
html {
	font-size: 62.5%;
}
h1 {
	font-size: 3em;
}
p {
	font-size: 1.4em;
}

这里做几个解释,我们在之前的 Web 设计中大量使用了 px 单位进行布局。因为,早期的固定布局使用 px 较为方便,逐渐养成了这种习惯。而使用 em 单位其实更加灵活,尤其是在修改样式时,只需要修改一下挂钩元素的那个大小即可,无须每个元素一个个修改。 但就算是 em,还是有一定问题。网页默认的字号大小为 16px,然后通过<html>设置62.5%,将网页基准设置为 10px。而<h1>设置为 3em,就是自身大小的 3 倍;<p>设置为1.4em,就是 10px 的 1.4 倍,即 14px。 现在问题来了,<code>里面的文本想设置 11px,怎么办呢?设置 1.1em 吗?不对,因为它挂钩的父元素不是<html>而是<p>变成了 14px 的 1.1 倍了,而想设置 11px,则需要设置 0.786 倍才行。但是,这样的计算量太大了。所以,W3C 推出了直接基于根元素单位:rem。

// 直接基于<html>的单位
code {
	font-size: 1.1rem;
}

浏览器

rem 单位支持

Opera

11.6+

Firefox

3.6+

Safari

5.0+

Chrome

6.0+

IE

9.0+

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS构造模型与动态布局

    版权声明:本文为博主原创文章,转载请注明出处。 ...

    魏晓蕾
  • HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页

    魏晓蕾
  • CSS中的伪类选择器、颜色、度量单位、文本字体及文本样式设置

    伪类选择器分为四种类型:结构性伪类、UI 伪类、动态伪类和其他伪类选择器,具体如下:

    魏晓蕾
  • 55 个提高你 CSS 开发效率的必备片段

    这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找?

    enoyo
  • CSS构造模型与动态布局

    版权声明:本文为博主原创文章,转载请注明出处。 ...

    魏晓蕾
  • CSS3简单动画效果与使用列表制作菜单

    在CSS3中能够实现一些简单的动画效果,所以接下来介绍的是几种基础的动画效果制作方式。

    端碗吹水
  • CSS3圆角边框和盒子阴影

    效果图矩形的圆角(即第二个图), 就不要用百分比,因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用高度的一半就好了。精确单位。

    乐心湖
  • 电话悬浮代码

    <style type="text/css"> *{ margin:0; padding:0; list-style:none;} body{ font-siz...

    小小鱼儿小小林
  • CSS八种让人眼前一亮的HOVER效果

    巧用伪元素:before、:after等,让你的页面按钮眼前一亮。原文链接:8 amazing HTML button hover effects, that ...

    嘉明
  • 2016.07 第一周 群问题分享

    HTML+CSS 如何用CSS实现一个元素footer一直贴在浏览器底部 2016.06.27~2016.07.01 核心概念 margin-bottom负值、...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券