CSS 入门与进阶

起啥名呢？？？

已于 2023-05-17 13:46:55 修改

阅读量471

点赞数 2

分类专栏： # CSS入门与进阶 && CSS3 文章标签： css

于 2021-11-28 22:18:58 首次发布

本文链接：https://blog.csdn.net/PSG_li/article/details/121598447

版权

CSS入门与进阶 && CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章の目录

[attribute="value"] 选择器

[attribute^="value"] 选择器

[attribute|="value"] 选择器

[attribute$="value"] 选择器

[attribute*="value"] 选择器

[attribute~="value"] 选择器

CSS vertical-align 属性

CSS text-decoration 属性

CSS text-indent 属性

CSS letter-spacing 属性

CSS word-spacing 属性

CSS white-space 属性

CSS line-height 属性

CSS text-transform 属性

CSS 背景

CSS background-color 属性

CSS background-image 属性

CSS background-repeat 属性

CSS background-attachment 属性

CSS background-position 属性

CSS list-style-type 属性

CSS list-style-position 属性

CSS list-style-image 属性

正文

CSS 简介

什么是 CSS？

CSS 指的是层叠样式表（Cascading Style Sheets）。

注：

样式定义如何显示 HTML 元素
样式通常存储在样式表中
多个样式定义可层叠为一个

为什么使用 CSS？

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

注：

HTML 标签描述网页的内容
CSS 定义如何显示 HTML 元素
内容和样式分离，便于修改样式

CSS 语法

CSS 规则集由选择器和声明块组成：

选择器{属性名:属性值; 属性名:属性值;}

选择器指向需要设置样式的 HTML 元素。

声明块包含一条或多条用分号（ ; ）分割的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号（ : ）分隔。

多条 CSS 声明用分号分隔，声明块用花括号（ { } ）括起来。

CSS 注释

CSS 注释以 /* 开始，以 */ 结束。

实例

h1 {
    color: red;
    font-size: 20px;
}

/* 为了让 CSS 可读性更强，可以每行只描述一个属性 */

CSS 添加方法

有三种插入样式表的方法：

行内 CSS
内部 CSS
外部 CSS

行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

实例：

<p style="color:red;">This is a paragraph</p>

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

<head>
    <style type="text/css">
        p{
            color:red;
        }
    </style>
</head>

外部 CSS

通过使用外部样式表，只需修改一个文件即可改变整个网站的外观。

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应该包含任何 HTML 标签。

外部样式表可以极大提高工作效率。

实例：

<head>
    <link ref="stylesheet" type="text/css" href="mystyle.css" />
</head>

样式的层叠覆盖

层叠顺序（优先级）

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表（优先级由高到低）（就近原则）：

行内样式（在 HTML 元素中）
内部样式表和外部样式表（在 head 部分）
浏览器默认样式

注：

所以行内样式具有最高优先级，并且将覆盖内部和外部样式以及浏览器默认样式。
优先级相同的情况下，将使用最后读取的样式表中的值。

实例：

<head>
    <style>
        h1{
            color: red;
        }
        h1{
            color: blue;
        }
        /* h1 将会是蓝色 */
    </style>
</head>

<head>
    <link rel="stylesheet" type="text/css" href="myStyle.css"></link>
    <style>
        h1{
            color: red;
        }
    </style>

    <!-- 如果内部样式是在链接到外部样式表之后定义的，则将会显示内部样式中定义的样式 -->
</head>

<head>
    <style>
        h1{
            color: red;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="myStyle.css"></link>

    <!-- 如果内部样式是在链接到外部样式表之前定义的，则将会显示外部样式表中定义的样式 -->
</head>

CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

可以将 CSS 选择器分为以下几类：

简单选择器（根据元素名称、id、类来选取元素）
组合选择器（根据选择器之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

简单选择器

根据元素名称、id、类来选取元素

元素选择器

元素选择器根据元素名称来选择 HTML 元素。

id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

要选择具有特定 id 的元素，请写一个井号（#），后跟该元素的 id。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。

类选择器

类选择器选择有特定的 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）符号，后面跟类名。

注：

HTML 元素也可以引用多个类（多个类之间用空格分隔）。
可以指定只有特定的 HTML 元素会受类的影响（p.myStyle{}：具有 class="myStyle" 的 p 元素才会被影响）。

通用选择器

通用选择器（*）选择页面上所有的 HTML 元素。

组合选择器（组合器选择器）

根据选择器之间的特定关系来选取元素。

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，可以包含一个组合器。

交集选择器

同时满足所有选择器的筛选条件才可以被选中。

语法：

选择器1选择器2选择器3...选择器n{}

注：

交集选择器中如果有元素选择器，必须将元素选择器放到开头。

实例：

<head>
	<style>
		h4.person.man.rich{
			color: red;
		}
	</style>
</head>
<body>
	<h4 class="person man rich">张三</h4>
	<h4 class="person man">李四</h4>
	<h4 class="person">小红</h4>
	
	<p class="person man rich">张三丰</p>
</body>

<!--
    只有张三变成了红色
-->

并集选择器

每一个选择器都会被选中

语法：

选择器1,选择器2,选择器3,...,选择器n{}

实例：

<head>
	<style>
		.person, #dog{
			color: red;
		}
	</style>
</head>
<body>
	<h4 class="person">张三</h4>
	
	<p id="dog">小狗</p>
</body>

<!--
    张三和小狗都变成了红色
-->

后代选择器

后代选择器（空格）匹配属于指定元素后代的所有元素。

子选择器

子选择器（>）匹配属于指定元素子元素的所有元素。

相邻兄弟选择器

相邻兄弟选择器（+）匹配作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

通用兄弟选择器

通用兄弟选择器（~）匹配属于指定元素的同级元素的所有元素。

注：

通用兄弟选择器只会选中指定元素之后的同级元素。

属性选择器

为带有特定属性或属性值的 HTML 元素设置样式。

[attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

[attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

[attribute^="value"] 选择器

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

注：

值不必是完整单词。

[attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

注：

值必须是完整或单独的单词。

例：

[class|="top"]{}

/*
    只能选取 class="top" 或者 top 后跟连字符 - 的元素(class="top-text")。
*/

[attribute$="value"] 选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

注：

值不必是完整单词。

[attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素。

注：

值不必是完整单词。

[attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

注：

值必须是完整或单独的单词。

例：

[title~="flower"]{}

/*
    只能选取 title="flower" 或者以空格分隔的元素（title="flower new" 或 title="new flower"）
*/

使用

如果为不带 class 或 id 的表单设置样式，属性选择器会很有用。

伪类选择器

伪类用于定义元素的特殊状态。

语法

selector:pseudo-class {
    property: value;
}

链接的伪类选择器

:link 选择器

:link 选择器用于选取未被访问的链接。

:visited 选择器

:visited 选择器用于选取已被访问的链接。

:hover 选择器

:hover 选择器用于选择鼠标指针浮动在上面的元素。

注：

:hover 选择器可用于所有元素，不只是链接。

:active 选择器

:active 选择器用于选择活动链接。

当在一个链接上点击时，它就会成为活动的（激活的）。

注：

a:hover 必须在 a:link 和 a:visited 之后才能生效。
a:active 必须在 a:hover 之后才能生效。

例：

/* 未访问的链接 */
a:link{
    color:#ff0000;
}

/* 已访问的链接 */
a:visited{
    color:#00ff00;
}

/* 鼠标悬停链接 */
a:hover{
    color:#0000ff;
}

/* 已选择的链接 */
a:active{
    color:#ffffff;
}

表单的伪类选择器

:required 选择器

:required 选择器用于选取必填的表单元素。

注：

带有 required 属性的表单元素被定义为必填。
:required 选择器适用于这几个表单元素：input、select 以及 textarea。

:disabled 选择器

:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。

:enabled 选择器

:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。

:read-only 选择器

:read-only 选择器用于选取“只读”的元素。

注：

带"readonly"属性的表单元素被定义为“只读”。

:checked 选择器

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

:focus 选择器

:focus 选择器用于选取获得焦点的元素。

注：

接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

使用伪类与指定的元素匹配

:first-child 选择器

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

:first-of-type 选择器

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

:first-child 和 :first-of-type 的区别

<head>
	<style>
        /* h1 是 div 的第一个子元素，可以被选中 */
		h1:first-child {
			color: red;
		}

        /*
        p 不是 div 的第一个子元素，不能被选中
		p:first-child {
			color: red;
		}
        */

        /* 
            p 是 div 下特定类型（p 标签类型）的第一个子元素，可以被选中
            选中 div 下 p 类型的第一个子元素 
        */
		p:first-of-type {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<h1>标题</h1>
		<p>段落1</p>
	</div>
</body>

:last-child 选择器

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

:last-of-type 选择器

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

:last-child 和 :last-of-type 的区别

与 :first-child 和 :first-of-type 的区别一样。

:nth-child(n) 选择器

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。

:nth-last-child(n) 选择器

:nth-last-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型，从最后一个子元素开始计数。

:nth-of-type(n) 选择器

:nth-of-type(n) 选择器匹配属于其父元素的特定类型的第 n 个子元素。

:nth-last-of-type(n) 选择器

:nth-last-of-type(n) 选择器匹配属于其父元素的特定类型的第 n 个子元素，从最后一个子元素开始计数。

区别

:nth-child(n) —— 匹配其父元素的第 n 个子元素，元素类型没有限制
:nth-of-type(n) —— 匹配其父元素的第 n 个特定类型的子元素，元素类型有限制

补充

n 可以是数字、关键字或公式。

如：

:nth-child(old) —— 奇数
:nth-of-type(even) —— 偶数
:nth-child(2n+1)

:only-child 选择器

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

:only-of-type 选择器

:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。

伪元素选择器

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

语法

selector::pseudo-element {
    property: value;
}

/*
    请注意双冒号表示法。
    在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
    在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
*/

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

注：

::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

注：

::first-letter 伪元素只适用于块级元素。

以下属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

例：

/* 在 h1 元素的内容之前插入一幅图片 */

h1::before {
    content: url();
}

::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

例：

/* 在 h1 元素的内容之后插入一幅图片 */

h1::after {
    content: url();
}

::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下属性适用于 ::selection 伪元素：

color
background
cursor
outline

CSS 常用属性

CSS 颜色

指定颜色是通过使用预定义的颜色名称或 RGB、HEX、HSL、RGBA、HSLA 值。

CSS 颜色名

在 CSS 中，可以使用颜色名称来指定颜色。

CSS RGB 颜色

RGB 值

在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：

rgb(red,green,blue)
/*
    每个参数（red、green 以及 blue）定义了 0 到 255 之间的颜色强度
    例如：
        rgb(255,0,0)显示为红色，红色设置为最大值（255），其他设置为 0。
        rgb(0,0,0)显示为黑色。
        rgb(255,255,255)显示为黑色。
*/

RGBA 值

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展，它指定了颜色的不透明度。

rgba(red,green,blue,alpha)

/*
    alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
*/

CSS HEX 颜色

HEX 值

在 CSS 中，可以使用以下格式的十六进制值指定颜色：

#rrggbb

/*
    其中 rr（红色）、gg（绿色）和 bb（蓝色） 是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
    例如：
        #ff0000 显示为红色，红色设置为最大值（ff），其他设置为最小值（00）。
*/

CSS 字体

CSS font-family 属性

font-family 属性规定元素的字体系列。

在 CSS 中，我们使用 font-family 属性规定文本的字体。

注：

font-family 属性应包含多个字体名称作为”后备“系统，以确保浏览器/操作系统之间的最大兼容性。请以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
如果字体名称不止一个单词，则必须使用引号引起来。

CSS font-style 属性

font-style 属性定义字体的风格。

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal —— 文字正常显示，默认
italic —— 文本以斜体显示
oblique —— 文本为”倾斜“（倾斜与斜体非常相似，但支持较少）

CSS font-weight 属性

font-weight 属性指定字体的粗细。

取值：

normal：默认值。定义标准的字符
bold：定义粗体字符
bolder：定义更粗的字符
lighter：定义更细的字符
100 - 900：定义由细到粗的字符。400 等同于 normal，700 等同于 bold

CSS font-size 属性

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已告知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

注：

如果没有指定字体大小，普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素（px）设置字体大小

使用像素设置文本大小可以完全控制文本大小。

注：

如果使用像素，仍然可以使用缩放工具来调整整个页面的大小。

用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16 = em。

使用百分比和 em 的组合

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

以上实例在所有浏览器中显示相同的文本大小，并且允许所有浏览器缩放或调整文本大小。

响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是”视口宽度“（"viewport width"）。

这样，文本大小将遵循浏览器窗口的大小。

注：

视口（viewport）是浏览器窗口的大小。1 vw = 视口宽度的 1%。

CSS font 属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

font-style
font-weight
font-size/line-height
font-family

实例：

p {
    font: italic bold 12px/30px Georgia, serif;
}

注：

font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用默认值。

CSS 文本

CSS color 属性

color 属性用于设置文本的颜色。

颜色值由以下值指定：

颜色名，如 red
十六进制值，如 #ff0000
RGB 值，如 rgb(255,0,0)

CSS text-align 属性

text-align 属性规定元素中的文本的水平对齐方式。

属性值：

left —— 把文本排列到左边。默认值：由浏览器决定。
right —— 把文本排列到右边。
center —— 把文本排列到中间。
justify —— 实现两端对齐文本效果。

CSS vertical-align 属性

vartical-align 属性设置元素的垂直对齐方式。

属性值：

CSS text-decoration 属性

text-decoration 属性规定添加到文本的修饰。

text-decoration 属性是以下属性的简写属性：

text-decoration-line（必需）
text-decoration-style（可选）
text-decoration-color（可选）
text-decoration-thickness（可选）

text-decoration-line 属性

text-decoration-line 属性设置要使用哪种文本修饰的类型（下划线、上划线、删除线）。

属性值：

none：默认值。文本没有线条。
underline：在文本下方显示线条。
overline：在文本上方显示线条。
line-through：显示横穿文本的线条。

注：

可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条。

text-decoration-style 属性

text-decoration-style 属性设置文本装饰的类型（实线、波浪线、点线、虚线、双线等）。

属性值：

solid —— 默认值。线条显示为单行。
double —— 线条显示为双线。
dotted —— 线条显示为点线。
dashed —— 线条显示为虚线。
wavy —— 线条显示为波浪线。

text-decoration-color 属性

text-decoration-color 属性规定 text-decoration（上划线、下划线、穿线）的颜色。

text-decoration-thickness 属性

text-decoration-thickness 属性规定装饰线的粗细。

CSS text-indent 属性

text-indent 属性规定文本块中首行文本的缩进。

注：

允许使用负值。如果使用负值，那么首行会被缩进到左边。

CSS letter-spacing 属性

letter-spacing 属性用于设置字符间距（增加或减少字符间的空白）。

注：

允许使用负值，这会让字母之间挤得更紧。

CSS word-spacing 属性

word-spacing 属性用于设置单词之间的间距（增加或减少单词间的空白）。

即设置字间隔。字定义为由空白符包围的一个字符串。

注：

允许使用负值

CSS white-space 属性

white-space 属性设置如何处理元素内的空白。

属性值：

normal：默认。空白会被浏览器忽略。
pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap：文本不会换行，文本会在同一行上继续，直到遇见 <br> 标签为止。
pre-wrap：保留空白符序列，但是正常地进行换行。
pre-line：合并空白符序列，但是保留换行符。

CSS line-height 属性

line-height 属性设置行间的距离（行高）。

注：

不允许使用负值。
当块内部直接包含一行文本或者包含一行由行内元素如 <span></span> 包裹的文本时，设置块的 line-height 属性和 height 属性的属性值相等，则会实现文本在块级元素内垂直居中。

CSS text-transform 属性

text-transform 属性控制文本的大小写。

属性值：

none：默认。定义带有小写字母和大写字母的标准的文本。
uppercase：定义仅有大写字母。
lowercase：定义仅有小写字母。
capitalize：文本中的每个单词以大写字母开头。

CSS 背景

CSS 背景属性用于定义元素的背景效果。

CSS background-color 属性

background-color 属性指定元素的背景色。

通过 CSS，颜色通常由以下方式指定：

有效的颜色名称，比如：red
十六进制值，比如：#ff0000
RGB 值，比如：rgb(255,0,0)

可以为任何 HTML 元素设置背景颜色。

CSS background-image 属性

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

例：

background-image: url();

CSS background-repeat 属性

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

background-repeat 属性设置是否以及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

属性值：

repeat：默认。背景图像将在垂直方向和水平方向重复
repeat-x：背景图像将在水平方向重复
repeat-y：背景图像将在垂直方向重复
no-repeat：背景图像将仅显示一次

CSS background-attachment 属性

background-attachment 属性指定背景图像是应该滚动还是固定的（是否随页面的其余部分一起滚动）。

属性值：

scroll：默认值。背景图像会随着页面其余部分的滚动而移动
fixed：当页面的其余部分滚动时，背景图像不会移动

CSS background-position 属性

background-position 属性用于指定背景图像的位置。

属性值：

CSS background 属性

简写属性。可以在一个属性中指定所有背景属性。

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值缺失并不要紧，只要按照此顺序设置其他值即可。

CSS 盒子模型

页面中的所有 HTML 元素都可以看成一个盒子，占据着一定的页面空间。

CSS 盒模型（框模型）实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

盒子模型的组成

content 内容
- height 高度
- width 宽度
padding 内边距
border 边框
margin 外边距

在 CSS 中，width 和 height 指的是内容区域（content）的高度和宽度。

元素的总宽度：宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度：高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

注：

背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

CSS 边框

CSS 允许指定元素边框的样式、宽度和颜色。

CSS 边框样式

border-style 属性指定要显示的边框类型（四个边框）。

允许以下值：

dotted —— 定义点线边框
dashed —— 定义虚线边框
solid —— 定义实线边框
double —— 定义双边框
groove —— 定义 3D 坡口边框。效果取决于 border-color 值
ridge —— 定义 3D 脊线边框。效果取决于 border-color 值
inset —— 定义 3D inset 边框。效果取决于 border-color 值
outset —— 定义 3D outset 边框。效果取决于 border-color 值
none —— 定义无边框
hidden —— 定义隐藏边框

border-style 属性可以设置 1-4 个值（用于上边框、右边框、下边框和左边框）：

/* 1 个值，四个边框 */
border-style: solid;

/* 2 个值，上下、左右 */
border-style: solid dashed;

/* 3 个值，上、左右、下 */
border-style: solid dashed dotted;

/* 4 个值，上、右、下、左 */
border-style: solid dashed dotted double;

注：

除非设置了 border-style 属性，否则其他 CSS 边框属性（border-width、border-color）都不会有任何作用。

CSS 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。

border-width 属性可以设置 1-4 个值（用于上边框、右边框、下边框和左边框）（与 border-style 属性相同）。

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name —— 指定颜色名，如 "red"
HEX —— 指定十六进制值，如 "#ff0000"
RGB —— 指定 RGB 值，如 "rgb(255,0,0)"
HSL —— 指定 HSL 值，如 "hsl(0,100%,50%)"
transparent

border-color 属性可以设置 1-4 个值（用于上边框、右边框、下边框和左边框）（与 border-style 属性和 border-width 属性相同）。

注：

如果未设置 border-color，它将继承元素的颜色。

CSS 边框各边

border-top 属性

简写属性，在一条声明中设置所有上边框属性。

border-top: border-top-width border-top-style border-top-color;

/* border-top-style 必需 */

border-top-width 属性

设置上边框的宽度。

border-top-style 属性

设置上边框的类型。

border-top-color 属性

设置上边框的颜色。

border-right、border-bottom、border-left 用法和 border-top 相同。

CSS border 属性

简写属性，在一个属性中指定所有的边框属性。

border 属性是以下属性的简写属性：

border-width
border-style（必需）
border-color

实例：

div {
    border: 1px solid red;
}

/* 只为一条边设置所有边框属性 */
div {
    border-bottom: 1px solid red;
}

CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

Margin — 单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

auto —— 浏览器来计算外边距
length —— 以 px、pt、cm 等单位指定外边距
% —— 指定以包含元素宽度的百分比计的外边距

注：

外边距可以是负值，而且在很多情况下要使用负值的外边距。

Margin — 简写属性

margin 属性可以在一个属性中指定所有外边距属性。

/*
    margin 属性是以下各外边距属性的简写属性：
        margin-top
        margin-right
        margin-bottom
        margin-right
*/
/*
    工作原理：
        margin 属性有四个值：上、右、下、左
        margin 属性有三个值：上、左右、下
        margin 属性有两个值：上下、左右
        margin 属性有一个值：上下左右
*/

使用 auto 值实现水平居中

可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

该元素会占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

例：

div {
    width: 200px;
    border: 1px solid red;
    margin: 0 auto;
}

外边距合并

外边距合并指的是当两个垂直外边距相遇时，他们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

会发生外边距合并的情况：

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，他们会发生合并。如果这个发生合并后的外边距遇到另一个元素的外边距，它还会发生合并。

注：

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

Padding — 单独的边

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length —— 以 px、pt、cm 等单位指定内边距
% —— 指定以包含元素宽度的百分比计的内边距

注：

不允许负值

Padding — 简写属性

padding 属性可以在一个属性中指定所有内边距属性。

/*
    padding 属性是以下各内边距属性的简写属性：
        padding-top
        padding-right
        padding-bottom
        padding-left
*/
/*
    工作原理：
        padding 属性有四个值：上、右、下、左
        padding 属性有三个值：上、左右、下
        padding 属性有两个值：上下、左右
        padding 属性有一个值：上下左右
*/

CSS 宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。

height 和 width 属性可设置以下值：

auto —— 默认。浏览器计算高度和宽度
length —— 以 px、cm 等定义高度和宽度
% —— 以包含块的百分比定义高度和宽度

CSS overflow 属性

overflow 属性指定如果内容溢出一个元素的框会发生什么。

属性值：

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

CSS 列表

CSS list-style-type 属性

list-style-type 属性设置列表项标记的类型。

属性值：

CSS list-style-position 属性

list-style-position 属性设置在何处放置列表项标记。

该属性用于声明列表标志相对于列表项内容的位置。

属性值：

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

CSS list-style-image 属性

list-style-image 属性使用图像来替换列表项的标记。

注：

请始终规定一个 list-style-type 属性以防图像不可用。

属性值：

URL：图像的路径
none：默认，无图像被显示

例：

list-style-image: url();

CSS list-style 属性

list-style 属性是简写属性，它用于在一条声明中设置所有列表属性。

使用简写属性时属性值的顺序：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

注：

如果缺少属性值之一，则将插入缺失属性的默认值（如果有）。

CSS 表格

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

table, th, td {
    border: 1px solid #000;
}

双边框

上例中的表格拥有双边框，这是因为 table 和 th、td 元素都有单独的边框。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框。

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #000;
}

注：

如果只希望表格周围有边框，仅需为 <table> 指定 border 属性。
可以向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分割线。

表格宽高和内外边距

表格的宽度和高度由 width 和 height 属性定义。

如需控制边框和表格内容之间的间距，请在 <th> 和 <td> 元素上使用 padding 属性。

如需控制单元格之间的间距，请在 <th> 和 <td> 元素上使用 margin 属性。

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，<td> 元素的内容左对齐。

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐方式是居中（<th> 和 <td>元素都是）。

响应式表格

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果（显示水平滚动条）。

<div style="overflow-x:auto;">
    <table>
        <!-- table content -->
    </table>
</div>

表格实例

可悬停表格

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行。

条状表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color。

CSS 不透明度 / 透明度

CSS opacity 属性

opacity 属性指定元素的不透明度/透明度。

取值范围为 0.0 - 1.0（值越低，越透明）。

注：

使用 opacity 属性为元素添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

如果不希望对子元素应用不透明度（如 opacity 一样），可以使用 RGBA 颜色值。

CSS cursor 属性

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

属性值：

url —— 需使用的自定义光标的 URL（请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标）。
default —— 默认光标（通常是一个箭头）。
auto —— 默认。浏览器设置的光标。
crosshair —— 光标呈现为十字线。
pointer —— 光标呈现为指示链接的指针（一只手）。
move —— 此光标指示某对象可被移动。
e-resize —— 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize —— 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize —— 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize —— 此光标指示矩形框的边缘可被向上（北）移动。
se-resize —— 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize —— 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize —— 此光标指示矩形框的边缘可被向下移动（南）。
w-resize —— 此光标指示矩形框的边缘可被向左移动（西）。
text —— 此光标指示文本。
wait —— 此光标指示程序正忙（通常是一只表或沙漏）。
help —— 此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS 定位机制

文档流定位

从上到下，从左到右，输出文档内容（默认）。

文档中元素的分类：

block（块级元素）
inline（行内元素）
inline-block（行内块元素）

块级元素（block）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

特点：

独占一行
元素的 height、width、margin、padding 都可设置

常见 block 元素：

<div>、<p>、<h1> - <h6>、<ol>、<ul>、<table>、<form>

行内元素（inline）

行内元素不从新行开始，仅占用所需的宽度。

特点：

不单独占用一行
width、height 不可设置（width 就是它包含的文字或图片的宽度，不可改变）

常见 inline 元素：

<span>、<a>

行内块元素（inline-block）

同时具备 inline 元素、block 元素的特点。

特点：

不单独占用一行
元素的 height、width、margin、padding 都可设置

常见 inline-block 元素：

<img>、<input>

display 属性

display 属性规定是否 / 如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于他的元素类型。

属性值：

none —— 元素不会被显示
block —— 元素将显示为块级元素，元素前后会带有换行符
inline —— 元素将显示为行内元素，元素前后没有换行符
inline-block —— 元素将显示为行内块元素

浮动定位

CSS float 属性规定元素如何浮动。

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

CSS float 属性

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素脱离文档流，向左或向右移动，其周围的元素也会重新排列。

浮动往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

注：

浮动元素之前的元素将不会受到影响。

浮动元素的特征：

浮动元素将被排除在文档流之外（脱离文档流），不再占据页面空间，其他未浮动元素要上前补位。
浮动元素依然位于包含框之内（浮动元素依然位于父元素框内）。
浮动元素会停靠在包含框（父元素）的左边或右边，或者平级的其他浮动元素的旁边。
如果将相邻的几个元素都设置为浮动，如果有空间的话，他们将彼此相邻，水平排列。
如果包含框太窄，无法容纳水平排列的多个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
元素一旦浮动起来之后，都将变成块级元素。
元素一旦浮动起来之后，元素的宽度将变成自适应（内容决定宽度）。（前提：不指定元素的宽度）

浮动元素之后的元素如何排列？

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的。

float 属性值：