1. 显示方式

  • 块级元素总是从新行开始，并尽可能地向左和向右舒展.
  • 内联元素不从新行开始，仅占用所需的宽度.

设置元素的 display 属性能够更改元素的显示方式，但不会更改元素的品种. 取值如下：

  • inline：以内联元素的形式显示.
  • block：以块级元素的形式显示.
  • none：暗藏元素，并且不占用空间.
  • hidden：暗藏元素，但仍会占用空间.
  • inline-block: 相似于 inline，但容许在元素上设置宽度和高度.
span {  display: block;}

2. 定位

position 属性用于指定元素的定位形式. 但具体的地位还得联合 top, bottom, left, right 属性指定.

定位形式有如下几种：

(1) static

默认的定位形式. 它始终依据页面的失常流进行定位，不受 top, bottom, left, right 属性的影响.

(2) relative

设置元素的 top, bottom, left, right 属性将导致其绝对失常地位进行调整，且不会对其余内容进行调整以适应元素留下的任何空间.

div.relative {  position: relative;  left: 30px;  border: 3px solid #73AD21;}

(3) fixed

元素绝对于视口定位，即便滚动页面，它也始终位于同一地位.

div.fixed {  position: fixed;  bottom: 0;  right: 0;  width: 300px;  border: 3px solid #73AD21;}

(4) absolute

元素绝对于最近的定位先人元素（除应用 static 形式以外的元素）进行定位. 如果没有先人，则绝对于 body 进行定位，并随页面滚动一起挪动.

div.absolute {  position: absolute;  top: 80px;  right: 0;  width: 200px;  height: 100px;  border: 3px solid #73AD21;}

(5) sticky

起先它会被绝对定位，直到在视口中遇到给定的偏移地位为止，而后固定住.

div.sticky {  position: -webkit-sticky;  position: sticky;  top: 0;  padding: 5px;  background-color: #cae8ca;  border: 2px solid #4CAF50;}

元素重叠

在对元素进行定位时，它们能够与其余元素重叠. z-index 属性用于指定元素的堆栈程序（高在前，低在后）.

img {  position: absolute;  left: 0px;  top: 0px;  z-index: -1;}

3. 溢出

overflow 用于属性指定当元素的内容太大而无奈放入指定区域时应采取的措施：

  • visible：溢出内容没有被剪裁，而是在元素框外渲染.
  • hidden：溢出内容被剪裁掉，不再可见.
  • scroll：溢出内容被剪裁，同时增加滚动条以查看其余内容.
  • auto：相似于 scroll，但只在必要时才增加滚动条.
div {  background-color: #eee;  width: 200px;  height: 100px;  border: 1px dotted black;  overflow: auto;}

此外，overflow-x 和 overflow-y 属性能够指定如何解决内容的左/右边缘和高低边缘：

div {  overflow-x: hidden; /* 暗藏程度滚动栏 */  overflow-y: scroll; /* 增加垂直滚动栏 */}

4. 浮动

浮动

HTML页面的规范文档流（默认布局）是：从上到下，从左到右，遇块级元素换行.

给元素的 float 属性赋值后，就脱离了规范的文档流，浮到规范文档流的上方，而后绝对于父元素进行左右浮动，且一行能够蕴含多个块级元素. 而此浮动元素在文档流空出的地位，由后续的非浮动元素填充下来.

浮动的元素会“浮”到失常元素的下面.

float 属性取值：

  • left：元素浮动到其所在容器的左侧.
  • right：元素浮动到其所在容器的右侧.
  • none：不浮动，该在哪儿便在哪儿.
  • inherit：继承父元素的浮动形式.
.box {  float: left;  width: 33.33%;  padding: 50px;}

如果一个元素比蕴含它的元素高，并且它是浮动的，那么它将“溢出”到其容器之外. 能够向父元素增加 overflow: auto; 来解决此问题：

.clearfix {  overflow: auto;}

革除浮动

clear 属性取值：

  • left：左侧不容许浮动元素.
  • right：右侧不容许浮动元素.
  • both：左侧或右侧均不容许浮动元素.
  • none：容许两侧都有浮动元素.
  • inherit：继承父元素的值.

在革除浮动时，应该对革除与浮动进行匹配：如果某个元素浮动到左侧，则应革除左侧；浮动元素会持续浮动，然而被革除的元素将显示在其下方.

.div3 {  float: left;  width: 100px;  height: 50px;  margin: 10px;  border: 3px solid #73AD21;}.div4 {  border: 1px solid red;  clear: left;}

5. 伪类

用于定义元素的非凡状态. 语法为 选择器:伪类.

div:hover {  background-color: blue;}

鼠标挪动 div 上方时，将扭转背景色为蓝色.

6. 伪元素

用于设置元素指定局部的款式. 语法为 选择器::伪元素.

如，设置 p 元素中文本的第一个字符：

p::first-letter {  color: #ff0000;  font-size: xx-large;}

7. 不透明度

opacity 属性的取值范畴为 0.0-1.0。值越低，越通明.

img {  opacity: 0.5;}img:hover {  opacity: 1.0;}