你们好，我是ChrisChenJL·宸叡，一个立志奔向Java的自由少年。css

本文内容可能有一点点的多，建议你们点赞+收藏，也能够关注博主本人哦~html

之后有须要的时候能够翻出来看一下，我写的笔记就会变得有意义啦~

api

文章目录

1、CSS简介
- 一、什么是CSS
- 二、CSS组成
- 三、注释
2、CSS分类
- 一、行内样式表（内联样式表）
- 二、内部样式表
- 三、外部样式表
- 四、样式表的优先级
3、CSS选择器
- 一、原生选择器
- 二、原生选择器的优先级
- 三、衍生选择器（语法糖）
- 四、其余类型选择器（了解便可）
4、CSS文字属性
- 一、font-family 属性（字体类别）
- 二、font-size 属性（文字大小）
- 三、font-variant 属性（小型大写字母替换）
- 四、font-style 属性（文字倾斜）
- 五、font-weight 属性（文字加粗）
- 六、文字的复合属性（我的不建议使用）
5、CSS颜色&背景属性
- 一、color 属性（元素颜色）
- 二、background-color 属性（背景颜色）
- 三、background-image 属性（背景图像）
- 四、background-repeat 属性（背景重复）
- 五、background-attachment 属性（背景附件）
- 六、background-position 属性（背景位置）
- 七、背景图像的复合属性
- 八、颜色的表示方法
- - 1）英文关键字方式
  - 2）RBG颜色值
6、CSS文本属性
- 一、word-spacing 属性（单词间隔）
- 二、letter-spacing 属性（字符间隔）
- 三、text-decoration 属性（文字修饰）
- 四、text-align 属性（水平对齐方式）
- 五、vertical-align 属性（垂直对齐方式）
- 六、text-transform 属性（文本转换）
- 七、text-indent 属性（文本缩进）
- 八、line-height 属性（行高）
- 九、white-space 属性（处理空白）
7、CSS超连接伪类
- 一、a:link（正常状态，未访问过的连接）
- 二、a:visited（用户已访问过的连接）
- 三、a:hover（鼠标悬停状态）
- 四、a:active（鼠标点击的那一刻）
- 五、cursor 属性（鼠标悬停样式）
8、CSS盒子模型
- 一、什么是盒子模型
- 二、Content（内容区）
- - 1）width 属性（宽）& height 属性（高）
  - 2）overflow 属性（溢出内容处理）
- 三、Padding（内边距）
- 四、Border（边框）
- 五、Margin（外边距）
9、CSS控制显示类
- 一、块级标签
- 二、行级标签
- 三、visibility 属性（元素访问性/可见性）
- 四、display 属性（控制显示类/显示）
10、CSS文档流
- 一、普通流
- 二、浮动流
- 三、定位流
11、CSS浮动
- 一、什么是浮动
- 二、float 属性（浮动）
- 三、clear 属性（清除浮动）
- 四、清除浮动的集中常见作法
12、CSS定位
- 一、position 属性（定位方式）
- 二、元素位置属性（定位偏移量）
- 三、定位的类型
- 四、z-index 属性（定位层级）
十3、总结

1、CSS简介

一、什么是CSS

层叠样式表 (Cascading Style Sheets，简称CSS)。浏览器

样式表是在网页中用来控制内容展现效果的最有效方式。ssh

样式定义如何显示 HTML 元素，美化HTML元素的外观，例如设置背景颜色和字体等
对网页内容元素进行布局和定位
实现动画效果以及2D/3D转换
样式一般存储在样式表中
配合HTML/JS实现特效
对HTML元素进行响应式布局

响应式布局：针对于不一样的终端，展现不一样的效果；例如手机端/PC端/IPad等布局

二、CSS组成

1）选择器

样式表中用于指定某个或者某些元素的方式测试

2）属性

针对于指定的内容设置其某种展现效果字体

3）属性值

针对于指定的内容设置其某种展现效果的具体某一种动画

三、注释

/**/：以“/*”开头，以“*/”结束，将须要注释的内容写在这个两个关键字中间，这个注释与HTML/XML中的“ ”意义相同，可是不能穿插使用。CSS必须用这种注释才能够，同时也支持多行。url

2、CSS分类

一、行内样式表（内联样式表）

行内样式表也被称做内联样式表，若是须要给某一个元素加样式，须要在相关的标签内使用样式（style）属性。Style 属性能够包含任何 CSS 属性。即直接在这个元素的标签上加一个style属性

例：<p style="color:red; background-color: orange;">ChrisChenJL·宸叡</p>

上面的例子中，为段落标签加了一个文字颜色样式和背景颜色样式，将文字颜色变为红色，将背景颜色变为橙色。可是这样的写法，仅对于当前的段落标签中的内容是有效的。

注意：因为要将表现和内容混杂在一块儿，内联样式会损失掉样式表的许多优点。请慎用这种方法

<!-- color:内容（文字）颜色 background-color:背景颜色 -->
<p style="color:red; background-color: orange;">ChrisChenJL·宸叡</p>

二、内部样式表

内部样式表也被称做“嵌入式样式表”，将样式表的内容单独定义在HTML文件中的某个部分，整个html页面均可使用内部样式表（嵌入式样式表）中的内容。

你可使用 <style></style> 标签在文档头部定义内部样式表

<style></style>标签，是样式表标签。若是咱们须要在html页面中直接书写css代码，那么就须要使用到这一组标签。样式表的内容直接定义在这组标签中便可

type属性：用来告诉浏览器，这里面要写的是什么内容。基本上如今能够省略，可是在开发习惯上仍是很是建议你们加上这个内容。

text/css属性值：表明内容是样式表。

注意：使用内部样式表须要在每一个网页中单独定义，而且做用范围也只对当前网页有效。

<style type="text/css"> h1 {  color: hotpink; } h2 {  color: yellowgreen; } </style>
<body>
	<!-- 使h1标签中内容颜色为 粉红色 使h2标签中内容颜色为 草绿色 -->
	<h1>ChrisChenJL</h1>
	<h2>宸叡</h2>
</body>

三、外部样式表

外部样式表也被称做“外联样式表”，将样式表的内容定义在一个单独的“.css”文件中，若是有html页面须要使用这个样式表文件中的内容，那么直接在html文件中单独引用这个样式表文件便可使用这个文件中所定义的样式表内容。

注意：外部样式表的定义，直接在文件中定义选择器和样式属性内容，不须要且必定不要再加<style></style>标签。

当样式须要应用于不少页面时，外部样式表将是理想的选择。在使用外部样式表的状况下，你能够经过改变一个文件来改变整个站点的外观。每一个页面使用 <link> 标签连接到样式表。 <link> 标签在（文档的）头部位置。

格式：<link rel="stylesheet" href=" /*css文件的位置*/ ">

<link/>标签：用于在html文件中引用一个须要使用的样式表。属于<head>标签的子标签，即定义在<head></head>中

href属性：定义引用内容的路径，能够是绝对路径或者相对路径。

type属性：设定引用的内容的MIME类型，也就是告诉浏览器应该以什么方式解读这个文件（可不写）

rel属性：规定当前文档与被连接文档之间的关系

stylesheet属性值：指示这个引用的文件是一个样式表文件

<head>
	<meta charset="UTF-8">
    <title>Chris</title>
	<!--引用外部样式表，link + Tab 输入外部样式表的路径-->
    <link rel="stylesheet" type="text/css" href="css/my.css">
<head>

注意：

一个html文件能够同时引用多个外部样式表，同理一个外部样式表文件能够被多个html文件引用

文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

四、样式表的优先级

行内>外部=内部(内外取决于顺序）

注意：内部样式表和外部样式表谁定义的位置更加靠后，谁优先级就更高

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css"> /* 内部样式 */ h3{ color:green;} </style>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"/>-->
</head>
<body>
<!-- 行内>外部=内部(内外取决于顺序） 内部样式表和外部样式表谁定义的位置更加靠后，谁优先级就更高 -->
    <h3 style="color: #bb0000">ChrisChenJL·宸叡</h3>
    <h3>ChrisChenJL·宸叡</h3>
</body>

3、CSS选择器

将指定的样式表定义内容定义做用于指定的元素的媒介，就叫作选择器。

只有内部、外部样式表涉及到选择器

选择器的做用是根据不一样的条件指定到不一样的元素

一、原生选择器

1）元素选择器（标签选择器）

元素选择器是根据标签的名称选择须要修饰的元素。定义了元素选择器后，全部使用此标签名称定义的内容都会听从此选择器内定义的样式内容。也被称为标签选择器。

语法格式：S{...}，S为选择器名
标签名称
{
/* 样式表定义内容 */
}

例：将p标签中的文字定义为红色，黑体，32px

<head>
	<style> p {  color:red; font-family:黑体; font-size:32px; } </style>
</head>
<body>
	<p>ChrisChenJL·宸叡</p>
</body>

2）类选择器

如今存在一个html文档，里面存在多个段落标签。咱们并不想对于当前页面中全部p标签都生效，只对其一部分进行样式的设定。那么类选择器是最适合的。

语法格式：.S{...}，S为选择器名
.类选择器名称
{
/* 样式表内容 */
}

a.单个类选择器

例：设置高度为200px，宽度为500px，背景颜色红色

<head>
    <style> .s1 {  height:200px; width:500px; background-color: red; } </style>
</head>
<body>
	<p class="s1">你好</p>
</body>

b.多个类选择器

<head>
    <style> .a {  color: yellowgreen; } .b {  font-family: 华文彩云; } </style>
</head>
<body>
	<h1 class="a b">ChrisChenJL·宸叡</h1>
<body>

如上所示，class属性中，能够同时引用多个类选择器，多个选择器间的引用使用空格分隔。两个词组的顺序能够随意

c.多类选择器

<head>
    <style> .a {  color: yellowgreen; } .b {  font-family: 华文彩云; } .a.b {  font-size: 100px; } </style>
</head>
<body>
	<h1 class="a">ChrisChenJL</h1>
	<h1 class="b">宸叡</h1>
	<h1 class="a b">ChrisChenJL·宸叡</h1>
</body>

如上所示，若是有一个元素，同时引用了a、b两个类选择器，那么这个元素会同时听从这三个选择器中定义的样式属性内容。

3）ID选择器

在某些方面，ID选择器与类选择器的使用上极其相似，不过有一些重要差异。除了定义方式和引用方式上的区别之外，还有一些其余方面的区别，后面会讲到。

语法格式：#S{...}，S为选择器名
#id选择器名称
{
/* 样式表中定义的内容 */
}

例：设定引样式为文字颜色黄绿，背景颜色红色，字体42px

<head>
    <style> #ab {  color: yellowgreen; background-color:red; font-size:42px; } </style>
</head>
<body>
	<h1 id="ab">ChrisChenJL·宸叡</h1>
</body>

4）ID选择器与类选择器的区别

a.区别1

在一个html页面中，ID选择器会使用一次，而且仅仅一次

一般状况下一个html页面全部的元素id值都是不一样的，即原则上来讲，若是在同一个html文档中，若是出现了两个元素的id值彻底相同的状况，那么这个html文档是不严谨的。

b.区别2

ID选择器不能同时引用多个，也不能结合使用

正由于有了区别1的存在，因此id选择器不能象类选择器那样迭代使用。另外html的标准规定，元素的id属性值中不能包含空格，这也做为没法同时引用多个的重要缘由之一。

c.区别3

ID能包含更多定义

相似于类，能够独立于元素来选择 ID。有些状况下，您知道文档中会出现某个特定 ID 值，可是并不知道它会出如今哪一个元素上，因此您想声明独立的 ID 选择器。

例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项仍是一个小节标题。您只知道每一个文档都会有这么一个最重要的内容，它可能在任何元素中，并且只能出现一个。

d.区别4

在定义上的不一样

定义的时候，类选择器使用" . "为开头定义，而id选择器使用" # "为开头来定义。

e.区别5

在引用方式上的不一样

引用的时候类选择器使用class属性进行引用，而ID选择器使用id属性来引用。

二、原生选择器的优先级

ID> 类 >元素

<head>
    <style> /*元素选择器*/ h1 {  color: yellowgreen; } /*ID选择器*/ #ab {  color: hotpink; } /*类选择器*/ .ab {  color: purple; } </style>
</head>
<body>
	<!-- ID> 类 >元素 -->
	<h1 id="ab" class="ab">ChrisChenJL·宸叡</h1>
</body>

三、衍生选择器（语法糖）

强调的是选择器与选择器之间的关系。

1）后代选择器（隔代关系）

指定目标选择器必须处在某个选择器对应的元素内部。后代选择器主要用来选择某个元素的全部后代元素（儿子、孙子、重孙子…）

语法格式：A B{...}，A、B为HTML元素/标签，表示对处于A中的B有效
[选择器名称] [选择器名称] …
{
/* 样式表定义内容 */
}
注意:父元素与子元素之间至少有一个空格，能够有不少空格，建议使用一个空格便可

例：将.a下存在的.b文字颜色变为巧克力色

<head>
    <style> .a .b {  color: chocolate; } </style>
</head>
<body>
<p class="a">Chris1</p>
<em class="a">
    <u>
        <p class="c">Chris2
        <!--Chris3颜色变为chocolate-->
        <p class="b">Chris3</p>
        </p>
    </u>
</em>
</body>

2）派生选择器（直接后代）

指定目标选择器必须处在某个选择器对应的元素内部。与后代选择器的区别是，后代选择器选的是全部子元素（儿子、孙子、重孙子…），而派生选择器只选第一级子元素（只选儿子不选孙子）内的全部内容

语法格式：A>B{...}，A、B为HTML元素/标签，表示对处于A下一级的B有效
[选择器名称]>[选择器名称]>…
{
/* 样式表定义内容 */
}
注意:

父元素与子元素之间最好不使用空格，一个 “ > ” 便可

派生选择器选择的是子元素内的全部内容

例：将.a下一级.b中的文字颜色变为绿色

<head>
    <style> .a>.b {  color: green; } </style>
</head>
<body>
	<span class="a">
	    Chris1
	    <!--Chris二、Chris3变为绿色-->
	    <span class="b">
	        Chris2
	        <span class="c">Chris3</span>
	    </span>
	</span>
	<span class="b">Chris4</span>
</body>

3）选择器分组（各自）

若是你须要对于多个选择器，定义成同一个样式，能够选择使用选择器分组。至关于定义了多个样式内容相同的多个选择器，“,” 为选择器分组。

这些选择器是并列关系，也就是说都是同样的，与顺序无关，并且使用选择器分组，能够同时分组多种选择器；即并非只有都是标签选择器能够定义在一个选择器分组中。

语法格式：A,B{...}，A、B能够为不一样的选择器
[选择器名称],[选择器名称],…
{
/* 样式表定义内容 */
}
注意：使用选择器分组的时候须要使用半角逗号 “ , ”来对每一个选择器名称进行分割。若是不使用逗号而使用空格则又会具有其余的意义。

例：将h1，h2标签中的文字颜色变为绿色

<head>
	<style> /* body>h1,h2 也可*/ h1,h2 {  color: green; } </style>
</head>
<body>
	<!--Chris一、Chris2颜色都变为绿色-->
    <h1>Chris1</h1>
    <h2>Chris2</h2>
</body>

四、其余类型选择器（了解便可）

1）通配符选择器

通配选择器用一个星号（*）表示。单独使用时，这个选择器能够与文档中的任何元素匹配，就像一个通配符。

语法格式：*{...}，* 表明全部标签，全部内容
*
{
/* 样式表定义内容 */
}
注意：* 能够表明一切

例：u标签下字体颜色红色，p标签下字体绿色，全部字体为方正少儿简体

<head>
    <style> /* 通配符选择器 “ * ” 能够表明全部标签 */ * {  font-family: 方正少儿简体; } u>* {  color: red; } p>* {  color: green; } </style>
</head>
<body>
	<!--Chris1/2/3/4 字体都是方正少儿简体-->
	<u>
		<!--Chris一、Chris2颜色为红色-->
	    <em>Chris1</em>
	    <strong>Chris2</strong>
	</u>
	<p>
		<!--Chris三、Chris4颜色为绿色-->
	    <em>Chris3</em>
	    <strong>Chris4</strong>
	</p>
</body>

2）相邻兄弟选择器

若是须要选择紧接在一个元素后面的另外一个元素，而且两者在同一个父元素下，可使用相邻兄弟选择器。这两个相邻元素必定是同级元素

语法格式：A+B{...}，A，B是两个相邻的同级元素
A+B
{
/* 样式表定义内容 */
}
注意：

具有相同的父元素

紧接相邻

指定元素以后，不是以前

例：将strong标签后面的span标签中的文字颜色变为绿色，将em标签后面的span标签中的文字颜色变为红色

<head>
    <style> strong+span {  color: green; } em+span {  color: red; } </style>
</head>
<body>
    <strong>Chris1</strong>
    <!--Chris2为绿色-->
    <span>Chris2</span>

    <em>Chris3</em>
    <!--Chris4为红色-->
    <span>Chris4</span>
</body>

3）属性选择器

元素选择器实际上是属性选择器的一个特例，在属性选择器基础上还能对选择器描述得更具体

语法格式: 元素名称[属性名="属性值"]{…}
元素名称[属性名=“属性值”]
{
/* 样式表定义内容 */
}
注意：

属性值部分是可选择的

并无获得全部浏览器支持，所以不建议使用

<head>
    <style> [align="middle"][name="2"] {  color: red; } .a[align="middle"][name] {  color: green; } </style>
</head>
<body>
	<!--Chris1文字为红色-->
    <h1 align="middle" name="2">Chris1</h1>
    <h1 align="right" name="1">Chris2</h1>
    <h1>Chris3</h1>
    <!--Chris4文字为绿色-->
    <h1 class="a" align="middle" name="1">Chris4</h1>
</body>

4、CSS文字属性

CSS文字属性定义字体，加粗，大小，文字等样式。

使用这些与文字相关的属性，对文字字体等相关的样式的展现效果进行规划。

一、font-family 属性（字体类别）

font - family 属性指定一个元素的字体。

属性值的状况	示例
值状况1	[字体名称]
值状况2	[字体名称1],[字体名称2],[字体名称3]…

font-family 属性能够同时设置一个或者多个字体名称值。当设置多个字体名称值的状况下，浏览器会从第一个值开始采起，若是不认识这个值则会采起下一个值，直到遇到浏览器所识别的有效值为止。

二、font-size 属性（文字大小）

font-size 属性用于设置文字大小。

属性值	说明
xx-small	绝对字体尺寸：最小
x-small	绝对字体尺寸：较小
small	绝对字体尺寸：小
medium	绝对字体尺寸：正常默认值
large	绝对字体尺寸：大
x-large	绝对字体尺寸：较大
xx-large	绝对字体尺寸：最大
larger	相对字体尺寸：相对于父对象中字体尺寸进行相对增大
smaller	相对字体尺寸：相对于父对象中字体尺寸进行相对减少
length	可采用百分比或长度值，不可为负值，其百分比取值是基于父对象中的字体尺寸

三、font-variant 属性（小型大写字母替换）

font-variant 属性主要用于定义小型大写字母文本。

font-variant 属性设置小型大写字母的字体显示文本，这意味着全部的小写字母均会被转换为大写，可是全部使用小型大写字体的字母与其他文本相比，其字体尺寸更小。

属性值	说明
normail	正常（默认值）
small-caps	小写转换为大写

四、font-style 属性（文字倾斜）

font-style 属性指定文本的文字倾斜样式。

属性值	说明
normail	正常的字体（默认值）
italic	斜体展现
oblique	偏倾斜（不是那么斜）

注意：<em></em>标签的实现原理是其中附带的 font-style: italic 样式，使其拥有了字体倾斜的效果。（预约义样式表）

五、font-weight 属性（文字加粗）

font-weight 属性设置文本文字的粗细。

属性值	说明
normail	正常粗细（默认值）
lighter	特细字体
bold	粗体展现
bolder	偏倾斜特粗字体
(number)100 ~ 900	通常状况下采起整百的数字

注意：<strong></strong>标签的实现原理是其中附带的 font-weight: bold 样式，使其拥有了字体加粗的效果。（预约义样式表）

六、文字的复合属性（我的不建议使用）

经过设置font的复合属性能够简化代码，也就是说只是用一个属性针对于字体的各个方面进行设置。

复合属性格式：
font:属性值1 属性值2 属性值3;(注意使用空格分割)

其顺序为：
font:
[font-style](字体样式)
[font-variant](小型大写字母)
[font-weight](字体粗细)
[font-size](字体大小)
[line-hight](行高)
[font-family](字体系列)
若是某个值不须要设置，那么能够不写，可是顺序是不能乱的。

顺序示例：
font : font-style font-variant font-weight font-size line-height font-family;

注意：

font属性中必须具有font-size和font-family若是不写这两项，其余的即便写上了也没有什么做用。

另外必须严格遵照顺序

5、CSS颜色&背景属性

一、color 属性（元素颜色）

color 属性指定文本的颜色。

color 属性值：

关键字属性值（color: red;）

RGB色值表（color: #FFE1FF;）

二、background-color 属性（背景颜色）

background-color 属性：用于指定某个元素的背景颜色，在css中使用此属性不只能够设置网页的背景颜色也能够设置文字的背景颜色。

background-color 属性值：

关键字属性值（background-color: red;）

RGB色值表（background-color: #FFE1FF;）

三、background-image 属性（背景图像）

background-image属性：用于设置元素的背景图像，图像能够是绝对路径或者相对路径。

写法：background-image:url(图片路径);

四、background-repeat 属性（背景重复）

background-repeat 属性：用于设置图片是否平铺，而且能够设置如何平铺。

属性值	说明
no-repeat	不进行平铺
repeat-x	只在水平方向上平铺
repeat-y	只在垂直方向上平铺

五、background-attachment 属性（背景附件）

background-attachment 属性：能够设置背景图像随着对象（内容）滚动仍是固定不动。

属性值	说明
scroll	随着图像滚动，是默认选项
fixed	背景图像固定在页面上不动，只有其余的内容随着滚动条滚动

六、background-position 属性（背景位置）

background-position 属性：用于设定背景图片的所处位置，这个属性只能应用于块级元素和替换元素（替换元素包括：img、input、textarea、select、object）

取值方式	取值	说明
数字取值	x(数值)	设置网页的横向位置，能够是全部的尺度单位
	y(数值)	设置网页的纵向位置，能够是全部的尺度单位
百分比取值	0% 0%	左上位置
	50% 0%	靠上居中位置
	100% 0%	右上位置
	0% 50%	靠左居中位置
	50% 50%	正中间位置
	100% 50%	靠右居中位置
	0% 100%	左下位置
	50% 100%	靠下居中位置
	100% 100%	右下位置
关键字取值	top left	左上位置
	top center	靠上居中位置
	top rihgt	右上位置
	left center	靠左居中位置
	center center	正中间位置
	right center	靠右居中位置
	bottom left	左下位置
	bottom center	靠下居中位置
	bottom right	右下位置

七、背景图像的复合属性

background 属性：取值能够包括：背景颜色、背景图像、背景重复、背景附件、背景位置，各个属性之间可使用空格进行分割。

复合属性格式：
background: 属性值1 属性值2 属性值3;(注意使用空格分割)

其顺序为：
background:
[background-color](背景颜色)
[background-image](背景图像)
[background-repeat](背景重复)
[background-attachment](背景附件)
[background-position](背景位置)
若是某个值不须要设置，那么能够不写，可是顺序是不能乱的。

顺序示例：
background : background-color background-image background-repeat background-attachment background-position;

注意：顺序不要乱！

八、颜色的表示方法

1）英文关键字方式

英文关键字方式即便以颜色的英文名称进行命名，基本上每一种颜色都有英文名称。但是针对于色彩的明暗和深度细微的内容，颜色名称没法彻底标识。

2）RBG颜色值

也许你们很早就知道，光的三元色为 Red（红色），Blue（蓝色），Green（绿色）。使用这三种颜色进行不通配比的混合能够合成生活中咱们可能看到的任何一种颜色。将这三种颜色的配比以16进制的方式表示出来就是RGB颜色值。

6、CSS文本属性

一、word-spacing 属性（单词间隔）

通过博主实际测试，单词间隔属性可能仅对于英文内容有所效果，能够增长或减小单词与单词之间的空白（空格间距）。

默认取值是 normal 也就是正常间隔，也能够设置为长度单位的值，而且可使用负值

二、letter-spacing 属性（字符间隔）

此属性通过博主实际测试，对于英文和中文都一样生效。能够增长或减小字符间的空白（字符间距）

同上，也可使用负值。

三、text-decoration 属性（文字修饰）

text-decoration 属性 定义对于一些文字展现出来的效果，例以下划线、上划线、删除线等。

属性值	说明
none	默认值，表明不进行任何形式的修饰
underline	下划线，会对于所修饰的内容在展现上带有下划线效果
overline	上划线，会对于所修饰的内容在展现上带有上划线效果
line-through	删除线，会对于所修饰的内容在展现上带有删除线的效果
blink	文字闪烁

注意：<u></u>标签的实现原理是其中附带的 text-decoration: underline 样式，使其拥有了下划线的效果。（预约义样式表）
标签

四、text-align 属性（水平对齐方式）

text-align 属性：用于设置文本内容的水平对齐方式。

属性值	说明
left	向左对齐
right	向右对齐
center	居中对齐
justify	两端对齐

五、vertical-align 属性（垂直对齐方式）

vertical-align 属性：用于设置文本内容的垂直对齐方式

属性值	说明
baseline	默认浏览器的垂直对齐方式
sub	文字的下标
super	文字的上标
top	垂直靠上对其
text-top	使元素和上级元素的字体向上对齐
middle	垂直居中对齐
text-bottom	使元素和上级元素字体向下对齐

六、text-transform 属性（文本转换）

text-transform 属性：专用于转换文本中英文字母的大小写

属性值	说明
none	（默认值）不进行文本转换
capitalize	将内容中每一个单词首字母转换为大写
uppercase	将内容中全部的英文字母都转换为大写
lowercase	将内容中全部的英文字母都转换为小写

七、text-indent 属性（文本缩进）

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

属性值	说明
数值（length）	定义固定的缩进。默认值：0
百分比（%）	缩进一段基于当前行的长度为单元的距离

八、line-height 属性（行高）

line-height 属性：设置段落中行与行之间的距离。值能够是长度，倍数和百分比，这里咱们先暂时只了解长度单位的方式（最经常使用）。

属性值	说明
normail	默认值，设置合理的行间距
(length)	设置固定的行间距（单位 px ）

九、white-space 属性（处理空白）

white-space 属性：用于设置页面内容中空白的处理方式，默认有三个值。

属性值	说明
normail	（默认值）将内容中连续的多个空白部分合并
pre	将内容中全部的空白部分都原样的保留下来
nowrap	强制在同一行内展现全部的文本内容，直到结束或者换行（`<br/>`）

7、CSS超连接伪类

超连接伪类样式：指的是对于超连接的各类状态进行必定设置。这些状态大概分为：点击以前、鼠标悬浮状态下、点击时、点击以后。咱们能够经过超连接伪类样式针对于这些状态下的超连接进行必定的样式修饰。

一、a:link（正常状态，未访问过的连接）

当一个超连接初次展现的时候，这个时候是默认的状态，尚未进行过任何的操做，使用选择器：a:link

二、a:visited（用户已访问过的连接）

当超连接点击以后，其样式会与从前有所区别，使用选择器：a:visited

三、a:hover（鼠标悬停状态）

当你的鼠标悬浮于超连接上方，可是尚未任何操做的时候，使用选择器：a:hover

四、a:active（鼠标点击的那一刻）

这里说明的是当你的鼠标按下了超连接，可是尚未抬起来的时候所约束的样式，使用选择器：a:active

连接样式的顺序记忆：
L(link)OV(visited)E and H(hover)A(active)TE

五、cursor 属性（鼠标悬停样式）

设置鼠标的展现形态，可是须要注意的是，在不一样的浏览器和不一样的操做系统中展现效果会有所不一样，可是其展现效果所表明的意义是不变的。

属性值	说明
url	能够引用一个图片设置鼠标的展现效果，可是若是使用这个属性的时候通常会再定义一种普通光标，防止url一旦无效的时候没有可用的光标来展现
default	浏览器默认的状态，一般在大多数的浏览器中展现的效果都是一个箭头
auto	根据浏览器的不一样而定，这个取值是听从在浏览器中定义的光标样式
crosshair	光标呈现为一个十字线
pointer	光标呈现为一个指示到连接的指针（小手样式）
move	光标标识此对象可能被移动
text	光标指示文本
wait	在老版本的系统中此光标展现效果如同一个沙漏图标，新系统中有滚动图标。通常表示正在忙
help	帮助类型的图标样式，通常展现效果为一个问号

8、CSS盒子模型

一、什么是盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

Margin（外边距） - 清除边框外的区域，外边距是透明的。

Border（边框） - 围绕在内边距和内容外的边框。

Padding（内边距） - 清除内容周围的区域，内边距是透明的。

Content（内容区） - 盒子的内容，显示文本和图像。

二、Content（内容区）

咱们只使用图片标签来讲，若是你想使用图片标签，那么必然是想展现一个图像。那么你所展现图像就是内容，而为了所展现具体的内容所占用的一块区域，咱们称之为内容区。也是咱们所能直观看到的一个部分；能够说内容区是盒子模型中必要的一个部分。

1）width 属性（宽）& height 属性（高）

width 属性：针对于内容区的宽度进行设置，最常使用的是像素单位。
height 属性：针对于内容区的高度进行设置，最常使用的是像素单位。

2）overflow 属性（溢出内容处理）

overflow 属性：若是咱们内容区的大小已经没法知足容纳下咱们规划的内容，这个时候咱们所展现的内容会挤出到内容区和内边距之外的空间域之外的空间，这些挤出来的部分，咱们称之为“内容溢出”。而这个属性是针对于溢出部分的内容进行设置的属性。

属性值	说明
visible	（默认值）任凭内容溢出，内容有多少就展现多少，随意溢出
hidden	溢出部分的内容会被隐藏，只展现没有溢出部分的内容
scroll	内容会被剪裁，可是浏览器会在内容区展现一个滚动条，使得用户能够经过拖拽滚动天来正常预览到全部内容部分
auto	根据实际内容是否有溢出的状况，自行决定是否出现滚动条来实现拖动展现所有内容
inherit	使得当前元素的内容溢出属性值，跟从父元素的设置

三、Padding（内边距）

内边距所指的是元素的内容区距离元素的边框之间的那一块空间，通边框同样，元素上方、右方、左方、下方都可距离边框部分有必定的空间。

针对于内边距调整的有以下的几个属性：

属性	说明
padding-top属性	设置元素上方内边距的大小，最经常使用取值以像素为单位
padding-right属性	设置元素右方内边距的大小，最经常使用取值以像素为单位
padding-bottom属性	设置元素下方内边距的大小，最经常使用取值以像素为单位
padding-left属性	设置元素左方内边距的大小，最经常使用取值以像素为单位
padding复合属性	可使用这个复合属性针对于元素的四边内边距进行统一的设置，根据值的个数不一样，所设定的内容有所区别
	一个值：设置元素上下左右四个方向的样式
	两个值：第一个值是元素上方和下方的内边距，第二个值为元素左方和右方的内边距
	三个值：第一个值是元素上方的内边距，第二个值为元素左方和右方内边距，第三个值为元素下方的内边距
	四个值：四个值分别对应元素的上方、下方、左方、右方的内边距

四、Border（边框）

边框所指的就是元素的四周边框。在HTML中不少块级元素都有边框。而一个元素一般是矩形的，既然是矩形就涉及到四个边；分别是上、右、下、左。

1）单一属性

总共的属性以下：

属性	属性值	说明
上方边框的属性	border-top-width	上边框的宽度，一般以像素值为单位
	border-top-style	上边框的展现样式，有几个固定的取值
	border-top-color	上边框的颜色，取颜色值单位
下方边框的属性	border-bottom-width	下边框的宽度，一般以像素值为单位
	border-bottom-style	下边框的展现样式，有几个固定的取值
	border-bottom-color	下边框的颜色，取颜色值单位
左方边框的属性	border-left-width	左边框的宽度，一般以像素值为单位
	border-left-style	左边框的展现样式，有几个固定的取值
	border-left-color	左边框的颜色，取颜色值单位
右方边框的属性	border-right-width	右边框的宽度，一般以像素值为单位
	border-right-style	右边框的展现样式，有几个固定的取值
	border-right-color	右边框的颜色，取颜色值单位

2）复合属性

经过如上的方式能够正常的操做边框，可是已经至关的麻烦。至少代码量是至关的庞大。因此咱们可使用复合属性针对于边框进行设置：

属性	说明
上边框的复合属性	`border-top: width style color;`
下边框的复合属性	`border-bottom: width style color;`
左边框的复合属性	`border-left: width style color;`
右边框的复合属性	`border-right: width style color;`

3）指定样式属性的复合属性

border-style：
border-color：
border-width：

这些属性能够给出1~4个值，不一样的值表明的顺序以下：

一个值：设置上下左右四个方向的样式。
两个值：第一个值表明上下的样式，第二个值表明左右的样式。
三个值：第一个值表明上的样式，第二个表明左右的样式，第三个表明下的样式。
四个值：上、右、下、左

4）border-style 属性（边框样式）

border-style 属性：边框样式属性，主要针对于边框的展现效果进行一些设置，其默认取值包括但不限于以下的几个：

属性值	说明
none	默认值，无边框
dotted	以小圆点组成的边框
dashed	以虚线构成的边框
solid	以实线构成的边框
double	以双实线构成的边框
groove	边框具备立体感的凹槽
ridge	边匡成脊形
inset	使整个边框凹陷，即在边框内嵌入一个立体边框
outset	使整个边框凸起，即在边框外嵌入一个立体边框

5）border-`xx`-`xx`-radius（边框弧度）

角边框是指经过使用样式属性针对于块元素的角产生一些弧度。块元素都是矩形的，因此涉及到四个角。咱们能够针对每个角进行设置。

属性值	说明
border-top-left-radius	设置左上角的弧度，单位为距离
border-top-right-radius	设置右上角的弧度，单位为距离
border-bottom-right-radius	设置右下角的弧度，单位为距离
border-bottom-left-radius	设置左下角的弧度，单位为距离
border-radius	复合属性，同时设定多个角的弧度

6）box-shadow: 属性（边框阴影）

box-shadow 属性：针对于内容的边框背后产生必定的阴影效果。自己就是一个复合属性，值的顺序以下：

单位为长度，设定横向（正为右、负为左）的阴影距离。
单位为长度，设定纵向（正为下、负为上）的阴影距离。
单位为长度，设定阴影的虚化程度。
单位为颜色，设置阴影所采起的主颜色。

五、Margin（外边距）

外边距位于元素的最外围，其并非一条线而是通内边距同样是一块距离。外边距使得和自制件没必要紧凑的拼接在一块儿，是CSS布局的一个重要手段。设置外边距的属性有以下几项：

属性	说明
margin-top属性	设置元素的上方外边距大小，一般以像素为单位
margin-right属性	设置元素的右方外边距大小，一般以像素为单位
margin-bottom属性	设置元素的下方外边距大小，一般以像素为单位
margin-left属性	设置元素的左方外边距大小，一般以像素为单位
margin复合属性	这是一个复合属性，能够同时针对于元素的四周外边距进行统一的设置，根据其取值个数的不一样，所设置的方向有所区别。各个值之间以空格做为分割
	一个值：设置元素上方和下方的外边距
	两个值：第一个值设置元素上方和下方的外边距，第二个值设置的是元素左方和右方的外边距
	三个值：第一个值设置元素上方的外边距，第二个值设置的是元素左方和右方的外边距，第三个值设置的是元素下方的外边距大小
	四个值：四个值分别对应设置元素的上方、右方、下方、左方的外边距大小

9、CSS控制显示类

一、块级标签

默认在新的一行上开始，而且直接占据一整行，与内容多少无关。
高度、行高、外边距、内边距等均可以自行控制。
宽度默认始终直接占据父容器的宽度。
能够容纳其余内联元素或块级元素。

块级标签也被称为：块级元素，块元素等

二、行级标签

默认状况下与其余元素在同一行上展现。
高、行高、内外边距一部分能够自行控制。
宽度默认只与内容有关。
只能容纳文本或者其余的行内元素。

行级标签也被称为：内联元素、行内元素、行级标签等

三、visibility 属性（元素访问性/可见性）

visibility 属性：设置是否显示元素。

属性值	说明
visible	设置对象可见默认值
hidden	设置对象隐藏不可见，可是占据原有的空间

四、display 属性（控制显示类/显示）

display 属性：控制元素内容的显示类型。

属性值	说明
none	将对象直接隐藏，而且不占据原有空间
inline	将元素指定为内联元素
block	将元素指定为块元素
inline-block	将元素指定为内联块元素

你会发现，经过这个控制显示类的属性能够将元素的类型进行转换。

10、CSS文档流

文档流描述的就是元素在页面上默认的排列顺序，即元素在空间上的占用规则。

也就是说，若是你不使用某些样式或者属性进行人工干预的时候，默认状况下元素的堆叠排列尤为本身的规则和顺序，这种规则和顺序咱们称之为“默认文档流”

默认文档流所描述的内容是：将整个浏览器窗口自上而下按照一行一行地分割成不一样的行，而且每一行中的元素内容按照从左到右的顺序堆叠排列。这就是默认文档流所约束的内容。

不是全部的元素都占据文档流的

网页中绝大多数元素，都有其本身的样子和展现效果也会默认占据必定的空间，即便这必定的空间能够人工干预。可是也有一些内容是不占用文档流的。

例如表单中的隐藏域<input type="hidden"/>在页面上没有任何的展现效果。

干预

咱们也可使用某些方式干预，使得默认状况下占据文档流的元素变得不占用文档流，或者更准确地说脱离了文档流的约束。

后面咱们立刻就要说到的定位属性就是其中一种。

一、普通流

默认的网页内容排版布局，普通流所规定的是网页中的内容行级内容按照从左到右的顺序排列，块级内容按照从上到下的顺序排列。即默认状况下元素的占用规则。

块元素：高度看内容，宽度占据一整行
行元素：高度看内容，宽度看内容

二、浮动流

经过设定浮动能够设置内容向指定的方向排列，即元素在浮动的时候所听从的文档流。

块元素：默认内容撑开宽度
行元素：能够支持宽高

三、定位流

经过定位方式规定元素应该处于的位置，即元素在定位的时候所听从的文档流。

11、CSS浮动

一、什么是浮动

CSS的 float属性（浮动属性），可使得元素向左或者右移动，而且其周围的元素也会从新排列。一般状况下浮动常常用于图像，但其在布局的过程当中也一样重要。

二、float 属性（浮动）

float 属性：控制元素的浮动方向

属性值	说明
left	使得元素向左方浮动
right	使得元素向右方浮动

三、clear 属性（清除浮动）

clear 属性：清除浮动的属性，所谓的清除浮动，并非清除自身的浮动，而是清除因其余元素的浮动致使的对自身的展现效果的影响。

属性值	说明
left	清除向左的浮动效果
right	清除向右的浮动效果
both	清除两侧的浮动效果

四、清除浮动的集中常见作法

1）方法一

使用空标签的方式清除浮动，在浮动元素后面加一个div，样式属性为：height:0; font-size:0; clear:both;

原理：若是一个内容浮动，会对其余内容产生影响，那么这种影响必定是智能对于其后面的元素产生，对于此元素以前的内容是不会有影响的。这个时候咱们加了一个空的div元素，使其内容区高度为0，字号为0，清除两边的浮动
这样作的缘由：在IE6中的一个特色：IE6最小高度为19像素，当元素高度不足19像素的时候，IE6会给其19像素的高。

2）方法二

使用换行来清除浮动效果

在浮动元素下面添加：<br clear="all"/>
在浮动元素下面添加：<br style="clear:both;"/>

3）方法三

伪类选择器来实现（主流方法）

.clear{zoom: 1;}
.clear:after{content:''; display:block; clear:both}

12、CSS定位

一、position 属性（定位方式）

position 属性：使用定位方式属性能够控制浏览器如何定位html元素

属性值	说明
static	默认值，若是咱们的position的属性值设置为static，那么咱们能够认为这个元素根本没有定位。
absolute	使用绝对定位，须要同时使用left、right、top、bottom等属性进行定位。（经常使用）
fixed	固定定位，当前浏览器窗口滚动的时候元素不跟着滚动
relative	采用相对定位，对象不可重叠。（经常使用）
sticky	粘性定位的元素是基于用户的滚动位置，在 `position: relative` 与 `position: fixed` 定位之间切换。

二、元素位置属性（定位偏移量）

元素位置属性与定位方式共同决定元素的具体位置。

top属性：auto|长度值|百分比（经常使用）

right属性：auto|长度值|百分比

bottom属性：auto|长度值|百分比

left属性：auto|长度值|百分比（经常使用）

注意：auto表明的是采起默认值；长度值包括数字和单位，也可使用百分比来设置。

三、定位的类型

1）相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它本来所占的空间仍保留。

所相对的是元素本来应该所处的位置

不影响元素自己的特性

不使元素脱离文档流

若是没有定义偏移量，对元素自己没有任何影响。

2）绝对定位

设置为绝对定位的元素框从文档流彻底删除，并相对于其包含块定位，包含块多是文档中的另外一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

使得元素彻底脱离文档流（可使用两个div演示）

使内嵌（说白了就是行级标签）支持宽高（可使用行级标签演示）

块标签内容撑开宽度（可使用块标签进行演示）

若是有定位父级，相对于父级发生偏移，若是没有父级相对于整个窗口进行偏移。(能够结合实际例子演示)

绝对定位一般配合相对定位一同使用。

注意：若是往后你须要使用绝对定位，那么你必定要搞清楚，绝对定位究竟是基于什么去进行定位的

3）固定定位

固定定位所指的是将一个元素固定在浏览器当前窗口的指定位置，不随着浏览器滚动条的滚动而随之滚动。也能够经过偏移量对其进行设置。

IE6不支持固定定位方式

使用频率并不高

始终是针对于整个文档定位（整个浏览器窗口）

4）粘性定位

粘性定位基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像position: relative;它的表现就像 position: fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，以后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一。换而言之，指定 top, right, bottom 或 left 四个阈值其中之一才可以使粘性定位生效。不然其行为与相对定位相同。

四、z-index 属性（定位层级）

z-index 属性：定位层级属性，放置一个number的值，能够有负数；定位元素默认后者高于前者；

说白了就是谁遮挡在谁的前面。（可使用四个DIV加上绝对定位的方式演示一下）

十3、总结

本系列博文主要用于博主本人平常的复习，既能够做为笔记保存，又能够随时翻看进行复盘使用。

也但愿在将来的某一刻能够帮得上你们~

博主萌新一枚，理解浅显，不足之处望各位大佬多多指教，嘿嘿~谢谢你们 ᕦ(･ㅂ･)ᕤ

Web前端之CSS