文档流

display和visibility属性

display属性定义了元素的基本显示方式，它的常用值包括：

none，元素不显示。其所占位置并不会保留，就像元素在页面中不存在。
inline，行内元素。元素会充满容器宽度后换行。
block，块元素。元素总是靠着容器的左边界。
inline-block，行内块元素。类似行内元素和块元素的组合，有块元素的一些特性，但会像行内元素那样排列。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head><body><!--div元素的默认显示方式是block--><div>孤雁</div><div style="display:block">孤雁不饮啄，飞鸣声念群。</div><div style="display:inline">谁怜一片影，相失万重云？</div><div style="display:inline-block">望尽似犹见，哀多如更闻。</div><div style="display:inline-block">野鸦无意绪，鸣噪自纷纷。</div>
</body>
</html>

visibility属性定义元素是否可见，其值包括：

visible，默认值，正常显示。
hidden，元素隐藏，但保留元素的位置。
collapse，在表中删除列或行元素。

定位

position属性可以在页面中改变元素的定位方式，支持的定位类型有：

静态定位，static，元素的默认定位方式。
相对定位，relative。相对元素的元素位置，通过top、right、bottom、left属性设置元素相对于原始位置的偏移量。
绝对定位，absolute，从元素容器的左上角开始计算位置，如果没有明确的父元素，则父元素为html元素。绝对定位元素的容器不能是静态定位的。
固定定位，fixed。以浏览器的可视区域为容器进行定位。

浮动

有时候，需要元素靠着容器的左边或右边，可以使用float属性实现，其属性值包括：

none，默认值，不浮动。
left，向左浮动。
right，向右浮动。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>img {float:right;  }
</style>
</head><body><h1>红豆杉</h1><img src="img/红豆杉.jpg" alt="红豆杉图片" width="200px" height="150px" /><p>红豆杉又称紫杉，也称赤柏松。中国国家一级珍稀保护树种。红豆杉属浅根植物，其主根不明显、侧根发达。是世界上公认的濒临灭绝的天然珍稀抗癌植物。是第四纪冰川遗留下来的古老树种，在地球上已有250万年的历史。由于在自然条件下红豆杉生长速度缓慢，再生能力差，所以很长时间以来，世界范围内还没有形成大规模的红豆杉原料林基地。</p>
</body>
</html>

当一个元素浮动后，会影响周围的元素。如果其后的元素不需要跟着浮动元素的节奏走，可以使用clear属性清除浮动效果。style="clear:both;"both清除所有方向浮动，right清除右浮动，left清除左浮动。

背景

background-color属性：设置背景颜色；
background-image属性：设置背景图片；
background-repeat属性：指定背景图片的重复方式，no-repeat（不重复）、repeat-x（水平方向重复排列图像）、repeat-y（垂直方向重复排列图像）；
background-attachment属性：设置背景的附着方式；
background-position属性：指定图像的定位方式，属性值可以使用数值、百分数，以及left、right、top、center、buttom关键字。

CSS叠层样式表（三）相关推荐

CSS叠层样式表（一）
CSS叠层样式表(一) 如何使用css 选择器如何使用css 如何在HTML页面中添加CSS: 使用style属性:在元素中直接指定CSS样式,可以使用style属性来定义,称为内联样式. < ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
html样式表三种类型包括,css样式有哪几种类型
CSS样式有三种类型:1.行内样式(内嵌样式),使用style属性直接把CSS代码添加到HTML的标记中:2.内部样式(内联样式),把css样式写在style标签中:3.外部样式(外联样式),将css ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
css叠层_css z-index层重叠顺序
div css z-index层重叠顺序 DIV层.span层等html标签层重叠顺序样式z-index,平时我们使用较少,但也会难免会碰到CSSz-index使用.接下来divcss5介绍z-ind ...
html中的样式重置,CSS如何重置样式表？
重置样式表的目标是减少浏览器在默认行高,边距和标题字体大小等方面的不一致性:重置样式经常出现在CSS框架中,最初的"meyerweb重置"也出现在Blueprint中. 这里给出的 ...
css叠层_CSS 中重要的层叠概念
最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决 ...
html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例
class(类)和id的一个小实例在上一节中我们了解了如何为特定的标签定义样式,例如我们利用 "h1{font-size: 12px;}"将页面内所有的标题1的字体大小改为了12 ...
CSS 重构：样式表性能调优
内容简介 CSS 对于现代网站的用户体验至关重要,其地位不亚于决定着网站外形的 HTML 和让网站动起来的 JavaScript.本书作为 CSS 代码重构指南,不仅展示了如何编写结构合理的 CSS, ...

CSS叠层样式表（三）

CSS叠层样式表（三）

文档流

display和visibility属性

定位

浮动

背景

CSS叠层样式表（三）相关推荐

最新文章

热门文章