重要的 CSS 属性


对于客户端程序员来说,最重要的 CSS 属性是那些指定文档中每个元素的可见性、尺寸和精确位置的属性,为了脚本化 CSS,理解这些样式属性的工作原理非常重要。下面列举了一些重要的 CSS 属性:

用 CSS 定位元素

CSS 的 position 属性指定了应用到元素上的定位类型:

  • static:默认属性,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置
  • absolute:不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置
  • fixed:不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变
  • relative:元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)

更多细节可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

除了 static 外,其他类型都可以通过 lefttoprightbottom 属性的组合来指定元素的位置,最常用的技术就是使用 lefttop 属性指定元素的左上角位置进行定位。

要定义一个距离文档左、上边缘各 100 像素的元素,可以这么设置:

<div style="position: absolute; left: 100px; top: 100px;">

要定义一个相对于视口右、上边缘各 10 像素,并且不随文档的滚动而滚动的元素,可以这么设置:

<div style="position:fixed; right: 10px; top: 10px;">

如你所见,lefttoprightbottom 属性是在容器元素的二维坐标中指定 X 和 Y 坐标,z-index 属性定义了第三个维度:它允许指定元素的堆叠次序。该属性默认值为0,当两个或多个元素重叠在一起时,它们是按照从低到高的z-index顺序绘制的。需要注意的是,z-index只对兄弟元素应用堆叠效果。非定位元素总是以防止重叠的方式进行布局,所以 z-index 属性不会应用到它们上面。

CSS 3 规范包含一个 text-shadow 属性以在文本下产生阴影效果,我们可以通过 CSS 定位属性来实现类似的效果:

<!-- text-shadow 实现阴影效果 -->
<span style="text-shadow: 3px 3px 1px #888">这里是阴影文本</span>

<hr>

<!-- 利用定义技术产生相同效果 -->
<span style="position: relative; display:inline-block; width: 110%;">
  这里是阴影文本
  <span style="position: absolute; top: 3px; left: 3px; z-index: -1; color: #888">
    这里是阴影文本
  </span>
</span>

以下是在浏览器中输出到对比:

边框、外边距和内边距

CSS 允许指定元素周围的边框、外边距和内边距,还可以指定边框的颜色、样式和宽度。可以用单独的 CSS 属性指定边框的宽度、样式和颜色,也可以指定元素的每条边的边框,甚至可以单独指定单条边的宽度、样式和颜色:

border: solid black 1px;
border-bottom: 3px dotted red;
border-top-color: yellow;
border-top-right-radius: 5px;

marginpadding 分别用来指定外边距和内边距,如果元素没有边框,那么内边距往往是没有必要的,如果元素是动态定位的,它的外边距也就无关紧要了:

margin: 5px;
padding: 5px;
margin-left: 10px;
padding-bottom: 15px;
margin: 1px 2px 3px 4px;   /* 上、右、下、左 */

CSS 盒模型和定位细节

CSS 盒模型:

这里需要注意的是,widthheight 只指定了内容区域的尺寸,不包含内边距和边框,因此为了确定有边框元素在屏幕上的尺寸,需要把元素宽度加上左右内边距和左右边框的宽度,把元素高度加上上下内边距和上下边框的宽度。

其次,lefttop 属性指定了从容器边框内侧到定位元素边框外侧的距离,不是从容器内容区域的左上角开始度量,而是从容器内边距左上角开始量的。

CSS 3 引入了一个 box-sizing 属性,默认值是 content-box,即标准的盒模型,如果将其属性值设置为 bordor-box,浏览器会为那个元素应用 IE 的盒模型,即 widthheight 属性将包含边框和内边距。

元素显示和可见性

两个 CSS 属性影响了文档元素的可见性:visibilitydisplayvisibility 属性很简单,当其值为 hidden 时元素不显示;当其值为 visible 时,该元素显示。display 属性更加通用,它用来指定元素的显示类型:块状元素、内联元素、列表项等,但是如果 display 设置为 none,受影响的元素将不限速,甚至没有布局。

两者的区别在于,对静态定位和相对定位的元素而言,将元素的 visibility 设置为 hidden 时,不影响文档布局,元素所在空间依然保留,对应元素可以在隐藏和显示之间来回切换。但是如果元素的 display 设置为 none 的话,在文档中不再给它分配空间,各边元素会合拢,适用于展开和折叠效果。

对于绝对定位和固定定位元素两者的影响是等价的,因为这些元素都不是文档布局的一部分。

颜色、透明度和半透明度

可以通过 CSS 的 color 属性指定文档元素包含的文本的颜色,并可以通过 background-color 属性指定任何元素的背景颜色,还可以通过 border-color 指定边框的颜色。关于颜色属性值可以是英文名字,如「red」、「black」,也可以是十六进制数,分别代表红、绿、蓝的分量,每个分量可以是一位或两位数字。CSS 3 还为指定 RGBA 色彩空间(红、绿、蓝+指定颜色透明度)中的颜色定义了语法。

除了 background-color 属性,还可以通过 background-image 属性为元素指定背景图像,还以通过 background-attachmentbackground-positionbackground-repeat 属性指定如何绘制图形的一些高级细节。复合属性 background 可以一起指定这些属性值。

如果没有为元素指定背景颜色或图像,它的背景默认是透明的,当然也有例外,比如表单元素,如果强烈要求,可以将 background-color 属性显式设置为 transparent

到目前为止,讨论的透明度都是非黑即白的:元素背景不是透明就是不透明,其实也可以指定为半透明,用 CSS3 的 opacity 属性来处理即可,该值是 0~1 之间的数字,1 代表 100% 不透明(默认值),而 0 代表 100% 透明,opacity 在当前除 IE 之外的所有浏览器中都支持,不过 IE 提供了类似的可选方式,通过 filter 属性来实现,以下是透明度为 75% 的实现:

opacity: .75;
filter: alpha(opacity=75);

部分可见:overflow 和 clip

visibility 属性可以让文档元素完全隐藏,而 overflowclip 属性允许只显示元素的一部分,overflow 指定内容超出元素尺寸时该如何显示:

  • visible:默认值,如果需要,内容可以溢出并绘制在元素边框的外面
  • hidden:裁剪和隐藏溢出的内容
  • scroll:元素一直显示垂直和水平滚动条,如果内容超出元素尺寸,允许用户通过滚动条查看额外内容
  • auto:滚动条只在内容超出元素尺寸时显示

clip 属性确切指定了内容超出元素尺寸时应该显示哪个部分,clip 属性指定了元素的裁剪区域,其语法是:

clip: rect(top right bottom left)

圆括号中的4个值是长度,可以是 auto,指定裁剪区域的边缘就是元素边框的对应边缘。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: CSS 概览

>> 下一篇: 脚本化内联样式