CSS 4

CSS元素显示模式

块元素

特点：

1. 1. 1. 1. 独占一行（div，p，h，li）
         2. 可以设置高度，宽度，外边距以及内边距
         3. 默认宽度是容器（父级宽度）的100%
         4. 是一个容器及盒子，里面可以放行元素和块级元素

注意：

• • • <p>中不能放<div>
    • <h>中不能放块元素
    • 文字类的元素中不能放块元素

行内元素

特点：

1. 1. 1. 1. <a><strong><b><em><i><del><s><ins><u><span>
         2. 相邻的行内元素放在一行，一行可以显示多个
         3. 高、宽直接设置是无效的
         4. 默认宽度是它本身内容的宽度
         5. 行内元素只能容纳文本或其他行内元素

注意：

• • • • 链接里面不能放链接
      • <a>中可以放块元素

行内块元素

特点：

1. 1. 1. 1. <img><input><td>
         2. 和相邻行内元素（块元素）在一行上，但是他们之间会有空白缝隙，一行可以显示多个
         3. 默认宽度就是它本身内容的宽度
         4. 高度、行高、外边距、内边距可以控制

元素显示模式的转换

把行内元素转换为块元素——display:block

把块元素转换为行内元素——display:inline

行内块元素——display:inline-block

---

单行文字垂直居中

让文字的行高等于盒子的高度就等于垂直居中

如果行高小于盒子高度，文字偏上。如果行高大于盒子高度，文字偏下。

---

背景

背景颜色

background-color：颜色值；

默认值为transparent（透明的）

背景图片

background-image：none|url（）（没有|地址）

eg：background-image：url（images/logo.png）;

背景平铺

background-repeat：repeat|no-repeat|repeat-x|repeat-y

背景位置

background-position：x y；

方位名词：top，center，bottom，left，right

精确单位：百分比，px

eg：background-position:center top(x y);方位名词和顺序没关系

eg：background-position:right此时水平靠右居中，第二个参数省略垂直居中显示

eg：background-position：20px 50px；第一个是x坐标第二个是y坐标，不能更换顺序（第二个参数省略默认center）

eg：background-position：20px center；第一个是x为20，y是center（第一个必须是x，第二个必须是y）

背景图像固定

background-attachment: scroll/fixed;(滚动/固定）

背景属性混合写法

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景色半透明

background：rgba（0，0，0，0.3）a是alpha，取值范围是0-1，0是透明，1是不透明

边框外部边框颜色

outline-color：颜色

border：？px；边框实线粗细