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;
}

CSS笔记—中级