CSS

写进メ诗的结尾。

于 2024-08-12 12:46:53 发布

阅读量416

点赞数 6

分类专栏： Web前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_48158964/article/details/141128476

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

CSS 简介
CSS 基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
CSS 字体属性
- 字体类型
- 字体大小
- 字体粗细
- 字体样式
- 字体复合属性
CSS 文本属性
- 文本颜色
- 文本对齐
- 文本装饰
- 文本缩进
- 行间距
CSS 的引入方式
- 内部样式表（嵌入式引入）
- 行内样式表（行内式引入）
- 外部样式表（链接式引入）
Emmet 语法
- 快速生成 HTML 结构语法
- 快速生成 CSS 样式语法
CSS 的复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
- - 链接伪类选择器
  - focus 伪类选择器
CSS 的元素显示模式
- 块元素
- 行内元素
- 行内块元素
- 元素显示模式的转换
CSS 的背景
- 背景颜色
- 背景图片
- 背景平铺
- 背景图片位置
- 背景图像固定
- 背景复合写法
- 背景色半透明
CSS 的三大特性
- 层叠性
- 继承性
- 优先级
盒子模型
- 盒子模型的组成部分
圆角边框
盒子阴影
文字阴影
CSS 的浮动
- 浮动
- 常见的网页布局
- 清除浮动
- PS 切图
- 学成在线案例
CSS 的定位
- 定位
- 网页布局总结
- 元素的显示与隐藏

CSS 简介

CSS 的主要作用就是用于布局页面、美化网页。

HTML 的局限性

HTML 一般只关注内容的语义，比如 <h1> 标签表明这是一个一级标题，<p> 标签表示这是一个段落。虽然 HTML 可以做简单的样式，但样式不够丰富，而且容易显得臃肿和繁琐。

CSS-网页的美容师

CSS 是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为 CSS 样式表或级联样式表。

CSS 也是一种标记语言，它主要用于设置 HTML 页面中的文本内容（字体、大小、粗细等）、图片的外形（宽高、边框样式、边距等）、版面的布局和外观显示样式。

CSS 能够让我们的网页更加丰富多彩，布局更加灵活自如。简单理解就是 CSS 可以美化 HTML，让 HTML 更美观。

CSS 最大的价值就是实现了结构（HTML）与样式（CSS）的相互分离，从而使得 HTML 能够专注于网页结构，而 CSS 则负责网页样式。

CSS 语法规范

使用 HTML 时，需要遵从一定的规范，CSS 同样如此。想要熟练地使用 CSS 来对网页进行修饰，首先需要了解它的样式规则。

CSS 规则主要由两个部分组成：选择器和一条或多条声明。

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

该语句就是一个 CSS 样式，由选择器和多条声明组成。其中 h1 是选择器，color: red 是一条声明，color 是属性，red 是属性值；
属性指的是对指定对象设置的特定样式属性，例如字体大小、文本颜色等；
属性与属性值以键值对的形式出现，每个键值对后必须跟一个英文状态下的分号（;）。

简单来说，选择器就是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。

CSS 样式放在 <head></head> 中，并用 <style></style> 标签表示，如下所示：

<head>
	<style>
        h1 {color: red; font-size: 25px;}
    </style>
</head>

<body>
    <h1>
        优秀的网页美容师
    </h1>
</body>

CSS 代码风格

以下代码书写风格并不是强制规范，而是符合实际的开发使用：

样式格式书写
- 紧凑型格式
```
h3 {color: pink; font-size: 20px;}
```
- 展开型格式
```
h3 {
	color: pink;
	font-size: 20px;
}
```
- 强烈推荐使用展开型格式，更加直观
样式大小写风格
- 虽然样式也能用大写字母来表示，但是强烈推荐样式选择器、属性名、属性值等全部使用小写字母，特殊情况除外
样式空格风格
- 在冒号后面，属性值前面，保留一个空格
- 选择器和大括号之间保留一个空格

CSS 基础选择器

CSS 选择器的作用：选择器就是根据不同需求把不同的标签选出来，简单来说就是选择标签用的。

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

在该语句中，CSS 做了两件事：
	1.找到所有的 h1 标签，这就是选择器干的事
	2.设置这些标签内容的样式，比如颜色、字体大小

选择器可以分为基础选择器和复合选择器两大类，这里先了解基础选择器：

基础选择器是由单个选择器组成的，即只有一个选择器的情况
基础选择器包括标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签：

优点：能快速为页面中同类型的标签内容设置成统一的样式
缺点：不能设计差异化样式，只能选择全部的当前标签

语法如下：

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

<head>
	<style>
        p {
            color: red;
        }
        div {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>我有点帅</p>
    <p>我还很可爱</p>
    <p>我是个大财主</p>
    <div>今天挣一百万</div>
    <div>明天挣一千万</div>
</body>

类选择器

如果想要差异化选择不同的标签，单独为一个或某几个内容设置样式，可以使用类选择器。

类选择器在 HTML 中以 class 属性表示，在 CSS 中类选择器以一个点号（.）显示：

类选择器使用英文状态下的点号（.）进行标识，后面紧跟类名（该类名由我们自己定义，但是不要跟 HTML 标签名相同）
如果自己定义的类名由多个单词组成，可以用中横线（-）来区分这些单词
如果要在某个标签内容中同时调用多个类选择器，可以在 class 属性的属性值中写上多个类名，类名之间必须用空格分开
- 可以把一些标签元素相同的样式放到一个类里面
- 这些标签都可以先调用这个共同的类，再调用自己独有的类
- 多类名的使用可以减少 CSS 代码量，同时方便修改维护
- 多类名在后期布局比较复杂的情况下，使用的还是较多的
不要使用纯数字、中文等命名，尽量使用英文字母来表示

语法如下：

.类名 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

结构需用 class 属性来调用类选择器

<head>
	<style>
        .red {
            color: red;
        }
        
        .font25 {
            font-size: 25px;
        }
        
        .blue-italic {
            color: blue;
            font-style: italic;
        }
    </style>
</head>

<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red font25">来生缘</li>
        <li class="font25">李香兰</li>
        <li class="red">情书</li>
    </ul>
    <div class="blue-italic">我是蓝色斜体</div>
</body>

在实际开发中，类选择器中常用的类名命名如下：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left、right、center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll

id 选择器

id 选择器与类选择器较为相似，id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

注意：id 选择器只能调用一次，如果某个标签内容调用了该 id 选择器，则其他标签不能再调用。

语法如下：

#id名 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

结构需用 id 属性来调用 id 选择器

<head>
	<style>
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">我是小粉红</div>
</body>

类选择器与 id 选择器的区别：

在 CSS 中，类选择器用 . 定义，id 选择器用 # 定义
在 HTML 中，类选择器用 class 属性来调用，id 选择器用 id 属性来调用
类选择器可以被多个标签内容调用（即调用多次），而 id 选择器只能被一个标签内容（即调用一次）
在实际开发中，类选择器用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

通配符选择器

在 CSS 中，使用星号（*）来定义通配符选择器，它表示选取页面中的所有元素（标签）。

通配符选择器不需要调用，只需在 <style></style> 标签中定义好，自动就给所有的元素使用样式。

通配符选择器在特殊情况下才会使用，比如清除所有元素标签的内外边距。

语法如下：

* {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

* {
	margin: 0;
	padding: 0;
}

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	对相同标签的内容统一设置样式	不能差异化选择	较多	p {color: red;}
类选择器	对标签内容的样式进行差异化设置	可以根据需求选择	非常多	.nav {color: red;}
id 选择器	对标签内容的样式进行唯一性设置	只能在每个 HTML 文件中出现一次	一般和 JS 搭配使用	#nav {color: red;}
通配符选择器	选择所有的标签	不需要的也会被选择	特殊情况使用	* {color: red;}

每种基础选择器都有其使用场景，需根据具体场景来选择使用。

如果是修改样式，类选择器是使用最多的。

CSS 字体属性

CSS 的字体（font）属性用于定义字体类型、大小、粗细、样式（如斜体）等。

字体类型

CSS 使用 font-family 属性来定义文本的字体类型。

有几点需要注意：

字体类型可以用中文表示，比如 “微软雅黑”、“宋体” 等，但是更提倡用英文来表示，比如微软雅黑的英文表示为 “Microsoft YaHei”
font-family 属性的属性值可以有多个，表示多个字体，之所以设置多个字体是因为有的浏览器可能不支持显示某些字体，因此浏览器会从第一个字体开始查找，如果该字体能够显示则文本正常显示为该字体，否则就查找下一个字体能否显示，如果所有字体都不能显示则以浏览器默认的字体显示
如果有多个字体，则字体之间必须用逗号隔开
如果某个字体的名称由多个带有空格的单词组成，则需要用引号（单、双都行）括起来，如 “Microsoft YaHei”
推荐使用系统自带的字体，尽量避免使用特别花哨的字体，以保证在任何浏览器中都能正确显示字体
最常见的几种字体，body {font-family: "Microsoft YaHei", Tahoma, Arial, "Hiragino Sans GB";}
谷歌浏览器的默认字体是微软雅黑

p {font-family: Arial;}
div {font-family: "微软雅黑", Arial;}

<head>
    <style>
        h3 {
            font-family: "微软雅黑", Arial;
        }
        
        p {
            font-family: Arial;
        }
    </style>
</head>

<body>
    <h3>微软雅黑字体比较好看</h3>
    <p>尽量使用系统自带的字体</p>
</body>

属性值的单位 px 一定要写上，遗漏了就无法正确显示，px（像素）大小是网页最常用的单位
谷歌浏览器默认的字体大小为 16px
不同浏览器可能默认显示的字体大小不一致，我们尽量给一个明确的值，不要默认大小
可以给 body 指定整个页面的字体大小，但这不包括标题文本的字体大小
标题标签比较特殊，需要单独指定字体大小

<head>
    <style>
        h3 {
            font-size: 25px;
        }
        
        body {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h3>微软雅黑字体比较好看</h3>
    <p>尽量使用系统自带的字体</p>
    <p>不要使用特别花哨的字体</p>
</body>

字体粗细

CSS 使用 font-weight 属性来定义文本的字体粗细。

有几点需要注意：

字体粗细有 normal（正常字体，number=400）、bold（粗体，number=700）、bolder（特粗体）、lighter（细体）、number（100-900 的数值）
在实际开发中，更提倡使用数值来表示字体粗细，400 表示 normal，700 表示 bold
标题默认粗体显示，如果不想粗体显示，可将 font-weight 的属性值设置为 400 或其他小于 700 的数值

<head>
    <style>
        .bold {
            <!-- font-weight: bold; -->
            font-weight: 700;
        }
        
        .lighter {
            font-weight: lighter;
        }
    </style>
</head>

<body>
    <h3 class="lighter">微软雅黑字体比较好看</h3>
    <p class="bold">尽量使用系统自带的字体</p>
    <p>不要使用特别花哨的字体</p>
</body>

字体样式

CSS 使用 font-style 属性来定义文本的字体样式。

在实际开发中，很少给文本加斜体，反而会将斜体标签（em/i）改为正常字体。

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

.italic {
	font-style: italic;
}

字体复合属性

字体复合属性可以把字体的类型、大小、粗细、样式综合在一起来写，这样可以更节约代码。

有几点需要注意：

使用字体复合属性 font 时，属性值的顺序是固定的，不能随意更换，否则无法正确显示
font 属性的属性值之间以空格隔开
不需要设置的属性值可以省略（将取默认值），但必须保留 font-size 和 font-family，否则 font 属性将不起作用

body {
	font: font-style font-weight font-size/line-height font-family;	
}

<head>
    <style>
        p {
            font: 700 20px Arial;
        }
    </style>
</head>

<body>
    <p>尽量使用系统自带的字体</p>
    <p>不要使用特别花哨的字体</p>
</body>

字体属性总结

属性	表示	注意点
font-family	字体类型	一定要跟上单位，通常为 px
font-size	字体大小	实际工作中按照团队约定来写字体
font-weight	字体粗细	加粗是 700 或 bold，不加粗是 400 或 normal；数值不跟单位
font-style	字体样式	斜体为 italic，默认为 normal
font	字体复合属性	顺序是固定的，不能随意更换；字体大小和字体类型必须有

CSS 文本属性

CSS 的文本（text）属性用于定义文本颜色、对齐、装饰、缩进、行间距等。

文本颜色

在 CSS 中，使用 color 属性来定义文本的颜色。

div {
	color: red;
}

颜色表示	属性值
预定义的颜色值	red、green、blue 等
十六进制	#ff0000、#ff6600、#29d794 等
RGB 颜色空间	rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

文本对齐

在 CSS 中，使用 text-align 属性来定义文本内容的水平对齐方式。

div {
	text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

文本装饰

在 CSS 中，使用 text-decoration 属性来定义文本内容的装饰方式（添加下划线、删除线、上划线等）。

div {
	text-decoration: underline;
}

属性值	描述
none	默认，无任何装饰线（最常用）
underline	下划线，链接标签 a 自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

如果想删掉链接中的下划线，只需将其 text-decoration 属性的值设置为 none：

a {
	text-decoration: none;
}

重点记住如何添加下划线以及如何删除下划线，其余了解即可。

文本缩进

在 CSS 中，使用 text-indent 属性来定义文本第一行的缩进，通常是将段落的首行缩进。

div {
	text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

但是长度有时候不好测量，我们可以通过下面的方式进行缩进：

div {
	text-indent: 2em;
}

em 是一个相对单位，表示当前元素 1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小来设置。在实际开发中，更常用此种方式来设置文本缩进。

行间距

在 CSS 中，使用 line-height 属性来定义文本的行间距。

p {
    line-height: 26px;
}

行间距由上间距、文本高度、下间距构成。可以使用 FastStone Capture 软件来测量文本的行间距。

文本属性总结

属性	表示	注意点
color	文本颜色	通常用十六进制表示
text-align	文本对齐	可以设定文本的水平对齐方式
text-indent	文本缩进	通常用于段落首行缩进 2 个字的距离
text-decoration	文本装饰	添加下划线 underline，删掉下划线 none
line-height	行间距	控制行与行之间的距离

CSS 的引入方式

按照 CSS 样式书写的位置（或者引入的位置），可以将 CSS 样式表分为三大类：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。

内部样式表（嵌入式引入）

内部样式表（内嵌样式表）指的是将 CSS 样式写到 HTML 页面内部，具体来说就是将所有的 CSS 代码放到 <style></style> 标签中。

有几个需要注意的点：

<style> 标签理论上可以放到 HTML 文档的任何地方，但在实际开发中，一般会将其放在文档的 <head> 标签中，这是约定俗成的
通过内部样式表，可以方便地控制当前整个页面中的元素样式设置
虽然内部样式表的代码结构清晰，但是并没有实现结构与样式的完全分离
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们在学习和练习时常用的

行内样式表（行内式引入）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适用于修改简单样式。

<div style="color: red; font-size: 12px;">出走半生，归来仍是少年</div>

有几个需要注意的点：

这里的 style 是标签内的属性，而不是 <style> 标签，因此只能控制当前标签的样式设定，而无法控制整个页面
由于书写繁琐，且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为行内式引入

外部样式表（链接式引入）

外部样式表就是将样式单独写到 CSS 文件中，再把 CSS 文件引入到 HTML 文档中使用。这种方式适合样式比较多的情况，在实际开发中，最常使用的就是外部样式表，我们也更推荐使用此种方式。

外部样式表的引入可以分为两步：

新建一个后缀名为 .css 的 CSS 文件，把所有的 CSS 代码都写入此文件中
```
p {
	color: red;
    font-size: 25px;
    line-height: 26px;
}
```

在 HTML 页面中，使用 <link> 标签引入这个 CSS 文件

<link rel="stylesheet" href="CSS文件路径">

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>尽量使用系统自带的字体</p>
    <p>不要使用特别花哨的字体</p>
</body>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件（.css）
href	定义所链接外部样式表文件的路径，可以是相对路径，也可以是绝对路径

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中最常用的方式。

CSS 引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便	结构样式混写	较少	控制一个标签
内部样式表	部分结构与样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全结构与样式相分离	需要引入	最多	控制多个页面

Emmet 语法

Emmet 语法的前身是 Zen coding，它使用缩写来提高 HTML/CSS 的编写速度，VS Code 内部已经集成了该语法。

快速生成 HTML 结构语法

如果想快速生成标签，直接输入标签名，然后按下 tab 键即可。例如，输入 div，然后按下 tab 键，即可生成 <div></div>
如果想生成多个相同的标签，加上 * 就行。例如，输入 div*3，然后按下 tab 键，即可生成 3 个 <div></div>
如果想生成父子级关系的标签，用 > 就行。例如，输入 ul>li，然后按下 tab 键，即可生成 <ul><li></li></ul>
如果想生成兄弟关系的标签，用 + 就行。例如，输入 div+p，然后按下 tab 键，即可生成 <div></div><p></p>
如果想生成带有 class 属性或 id 属性的标签，直接写 标签名.类名 或 标签名#id名。例如，输入 div.nav，然后按下 tab 键，即可生成 <div class="nav"></div>；输入 div#one，然后按下 tab 键，即可生成 <div id="one"></div>
如果生成的类名是有顺序的，可以用自增符号 $。例如，输入 div.nav$*5，然后按下 tab 键，即可生成 <div class="nav1"></div> - <div class="nav5"></div>
如果想在生成的标签内部写内容，可以用 {}。例如，输入 div{我是帅哥}，然后按下 tab 键，即可生成 <div>我是帅哥</div>

快速生成 CSS 样式语法

想快速生成 CSS 样式代码，采取简写形式即可：

例如，输入 tac，然后按下 tab 键，即可生成 text-align: center;
例如，输入 w100，然后按下 tab 键，即可生成 width: 100px;
这种简写方式虽然快速，但是不一定百分百可靠（比如输入 lh26，生成的是 line-height: 26，很明显还需要加上单位 px 才能正确显示），因此还需检查下语法是否正确

CSS 的复合选择器

复合选择器建立在基础选择器之上，由两个或多个基础选择器通过不同的方式组合而成，可以更准确、更高效地选择目标元素（标签）。

常用的复合选择器有：后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就是外层标签的后代。

语法如下：

标签1 标签2 {样式声明}

<head>
    <style>
        ul li {
            color: red;
            font-size: 25px;
        }
        
        ul li a {
            color: pink;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>广州</li>
        <li>深圳</li>
        <li>珠海</li>
        <li><a href="#">百度一下</a></li>
    </ul>
    <ol>
        <li>南昌</li>
        <li>赣州</li>
        <li>九江</li>
    </ol>
</body>

有几点需要注意：

标签1是父级，标签2是子级，它们是包含关系，该语法将对父级标签中的子级标签设置样式
标签1与标签2之间一定要用空格隔开
标签1与标签2可以是任意基础选择器
除了标签1和标签2，还可以有标签3、标签4、…，可以有任意多个，每一个都是前一个的子级，是后一个的父级
后代选择器会把所有的后代都选择出来，比如 ul a {color: pink;}，会将 <ul> 标签内的所有 <a> 标签都选出来，不管这个 <a> 标签是哪个父级的子级，只要是 <ul> 标签的后代就都会被选择

子选择器

子选择器与后代选择器的不同之处，就在于子选择器只选择最近的一级子元素。

语法如下：

标签1>标签2 {样式声明}

<head>
    <style>
        ul>a {
            color: pink;
            text-decoration: none;
        }
        
        ul>li>a {
            color: green;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <ul>
        <a href="#">广州</a>
        <li>深圳</li>
        <li>珠海</li>
        <li><a href="#">百度一下</a></li>
    </ul>
</body>

有几点需要注意：

标签1是父级，标签2是子级，它们是包含关系，该语法将对父级标签中的子级标签设置样式
标签1与标签2之间一定要用 > 隔开
标签1与标签2可以是任意基础选择器
除了标签1和标签2，还可以有标签3、标签4、…，可以有任意多个，每一个都是前一个的子级，是后一个的父级
子选择器只会把自己的儿子辈选择出来，孙子辈、曾孙子辈等后代都不会被选择，比如 ul a {color: pink;}，会将 <ul> 标签内的 <a> 标签选出来，但如果有些 <a> 标签是在 <ul> 标签的 <li> 标签中，则不会被选择

并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。

语法如下：

标签1, 标签2 {样式声明}

<head>
    <style>
        div, p {
            color: red;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div>你好，广州</div>
    <p>你好，深圳</p>
    <span>你好，珠海</span>
</body>

有几点需要注意：

标签1与标签2是并列关系，该语法将对它们同时设置相同样式
标签1与标签2之间一定要用 , 隔开
标签1与标签2可以是任意选择器
除了标签1和标签2，还可以有标签3、标签4、…，可以有任意多个，它们都是并列的
并集选择器通常用于集体声明

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。

伪类选择器在书写上最大的特点就是用 : 来定义。

常见的伪类选择器有链接伪类、结构伪类等。

链接伪类选择器

a:link		/* 选择所有未被访问的链接 */
a:visited	/* 选择所有已被访问的链接 */
a:hover		/* 选择鼠标指针位于其上的链接 */
a:active	/* 选择活动链接（鼠标按下未弹起的链接）*/

<head>
    <style>
        a:link {
            color: #333;
            text-decoration: none;
        }
        
        a:visited {
            color: orange;
        }
        
        a:hover {
            color: skyblue;
        }
        
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">百度一下</a>
</body>

链接伪类选择器的注意事项

为了确保生效，请严格按照 LVHA 的顺序声明，即 :link、:visited、:hover、:active
因为 a 链接在浏览器中具有默认样式，所以我们在实际开发工作中需要给链接单独指定样式

链接伪类选择器在实际开发工作中的写法：

/* a 是标签选择器  所有的链接 */
a {
    color: gray;
}

/* :hover 是链接伪类选择器  鼠标经过改变样式 */
a:hover {
    color: blue;
}

focus 伪类选择器

focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器主要针对表单元素来说。

input:focus {
    background-color: yellow;
}

<head>
    <style>
        input:focus {
        	background-color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

复合选择器总结

复合选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择所有指定的后代元素	作用于所有指定后代	较多	空格隔开
子选择器	选择最近的一级元素	作用于儿子辈	较少	大于号隔开
并集选择器	选择相同标签	用于集体声明	较多	逗号隔开
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a{} 和 a:hover 的写法
focus 伪类选择器	选择获得光标的表单	跟表单相关	较少	input:focus {}

CSS 的元素显示模式

网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好的布局我们的网页。

元素显示模式指的就是元素（标签）以什么方式进行显示，比如 <div> 占一行，一行可以放多个 <span>。

HTML 元素一般可以分为块元素和行内元素两种类型。

块元素

常见的块元素有 <h1>-<h6>、<p>、<div>、<ul>、<ol>、<li> 等，其中 <div> 是最典型的块元素。

块元素有几个特点：

独占一行
宽度、高度、内边距、外边距等属性都可以控制
宽度默认为容器（父级标签的宽度）的 100%，比如 <div> 常写在 <body> 内，因此其默认宽度是 <body> 宽度的 100%
是一个容器及盒子，里面可以放行内元素或块元素

有几个点需要注意：

文字类的元素里面不能使用块元素，比如 <p>、<h1>-<h6> 等都是文字类元素，主要用于存放文字，里面不能放其他块元素

行内元素

常见的行内元素有 <a>、 <strong>、 <b>、 <em>、 <i>、 <del>、 <s>、 <ins>、 <u>、 <span> 等，其中 <span> 是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素有几个特点：

相邻的行内元素在一行上，一行可以显示多个行内元素
宽度、高度不能直接设置
宽度默认就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

有几个需要注意的点：

链接里面不能再放链接
a 链接里面可以放块元素，但是给 a 转换一下块模式最安全

行内块元素

在行内元素中有几个特殊的标签：<img>、<input>、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

行内块元素的特点：

一行可以显示多个（行内元素特点），和相邻的行内元素在一行上，但是它们之间会有空白缝隙
宽度默认就是它本身内容的宽度（行内元素特点）
行高、高度、内边距、外边距等都是可以控制的（块元素特点）

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块元素	一行只能放一个块元素	可以设置宽度、高度	容器的 100%	可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度、高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度、高度	它本身内容的宽度

元素显示模式的转换

在有些情况下，我们需要进行元素模式的转换，即让一个模式的元素获取另一种模式的特性。比如想要增加链接 <a> 的触发范围，由于它是行内元素，无法直接设置宽度和高度，因此需要将其转换为块元素。

转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;

<head>
    <style>
        a {
            width: 200px;
            height: 50px;
            background-color: red;
            display: block;  /* 设置了该语句后，a 变成了块元素，其宽度和高度设置就生效了 */
        }
        
        div {
            width: 300px;
            height: 100px;
            background-color: blue;
            display: inline;  /* 设置了该语句后，div 变成了行内元素，其宽度和高度设置就失效了 */
        }
    </style>
</head>

<body>
    <a href="#">百度一下</a>
    <div>图像拼接</div>
</body>

单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码，我们可以通过一个小技巧来实现。

小技巧：让文字的行高等于盒子的高度，就可以实现文字在当前盒子内的垂直居中效果。

小米侧边栏案例：

<head>
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

CSS 的背景

通过 CSS 的背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

在 CSS 中，使用 background-color 属性来定义元素的背景颜色。

background-color: transparent | color
	transparent -- 默认值，透明色
	color -- 指定颜色

一般情况下，元素的默认背景颜色为 transparent（透明色），当然我们也可以手动指定背景颜色为透明色。

背景图片

在 CSS 中，使用 background-image 属性来定义元素的背景图片。实际开发中常见于 logo、一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置。

background-image: none | url(url)
	none -- 默认值，无背景图
	url -- 使用绝对路径或相对路径来指定背景图像

<head>
    <style>
        div {
            width: 200px;
            height: 50px;
            background-image: url("img.png")
        }
    </style>
</head>

<body>
    <div></div>
</body>

背景平铺

如果需要在 HTML 页面中对背景图片进行平铺，可以使用 background-repeat 属性。想要使用背景平铺属性，必须先设置背景图像。

background-repeat: repeat | no-repeat | repeat-x | repeat-y
	repeat -- 默认值，背景图片在横向和纵向上平铺
	no-repeat -- 背景图片不平铺
	repeat-x -- 背景图片在横向上平铺
	repeat-y -- 背景图片在纵向上平铺

页面元素既可以添加背景颜色，也可以添加背景图片，背景图片在背景颜色的上层。

背景图片位置

在 CSS 中，我们可以利用 background-position 属性来改变图片在背景中的位置。

background-position: x y;
	x -- 横坐标
	y -- 纵坐标

x 和 y 可以使用方位名词或精确值。

参数为方位名词，x 可以取值为 left、center、right，y 可以取值为 top、center、bottom：

如果 x 和 y 都使用方位名词，则它们可以不用考虑顺序关系，比如 left top 和 top left 是一样的

如果只指定了一个方位名词，另一个值省略了，则第二个值默认居中对齐

<head>
	<style>
        div {
            width: 200px;
            height: 50px;
            background-color: pink;
            background-image: url("img.png");
            background-repeat: no-repeat;
            background-position: left center;
        }
    </style>
</head>

<body>
    <div></div>
</body>

参数为精确值：

如果参数为精确坐标，那么第一个一定是 x 坐标，第二个一定是 y 坐标，它们有严格的顺序关系

如果只指定了一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中

<head>
	<style>
        div {
            width: 200px;
            height: 50px;
            background-color: pink;
            background-image: url("img.png");
            background-repeat: no-repeat;
            background-position: 20px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

参数为混合单位：

如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是 x 坐标，第二个值是 y 坐标，它们有严格的顺序关系

背景图像固定

使用 background-attachment 属性来设置背景图像是否固定或者随着页面的其余部分滚动。利用该属性可以做视差滚动效果。

background-attachment: scroll | fixed
	scroll -- 默认值，背景图像随对象内容滚动
	fixed -- 背景图像固定

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写到同一个属性 background 中，从而节约代码量。

background 属性不像 font 属性，没有特定的书写顺序，一般习惯约定顺序为：

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

在实际开发中，复合写法是我们更提倡的，需要熟练掌握。

背景色半透明

在 CSS3 中，为我们提供了背景颜色半透明效果的功能。CSS3 新增属性，是 IE9+ 版本浏览器才能支持的。但是在现在的实际开发中，我们已经不太关注兼容性写法了，可以放心使用这些新增属性。

background: rgba(0, 0, 0, 0.3);

最后一个参数是透明度 alpha，取值范围在 0~1 之间，0 为完全透明，1 为完全不透明。

我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);。

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB
background-image	背景图片	url(图片路径)
background-repeat	背景图片平铺方式	repeat/no-repeat/repeat-x/repeat-y
background-position	背景图片位置	方位名词或精确值
background-attachment	背景图片是否滚动	scroll（滚动）/fixed（固定）
背景复合写法	书写更简单	color image repeat attachment position
背景色半透明	背景颜色半透明	background: rgba(0, 0, 0, 0.3); 必须有四个参数

CSS 的三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级。

层叠性

若给相同的选择器设置了相同的样式，那么一个样式会覆盖（层叠）掉另一个冲突的样式。层叠性主要就是解决样式冲突的问题。

层叠性原则：

样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。一般下面的离结构更近
样式不冲突，不会层叠，因而会照常执行

<head>
    <style>
        div {
            color: red;  /* 该样式发生了层叠，因此不执行 */
            font-size: 14px;  /* 该样式不发生层叠，因此执行 */
        }
        
        div {
            color: pink;  /* 这里发生了样式层叠，该样式离结构近，因此执行该样式 */
        }
    </style>
</head>

<body>
    <div>
        样式冲突，遵循就近原则
    </div>
</body>

继承性

在 CSS 中，子标签会继承父标签的某些样式，如文本颜色、字号、行高等。恰当地使用继承性可以简化代码，降低 CSS 样式的复杂性。

<head>
    <style>
        div {
            color: red;
            font-size: 14px; 
        }
    </style>
</head>

<body>
    <div>
        <p>继承性是 CSS 的三大特性之一</p>
    </div>
</body>

行高的继承性

<head>
    <style>
        body {
            color: red;
            font: 14px/24px "Microsoft YaHei"; 
        }
    </style>
</head>

<body>
    <div>行高的继承性</div>
    <p>继承性是 CSS 的三大特性之一</p>
</body>

在实际开发中，有时会看到这样的写法：

body {
	font: 14px/1.5 "Microsoft YaHei";
}

行高可以跟单位，也可以不跟单位。有单位的行高表示具体的确切的行高数值，没有单位的行高表示的是当前元素内容文字大小的多少倍。比如 14px/1.5，表示当前元素内容的行高为 14*1.5。

这种写法的最大优点就是里面的子元素能够依据自己的文字大小来自动的调整行高。

优先级

当同一个元素指定了多个选择器，就会有优先级的产生：

选择器相同，则执行层叠性
选择器器不同，则根据选择器权重执行

选择器	选择器权重
继承或 *	0, 0, 0, 0
标签（元素）选择器	0, 0, 0, 1
类选择器，伪类选择器	0, 0, 1, 0
id 选择器	0, 1, 0, 0
行内样式 style=“”	1, 0, 0, 0
!important 重要的	∞ 无穷大

<head>
    <style>
        #demo {
            color: red;  /* 对于 id 选择器、类选择器、标签选择器中相同的样式，id 选择器会优先执行 */
        }
        
        .test {
            color: green;  /* 对于类选择器、标签选择器中相同的样式，类选择器会优先执行 */
        }
        
        div {
            color: blue;  /* 如果这里写成 color: blue !important;，那么优先级是最高的 */
        }
    </style>
</head>

<body>
    /* 对于 style 属性、id 选择器、类选择器、标签选择器中相同的样式，style 属性会优先执行 */
    <div class="test" id="demo" style="color: pink">选择器的优先级</div>  
</body>

<head>
    <style>
        #demo {
            color: red;
        }
        
        p {
            color: pink;  /* 如果没有该标签选择器，那么 <p> 中的文本颜色就是 red，因为会继承 <div>；但现在有了标签选择器，而且有相同的样式，标签选择器的权重要高于继承，因此文本颜色是 pink */
        }
    </style>
</head>

<body>
    /* 对于 style 属性、id 选择器、类选择器、标签选择器中相同的样式，style 属性会优先执行 */
    <div id="demo">
        <p>继承和通配符选择器的权重是最低的，因而优先级最低</p>
    </div>  
</body>

复合选择器权重叠加

复合选择器会有权重叠加的问题，需要计算权重。

<head>
    <style>
        li {
            color: red;
        }
        
        ul li {
            color: pink;  /* ul 标签选择器的权重是 0,0,0,1，li 标签选择器的权重是 0,0,0,1，相加就是 0,0,0,2，因此执行该复合选择器中的样式 */
        }
    </style>
</head>

<body>
    <ul>
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul> 
</body>

盒子模型

网页布局要学习三大核心，盒子模型、浮动和定位。学习好盒子模型能极大的帮助我们布局页面。

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box
利用 CSS 设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

网页布局的核心本质：就是利用 CSS 来摆放好盒子。

盒子模型的组成部分

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，即一个盛装内容的容器。

CSS 盒子模型本质上是一个封装了周围属性（边框、内边距、外边距、实际内容）的盒子（HTML 元素）。

盒子模型（Box Model）由边框（border）、内容（content）、内边距（padding）、外边距（margin）组成。

边框

在 CSS 中，使用 border 属性来定义边框，该属性是复合属性，没有顺序之分。边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色。

border: border-width || border-style || border-color
	border-width -- 边框的粗细，单位是 px
	border-style -- 边框的样式
	border-color -- 边框的颜色

重点记住 solid（实线）、dashed（虚线）、dotted（点线）。

<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            border-width: 5px;
            border-style: solid;
            border-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

div {
    border: 5px dashed red;  /* 它们之间没有顺序 */
}

边框有四条边，因此也可以分别对每一条边进行单独的样式设置。

<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            border-top: 2px solid red;  /* 上边框 */
            border-bottom: 5px solid orange;  /* 下边框 */
            border-left: 5px dashed yellow;  /* 左边框 */
            border-right: 10px dotted green;  /* 右边框 */
        }
    </style>
</head>

<body>
    <div></div>
</body>

表格的细线边框

在做表格时，相邻单元格会使得重合的边框变粗，为了解决这个问题，我们可以使用 border-collapse 属性来控制浏览器绘制表格边框的方式，它能控制相邻单元格的边框。

border-collapse: collapse;  /* 表示相邻边框合并在一起 */

边框影响盒子大小

边框会影响盒子的实际大小。如果盒子的宽度/高度设置成 200px，边框设置成 10px，那么盒子（包括边框）最终的宽度/高度就变成了 220px，因此在实际开发中需要注意这一点。如果盒子（包括边框）的宽度/高度就只需要 200px，那么盒子的初始宽度/高度就需要变成 200-20=180px。

内容及内边距

在 CSS 中，使用 padding 属性来设置盒子的内边距，即内容与边框的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-top: 5px;  /* 上内边距 */
            padding-bottom: 5px;  /* 下内边距 */
            padding-left: 5px;  /* 左内边距 */
            padding-right: 5px;  /* 右内边距 */
        }
    </style>
</head>

<body>
    <div>盒子的内边距属性为 padding</div>
</body>

padding 属性（复合属性）可以有一到四个值：

值的个数	表达意思
padding: 5px;	1 个值，表示上下左右都有 5 像素的内边距
padding: 5px 10px;	2 个值，表示上下内边距是 5 像素，左右内边距是 10 像素
padding: 5px 10px 20px;	3 个值，表示上内边距是 5 像素，左右内边距是 10像素，下内边距是 20 像素
padding: 5px 10px 20px 30px;	4 个值，表示上内边距是 5 像素，右内边距是 10 像素，下内边距是 20 像素，左内边距是 30 像素；顺时针

padding 影响盒子大小

padding 会影响盒子的实际大小，这一点与边框一致，做法也是与边框一样。

padding 内边距可以撑开盒子大小，有时我们可以利用这点做非常巧妙的运用。比如在构建导航栏时，通过 padding 可以使得导航栏的每个小盒子之间的空隙一样大。

<head>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        
        .nav a {
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">登录</a>
        <a href="#">微博</a>
    </div>
</body>

padding 不撑开盒子的情况

如果盒子没有指定宽度/高度，则不会撑开盒子。

/* h1 盒子指定了高度，但没指定宽度，其宽度继承 body，因此当设置了 padding 后，h1 盒子只有高度会变，宽度不会变 */
<head>
    <style>
        h1 {
            height: 200px;
            background-color: pink;
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1></h1>
</body>

外边距

在 CSS 中，使用 margin 属性来设置外边距，即控制盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 复合属性的简写形式跟 padding 是一模一样的，也是可以有一到四个值。

外边距的典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度（width）
盒子的左右外边距必须设置为 auto

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

.header {
	width: 960px;
	margin: 0 auto;
}

注意：让块级元素水平居中可以通过设置外边距，那么如何让行内元素或行内块元素水平居中呢？答案是给其父元素添加 text-align: center 即可。

外边距的合并与塌陷

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

当上下相邻的两个块元素相遇时，如果上面的块元素有下外边距 margin-bottom，下面的块元素有上外边距 margin-top，则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和，而是取两个值中的较大者作为间距。这被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加 margin 属性。

/* 块元素的垂直外边距合并，并不是两个外边距的相加，而是取其中的较大值 */
<head>
    <style>
        .c1 {
            height: 200px;
            background-color: red;
            margin-bottom: 50px;  /* 两个 div 盒子的垂直外边距为 50px，而不是 70px */
        }
        
        .c2 {
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值（如果父元素的上外边距大于子元素的上外边距，则父元素和子元素的外上边距都会等于父元素的上外边距；如果父元素的上外边距小于子元素的上外边距，则父元素和子元素的外上边距都会等于子元素的上外边距）。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加 overflow: hidden; 语句，该方法不会增加盒子大小
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

/* 两个块元素嵌套，其中的子块元素想在父块元素的基础上增加一个上外边距，但是会发生塌陷，即子块元素的上外边距会带着父块元素也下沉 */
<head>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: red;
            margin-top: 50px;  /* 初始父块元素的上外边距为 50px */
            /* overflow: hidden; */  /* 添加该语句后即可解决塌陷问题，子元素上边框与父元素上边框之间的间距就是 100px */
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;  /* 子块元素的上外边距为 100px，把父块元素带着下沉，父块元素的上外边距也变成了 100px，即发生了塌陷 */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    
</body>

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此，我们在布局前，首先要清除一下网页元素的内外边距。

* {
    padding: 0;  /* 清除内边距 */
    margin: 0;  /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块元素和行内块元素时就可以随意设置了。

几个案例

产品模块案例

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background-color: #f5f5f5;
        }
        
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;  /* 让块级盒子水平居中 */
        }
        
        .box img {
            width: 100%;  /* 让图像的宽度等于 box 的宽度 */
        }
        
        .name {
            text-align: center;
            font: 16px "Times New Roman"; 
        }
        
        .review {
            height: 40px;
            font-size: 14px;
            padding: 0 28px;  /* 段落没有 width 属性，因此 padding 不会撑开盒子的宽度 */
            margin-top: 5px;
            text-align: center;
            color: #b0b0b0;
        }
        
        .price {
            font: 16px "Times New Roman";
            padding: 0 28px;
            margin-top: 5px;
            text-align: center;
        }
        
        .c1 {
            color: #ff6700;
        }
        
        .c2 {
            color: #b0b0b0; 
            text-decoration: line-through;
        }
        
        span {
            margin: 0 2px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="mi.png">
        <div class="name">Redmi K70</div>
        <p class="review">第二代骁龙8 旗舰芯</p>
        <div class="price">
            <span class="c1">2199元起</span>
            <span class="c2">2299元</span>
        </div>
    </div>
</body>

快报模块案例

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;  /* 该语句能去掉 li 前面的项目符号（小圆点） */
        }
        
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;  /* 设置边框 */
            margin: 100px auto;  /* 水平居中 */
        }
        
        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;  /* 去掉加粗 */
            line-height: 32px;  /* 垂直居中 */
            padding-left: 15px;
        }
        
        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        
        .box ul li a:hover {
            text-decoration: underline;
        }
        
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;  /* 给 ul 中的每一个 li 盒子设置一个左内边距 */
        }
        
        .box ul {
            margin-top: 7px;  /* 给 ul 盒子添加一个上外边距 */
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款手机1999元起！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000！</a></li>
        </ul>
    </div>
</body>

总结

布局为啥用不同的盒子，我只想用 div 行不行呢？

答：标签都是有语义的，而且不同的标签有不同的特点，在合适的地方用合适的标签很重要，比如产品标题就用 <h>，大量文字段落就用 <p>，这些都需要实践积累
为啥用那么多的类名？

答：类名就相当于是给每一个盒子起了一个名字，这样可以通过类名很方便的找到这个盒子，对其进行操作也会更加容易，后期维护也方便
盒子之间到底用 margin 还是 padding？

答：大部分情况下两者可以混用，两者各有优缺点，可以根据实际情况来选用
网页布局没有思路？

答：布局有很多种实现方式，刚开始可以先模仿一些较好的布局，熟练之后可以慢慢做出自己的风格

圆角边框

在 CSS3 中，新增了圆角边框属性，我们用 border-radius 来定义元素的外边框圆角。

border-radius: length;
	length -- 数值或百分比，如 10px 或 50%

如果要设置一个圆形，可以这么做：

.circle {
    width: 200px;
    height: 200px;
    background-color: pink;
    border-radius: 100px;  /* 将半径设置为正方形边长的一半，就能得到一个圆；将值置为 50% 也能得到一个圆 */
}

有几个点需要注意：

length 的单位可以是 px，也可以是百分号，即参数值可以为数值或百分比形式
如果是正方形，将值设置为宽度或高度的一半，或者直接写为 50%，就可以得到一个圆形
如果是矩形，将 border-radius 的值设为高度的一半，就可以得到一个很标准的圆角矩形。
border-radius 其实是一个复合属性，可以有一到四个值，分别表示左上角、右上角、右下角、左下角
可以单独设置每个角的属性，border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）、border-bottom-left-radius（左下角）

盒子阴影

在 CSS3 中，新增了盒子阴影属性，我们用 box-shadow 属性来为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

鼠标经过盒子，会出现阴影效果：

<head>
    <style>
        div {
            width: 200px;
        	height: 200px;
        	background-color: pink;
        }
    	
        div:hover {
            box-shadow: 10px 10px 15px -5px rgba(0,0,0,.6);
        }
    </style>
</head>

<body>
    <div></div>
</body>

有几个点需要注意：

默认的是外阴影（outset），但是不可以写这个单词，只能是将外阴影改为内阴影，否则会导致阴影无效
盒子阴影不占用空间，不会影响其他盒子的排列

文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
color	可选。阴影的颜色

CSS 的浮动

浮动

传统网页布局的三种方式

网页布局的本质 —— 用 CSS 来摆放盒子，把盒子摆放到相应位置。

CSS 提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序）：

标准流（普通流/文档流）：标签按照默认规定好的方式排列
- 块级元素独占一行，从上向下顺序排列；如 div、hr、p、h1-h6、ul、ol、dl、form、table 等
- 行内元素会按照顺序，从左到右排列，碰到父元素边缘则自动换行；如 span、strong、b、em、i、a 等
- 标准流是最基本的布局方式
浮动
定位

上述三种布局方式都是用来摆放盒子的，每种布局方式都有其特点。在实际开发中，并不单单只用其中的一个布局方式，而是三个都会用，一个页面基本都包含了这三种布局方式。

为什么需要浮动

在标准流中，如何将多个块级盒子水平排列到一行？虽然转换为行内块元素可以实现一行显示，但是它们之间会有较大的空隙，难以控制。

如何实现两个盒子的左右对齐？在标准流中，是难以实现的。

有很多的布局效果，在标准流中没有办法实现，此时就可以利用浮动布局来完成，因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用，就是可以让多个块级元素在一行内排列显示。

网页布局第一准则：多个块级元素纵向排列就用标准流，多个块级元素横向排列就用浮动。

什么是浮动

我们使用 float 属性来创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器 {float: 属性值;}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: red;
            float: left;  /* 如果 box1 没有加浮动，则它独占一行；加了左浮动后，则在一行的最左边 */
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background: pink;
            float: left;  /* 如果 box1 没有加浮动（即 box1 独占一行），那么加了左浮动的 box2 会浮动在下面一行的最左边；如果 box2 加了右浮动，则会浮动在最右边；如果 box1 加了左浮动，box2 也加了左浮动，则 box2 会紧挨着 box1，没有空隙 */
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

浮动特性

加了浮动后的元素，会具有很多特性：

浮动元素会脱离标准流（脱标）
- 浮动元素会脱离标准流的控制（浮），并移动到指定位置（动）
- 浮动的盒子不再保留原先的位置，后面的盒子会顶上来
浮动元素会在一行内显示，并且元素顶部对齐
- 浮动元素会相互紧挨在一起（不会有缝隙）
- 如果父级宽度装不下这些浮动的盒子，则多出的盒子会另起一行显示
浮动元素会具有行内块元素的特性
- 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后都具有行内块元素的特性（行内块之间会有空隙，添加浮动没有空隙）
- 行内元素添加了浮动后，不需要再转换成块级元素或行内块元素，也可以直接给宽度和高度，因为它已经具有了行内块元素的特性
- 如果块级盒子没有设置宽度，那它默认宽度与父级一样宽；但是添加浮动后，它的宽度将根据内容的宽度来决定

浮动元素与标准流搭配使用

浮动元素经常与标准流父级搭配使用。

为了约束浮动元素的位置，我们在网页布局中一般采取的策略是：先用标准流的父元素排列上下位置，之后再让内部子元素采取浮动排列左右位置，这符合网页布局第一准则。

网页布局第二准则：先设置盒子大小，再设置盒子位置。

常见的网页布局

常见的网页布局有下面几种：

由一个个的标准流盒子自上而下根据默认方式排列
在标准流盒子的基础上添加一些浮动，使得列数多一些，看起来更美观

在这里插入图片描述

如果还想分得再细一些也是可以的

在这里插入图片描述

针对第三种布局写下代码：

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        /* 只要是通栏的盒子（和浏览器一样宽）可以不需要指定宽度 */
        .top {
            height: 50px;
            background-color: gray;
        }
        
        .banner {
            width: 980px;
            height: 150px;
            background-color: skyblue;
            margin: 10px auto;
        }
        
        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;
        }
        
        .box li {
            width: 237px;
            height: 300px;
            background-color: yellowgreen;
            margin-right: 10.5px;
        }
        
        .box .last {
            margin-right: 0;
        }
        
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
    	<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

浮动布局的注意点

浮动经常和标准流的父盒子搭配使用，先用标准流的父元素排列上下位置，再让内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动
- 一个盒子里面有多个子盒子，如果其中的一个子盒子浮动了，那么其他兄弟子盒子也应该浮动，以防止引起问题（如位置问题）

清除浮动

为什么需要清除浮动

前面学的浮动元素都有一个标准流的父元素，这些父元素有一个共同点，就是都有高度。但是，所有的父盒子都必须限定一个高度值吗？答案是不一定，在实际开发中，我们不一定会为所有的父盒子都给一个具体的高度值，比如产品页面需要浮动的子盒子可能有很多个（每一个都是一个产品，后续可能还要不停的添加），再比如新闻页面左侧的新闻不知道有多少个文字，那么这几种情况都不方便给一个高度值。

理想中的状态应该是让浮动的子盒子自动撑开父盒子，父盒子能根据子盒子的高度和个数在纵向上自动伸缩。

假设父级盒子有若干子盒子，且父级盒子没有给定高度值，那么父级盒子的高度会根据子盒子的高度和个数自动拉伸，这一点是没有问题的。但是，一旦给所有的子盒子添加了浮动，浮动并不会占位置，最后父级盒子在没有给高度且没有内容的情况下，高度变成了 0，这就会影响下面标准流盒子的排版。

清除浮动的本质

清除浮动的本质就是清除浮动元素造成的不占位置的影响，即子盒子仍可以浮动，但已经占有位置。如果父级盒子本身有高度，那就不需要清除浮动。但是在很多情况下，父级盒子是不方便给高度的。清除浮动后，父级盒子就会根据浮动的子盒子自动检测高度，父级盒子有了高度，也就不会影响下面的标准流盒子。

选择器 {clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的策略：闭合浮动。让浮动只在父盒子内部影响，而不影响父盒子外面的其他盒子。

在实际开发工作中，几乎只用 clear: both; 语句。

清除浮动的方法

额外标签法，也称为隔墙法，是 W3C 推荐的做法；这个额外标签必须是块级元素或 <br>，不能是行内元素；优点是通俗易懂，书写方便；缺点是会添加许多无意义的标签，结构化较差；在实际开发工作中可能会遇到该方法，但是不常用

第一步，在最后一个浮动子盒子后面加一个空盒子（额外标签），形成闭合浮动 <div class="clear"></div>
第二步，创建对应的类选择器 .clear {clear: both;}

也可以一步到位，<div style="clear: both"></div>

<head>
    <style>
        .box {
            width: 980px;
            background-color: gray;
            margin: 0 auto;
        }
        
        .dasha {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: pink;  /* 添加浮动 */
        }
        
        .ersha {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            float: yellowgreen;  /* 添加浮动 */
        }
        
        /* 额外标签对应的类选择器 */
        .clear {
            clear: both;  /* 清除浮动（从不占位置变成占有位置）*/
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="dasha">大傻</div>
        <div class="ersha">二傻</div>
        <div class="clear"></div>  <!-- 在最后一个浮动子盒子后面加一个空盒子（额外标签），形成了闭合浮动 -->
    </div>
</body>

父级添加 overflow 属性；即给父盒子添加 overflow 语句，可以将其属性值设为 hidden、auto 或 scroll，一般设置为 hidden；优点是代码简洁；缺点是无法显示溢出的部分

<head>
    <style>
        .box {
            width: 980px;
            background-color: gray;
            margin: 0 auto;
            overflow: hidden;  /* 添加该语句后，可清除该父盒子内的浮动影响 */
        }
        
        .dasha {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: pink;  /* 添加浮动 */
        }
        
        .ersha {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            float: yellowgreen;  /* 添加浮动 */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="dasha">大傻</div>
        <div class="ersha">二傻</div>
    </div>
</body>

父级添加 after 伪元素；:after 方式是额外标签法的升级版；优点是不会增加额外标签，结构更简单；缺点是需要照顾低版本浏览器

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;  /* IE6、7 专有 */
}

<head>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }
        
        .box {
            width: 980px;
            background-color: gray;
            margin: 0 auto;
        }
        
        .dasha {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: pink;  /* 添加浮动 */
        }
        
        .ersha {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            float: yellowgreen;  /* 添加浮动 */
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="dasha">大傻</div>
        <div class="ersha">二傻</div>
    </div>
</body>

*zoom: 1; 是一个针对旧版IE浏览器（IE6 和 IE7）的 CSS hack，它通过触发 hasLayout 属性来修复一些布局问题。然而，这个 hack 在现代浏览器中不再需要，并且可能会引起错误或不必要的样式问题。

父级添加双伪元素；优点是代码更简洁；缺点是依然要照顾低版本浏览器
```
.clearfix:before, .clearfix:after {
	content:"";
}

.clearfix:after {
    clear:both;
}

.clearfix {
    *zoom: 1;
}
```
小米、腾讯等网站都用了该方法来清除浮动。

PS 切图

常见的图片格式：

jpg 图像格式：JPEG（JPG）对色彩信息保留较好，颜色较多，高清，产品类图片经常使用这种格式
gif 图像格式：GIF 格式最多只能存储 256 色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，因此经常用于一些图片动画效果
png 图像格式：这种一种新兴的网络图形格式，结合了 JPEG 和 GIF 的优点，具有存储形式丰富的特点，能够保存透明背景，如果想切成背景透明的图片就可以选择该格式
psd 格式：psd 是 PhotoShop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对前端开发人员来说，最大的优点就是可以直接从上面获取图片、复制文字、测量大小和距离

PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。

图层切图

这是最简单的切图方式，右击图层 -> 快速导出为 PNG。

在很多情况下，需要合并图层再导出：

选中需要的图层，图层菜单 -> 合并图层
右击图层 -> 快速导出为 PNG

切片切图

利用切片工具手动划出想要的图片，然后将其导出。

文件菜单 -> 导出 -> 存储为 web 设备所用格式 -> 选择图片格式（jpg 带背景，png 不带背景）-> 存储（在切片处选择选中的切片）。

PS 插件切图

Cutterman 是一款运行在 PhotoShop 中的插件，能够自动将需要的图层进行输出，以替代传统的手工“导出 web 所用格式”以及使用切片工具进行挨个切图的繁琐流程。

Cutterman 插件可以去官网下载，然后安装到 PS 中，但它要求 PS 必须是完整版，不能是绿色版（窗口 -> 扩展功能，如果能正常使用，就是完整版）。

像素大厨

因为各种原因，安装 PS 完整版特别麻烦，现在前端开发测量主要使用蓝湖、摹客、像素大厨等。

学成在线案例

网站首页统一规定为 index.html。

CSS 属性书写顺序，建议遵循以下顺序：

布局定位属性：display/position/float/clear/visibility/overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

为了提高网页制作的效率，布局时通常有以下的整体思路：

必须确定页面的版心（可视区）的宽度
分析页面中的行模块（标准流），以及每个行模块中的列模块（浮动）
一行中的列模块常用浮动布局，先确定每个列的大小，再确定列的位置
制作 HTML 结构。先有结构，再有样式，结构是最重要的

先理清布局结构，再写代码，尤为重要，这需要我们多写多积累。

header

header 区域制作

首先确定版心，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: 0 auto;
}

版心盒子 header 是一个 1200*42 的盒子，需要水平居中对齐，上下给一个 margin 值；
header 盒子里面包含四个子盒子，分别是 logo 盒子、nav 导航栏盒子、search 搜索框盒子、user 个人信息盒子；
四个子盒子必须都是浮动布局。

制作 header：

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .w {
            width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            height: 42px;
            margin: 30px auto;
        }
    </style>
</head>

<body>
    <div class="header w"></div>
</body>

logo 区域制作

<head>
    <style>
        .logo {
            float: left;
            width: 198px;
            height: 42px;
        }
    </style>
</head>

<body>
    <div class="logo">
        <img src="images/logo.png">
    </div>
</body>

nav 区域制作

在实际开发工作中，制作导航栏时不会直接用链接 a，而是用 li 包含链接（li+a）的做法：

li+a 语义更加清晰，一看这就是有条理的列表型内容
如果直接用 a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎降权），从而影响网站排名

有几点需要注意：

让导航栏一行显示，给 li 加浮动，因为 li 是块级元素，需要一行显示
nav 导航栏可以不给宽度，方便将来可以继续添加其余文字
因为导航栏里的文字不一样多，所以最好给链接 a 加个左右 padding 值撑开盒子，而不是指定宽度

<head>
    <style>
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .nav {
            float: left;
            margin-left: 60px;
        }
        
        .nav ul li {
            float: left;
            margin: 0 15px;
        }
        
        .nav ul li a {
            display: block;
            height: 42px;
            padding: 0 10px;
            line-height: 42px;
            font-size: 18px;
            color: #050505;
        }
        
        .nav ul li a:hover {
            border-bottom: 2px solid #00a4ff;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
    </div>
</body>

search 区域制作

<head>
    <style>
        .search {
            float: left;
            width: 412px;
            height: 42px;
            margin-left: 50px;
        }
        
        .search input {
            float: left;
            width: 345px;
            height: 40px;
            border: 1px solid #00a4ff;
            border-right: 0;
            font-size: 14px;
            color: #bfbfbf;
            padding-left: 15px;
        }
        
        .search button {
            float: left;
            width: 50px;
            height: 42px;
            /* 按钮 button 默认有个边框，需要手动去除 */
            border: 0;
            background: url(images/btn.png);
        }
    </style>
</head>

<body>
    <div class="search">
        <input type="text" value="输入关键词">
        <button></button>
    </div>
</body>

user 区域制作

<head>
    <style>
        .user {
            float: right;
            line-height: 42px;
            margin-right: 30px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="user">
        <img src="images/user.png">
        aibc-hp
    </div>
</body>

banner

banner 区域制作

先制作一个通栏的大盒子 banner，只给高度，不给宽度（通栏），给一个蓝色背景；
里面有一个版心盒子，要水平居中对齐；
版心盒子内有一个 subnav 侧导航栏，需左侧对齐；
版心盒子内有一个课程，需右侧对齐。

<head>
    <style>
        .banner {
            height: 421px;
            background-color: #1c036c;
        }
        
        .banner .w {
            height: 421px;
            background: url(images/banner.png) no-repeat top center;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="w"></div>
    </div>
</body>

subnav 区域制作

<head>
    <style>
        .subnav {
            width: 190px;
            height: 421px;
            background: rgba(0, 0, 0, .3);
        }
        
        .subnav ul li {
            height: 45px;
            line-height: 45px;
            padding: 0 20px;
        }
        
        .subnav ul li a {
            font-size: 14px;
            color: #fff;
        }
        
        .subnav ul li a span {
            float: right;
        }
        
        .subnav ul li a:hover {
            color: #00a4ff;
        }
    </style>
</head>

<body>
    <div class="subnav">
        <ul>
            <li><a href="#">前端开发 <span>&gt;</span></a></li>
            <li><a href="#">后端开发 <span>&gt;</span></a></li>
            <li><a href="#">移动开发 <span>&gt;</span></a></li>
            <li><a href="#">人工智能 <span>&gt;</span></a></li>
            <li><a href="#">商业预测 <span>&gt;</span></a></li>
            <li><a href="#">云计算&大数据 <span>&gt;</span></a></li>
            <li><a href="#">运维&从测试 <span>&gt;</span></a></li>
            <li><a href="#">UI设计 <span>&gt;</span></a></li>
            <li><a href="#">产品 <span>&gt;</span></a></li>
        </ul>
    </div>
</body>

course 区域制作

<head>
    <style>
        .course {
            float: right;
            width: 230px;
            height: 300px;
            margin-top: 50px;
            background-color: #fff;
        }
        
        .course h2 {
            height: 48px;
            background-color: #9bceea;
            text-align: center;
            line-height: 48px;
            font-size: 18px;
            color: #fff;
        }
        
        .bd {
            padding: 0 20px;
        }
        
        .bd ul li {
            padding: 14px 0;
            border-bottom: 1px solid #ccc;
        }
        
        .bd ul li h4 {
            font-size: 16px;
            color: #4e4e4e;
        }
        
        .bd ul li p {
            font-size: 12px;
            color: #a5a5a5;
        }
        
        .bd a {
            display: block;
            height: 38px;
            border: 1px solid #00a4ff;
            margin-top: 5px;
            text-align: center;
            line-height: 38px;
            color: #00a4ff;
            font-size: 16px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="course">
        <h2>我的课程表</h2>
        <div class="bd">
        	<ul>
                <li>
                    <h4>继续学习 HTML+CSS</h4>
                    <p>正在学习-页面布局</p>
                </li>
                <li>
                    <h4>继续学习 Python程序语言设计</h4>
                    <p>正在学习-列表</p>
                </li>
                <li>
                    <h4>继续学习 C++程序语言设计</h4>
                    <p>正在学习-类和对象</p>
                </li>
            </ul>
            <a href="#">全部课程</a>
        </div>
    </div>
</body>

精品模块

精品模块区域制作

制作一个精品模块大盒子 goods，水平居中对齐，带有阴影效果；
goods 里面最左侧是一个 h3 标题盒子，浮动布局；
goods 里面中间也是一个盒子，里面放小模块链接，浮动布局；
goods 里面右侧同样是一个盒子，浮动布局。

<head>
    <style>
        .goods {
            height: 60px;
            background-color: #fff;
            margin-top: 10px;
            box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .1);
        }
    </style>
</head>

<body>
    <div class="goods w"></div>
</body>

精品模块内部区域制作

<head>
    <style>
        .goods {
            height: 60px;
            background-color: #fff;
            margin-top: 10px;
            box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .1);
            line-height: 60px;
        }
        
        .goods h3 {
            float: left;
            margin-left: 30px;
            font-size: 16px;
            color: #00a4ff;
        }
        
        .goods ul {
            float: left;
            margin-left: 30px;
        }
        
        .goods ul li {
            float: left;
        }
        
        .goods ul li a {
            padding: 0 30px;
            font-size: 16px;
            color: #050505;
            border-left: 1px solid #ccc;
        }
        
        .goods .mod {
            float: left;
            margin-right: 30px;
            font-size: 14px;
            color: #00a4ff;
        }
    </style>
</head>

<body>
    <div class="goods w">
    	<h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">JMV</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
</body>

box

制作一个大盒子 box，版心水平居中对齐；
box 里面的上部是一个 box-hd 盒子，放 h3 标题和右侧链接；
box 里面的下部是一个 box-bd 盒子，放由 10 个 li 组成的无序列表。

box-hd

<head>
    <style>
        .box {
            margin-top: 30px;
        }
        
        .box .box-hd {
            height: 45px;
            line-height: 45px;
        }
        
        .box .box-hd h3 {
            float: left;
            font-size: 20px;
            color: #494949;
        }
        
        .box .box-hd a {
            float: right;
            font-size: 12px;
            color: #a5a5a5;
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <div class="box w">
    	<div class="box-hd">
        	<h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
    </div>
</body>

box-bd

<head>
    <style>
        .box {
            margin-top: 30px;
        }
        
        .box .box-bd ul {
            /* 要想让一行装下五个浮动小盒子 li，可以把它们的父盒子 ul 宽度加宽，这是一个小技巧 */
            width: 1225px;
        }
        
        .box .box-bd ul li {
            float: left;
            width: 228px;
            height: 270px;
            background-color: #fff;
            margin-right: 15px;
            margin-bottom: 15px;
        }
        
        .box .box-bd ul li img {
            width: 100%;
        }
        
        .box .box-bd ul li h4 {
            margin: 20px 20px;
            font-size: 14px;
            color: #050505;
            font-weight: 400;
        }
        
        .box .box-bd ul li .info {
            margin: 0 20px;
            font-size: 12px;
            color: #999;
        }
        
        .box .box-bd ul li .info span {
            color: #ff7c2d;
        }
    </style>
</head>

<body>
    <div class="box w">
        <div class="box-bd">
        	<ul>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
                <li>
                	<img src="images/pic.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>· 1125人在学习</div>
                </li>
            </ul>
        </div>
    </div>
</body>

footer

制作一个通栏大盒子 footer，给一个高度值，底色为白色；
大盒子里的版心盒子水平居中；
版心盒子里的版权盒子左侧浮动；
版心盒子里的链接组右侧浮动。

<head>
    <style>
        .footer {
            height: 415px;
        }
        
        .footer .w {
            padding-top: 35px;
        }
        
        .footer .w .copyright {
            float: left;
        }
        
        .footer .w .copyright p {
            font-size: 12px;
            color: #666;
            margin: 20px 0 15px 0;
        }
        
        .footer .w .copyright a {
            display: block;
            width: 118px;
            height: 33px;
            border: 1px solid #00a4ff;
            text-align: center;
            line-height: 33px;
            font-size: 16px;
            color: #00a4ff;
        }
        
        .footer .w .links {
            float: right;
        }
        
        .footer .w .links dl {
            float: left;
            margin-left: 100px;
        }
        
        .footer .w .links dl dt {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }
        
        .footer .w .links dl dd a {
            font-size: 12px;
            color: #333;
        }
    </style>
</head>

<body>
    <div class="footer">
        <div class="w">
            <div class="copyright">
            	<img src="images/logo.png">
                <p>学成在线致力于普及中国最好的教育，它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc. 保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="links">
            	<dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选择</a></dd>
                    <dd><a href="#">如何拿到毕业证</a></dd>
                    <dd><a href="#">学分是什么</a></dd>
                    <dd><a href="#">考试未通过怎么办</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

完整代码

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>学成在线-首页</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <!-- header -->
        <div class="header w">  
            <!-- logo -->
        	<div class="logo">  
            	<img src="images/logo.png">
        	</div>
            <!-- nav -->
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
            <!-- search -->
            <div class="search">
                <input type="text" value="输入关键词">
                <button></button>
            </div>
            <!-- user -->
            <div class="user">
                <img src="images/user.png">
                aibc-hp
            </div>
        </div>
        
        <!-- banner -->
        <div class="banner">
            <!-- banner 中的版心 -->
            <div class="w">
                <!-- subnav -->
            	<div class="subnav">
                    <ul>
                        <li><a href="#">前端开发 <span>&gt;</span></a></li>
                        <li><a href="#">后端开发 <span>&gt;</span></a></li>
                        <li><a href="#">移动开发 <span>&gt;</span></a></li>
                        <li><a href="#">人工智能 <span>&gt;</span></a></li>
                        <li><a href="#">商业预测 <span>&gt;</span></a></li>
                        <li><a href="#">云计算&大数据 <span>&gt;</span></a></li>
                        <li><a href="#">运维&从测试 <span>&gt;</span></a></li>
                        <li><a href="#">UI设计 <span>&gt;</span></a></li>
                        <li><a href="#">产品 <span>&gt;</span></a></li>
                    </ul>
                </div>
                <!-- course -->
                <div class="course">
                    <h2>我的课程表</h2>
                    <div class="bd">
                        <ul>
                            <li>
                                <h4>继续学习 HTML+CSS</h4>
                                <p>正在学习-页面布局</p>
                            </li>
                            <li>
                                <h4>继续学习 C程序语言设计</h4>
                                <p>正在学习-基础语法</p>
                            </li>
                            <li>
                                <h4>继续学习 C#程序语言设计</h4>
                                <p>正在学习-项目案例</p>
                            </li>
                        </ul>
                        <a href="#">全部课程</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- goods -->
        <div class="goods w">
            <h3>精品推荐</h3>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Spark</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">JavaWeb</a></li>
                <li><a href="#">JMV</a></li>
            </ul>
            <a href="#" class="mod">修改兴趣</a>
        </div>
        
        <!-- box -->
        <div class="box w">
            <!-- box-hd -->
            <div class="box-hd">
                <h3>精品推荐</h3>
                <a href="#">查看全部</a>
            </div>
            <!-- box-bd -->
            <div class="box-bd">
                <ul>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                    <li>
                        <img src="images/pic.png">
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <div class="info"><span>高级</span>· 1125人在学习</div>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- footer -->
        <div class="footer">
            <!-- footer 中的版心 -->
            <div class="w">
                <!-- copyright -->
                <div class="copyright">
                    <img src="images/logo.png">
                    <p>学成在线致力于普及中国最好的教育，它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc. 保留所有权利。-沪ICP备15025210号</p>
                    <a href="#">下载APP</a>
                </div>
                <!-- links -->
                <div class="links">
                    <dl>
                        <dt>关于学成网</dt>
                        <dd><a href="#">关于</a></dd>
                        <dd><a href="#">管理团队</a></dd>
                        <dd><a href="#">工作机会</a></dd>
                        <dd><a href="#">客户服务</a></dd>
                        <dd><a href="#">帮助</a></dd>
                    </dl>
                    <dl>
                        <dt>新手指南</dt>
                        <dd><a href="#">如何注册</a></dd>
                        <dd><a href="#">如何选择</a></dd>
                        <dd><a href="#">如何拿到毕业证</a></dd>
                        <dd><a href="#">学分是什么</a></dd>
                        <dd><a href="#">考试未通过怎么办</a></dd>
                    </dl>
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="#">合作机构</a></dd>
                        <dd><a href="#">合作导师</a></dd>
                    </dl>
                </div>
            </div>
        </div>
    </body>
    
</html>

/* 清除所有的内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* 公共类，版心的宽度，水平居中 */
.w {
    width: 1200px;
    margin: 0 auto;
}

/* 对整个 body 操作 */
body {
    background-color: #f3f5f7;
}

/* 清除列表的项目符号 */
li {
    list-style: none;
}

/* 清除链接的下划线 */
a {
    text-decoration: none;
}

/* header 盒子 */
.header {
    height: 42px;
    margin: 30px auto;
}

/* logo 盒子 */
.logo {
    float: left;
    width: 198px;
    height: 42px;
}

/* nav 盒子 */
.nav {
    float: left;
    margin-left: 60px;
}

/* nav ul 中的 li 盒子 */
.nav ul li {
    float: left;
    margin: 0 15px;
}

/* nav ul li 中的链接 */
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;  
    line-height: 42px;  
    font-size: 18px;
    color: #050505;
}

/* 鼠标经过效果 */
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}

/* search 盒子 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 50px;
}

/* search 中的文本框（行内块）*/
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    font-size: 14px;
    color: #bfbfbf;
    padding-left: 15px;
}

/* search 中的按钮（行内块） */
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮 button 默认有个边框，需要手动去除 */
    border: 0;
    background: url(images/btn.png);
}

/* user 盒子 */
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

/* banner 盒子 */
.banner {
    height: 421px;
    background-color: #1c036c;
}

/* banner 中的版心 */
.banner .w {
    height: 421px;
    background: url(images/banner.png) no-repeat top center;
}

/* subnav 盒子 */
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0, 0, 0, .3);
}

/* subnav ul 中的 li 盒子 */
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

/* subnav ul li 中的链接 */
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}

/* subnav ul li 中链接右侧的小箭头 */
.subnav ul li a span {
    float: right;
}

/* 鼠标经过效果 */
.subnav ul li a:hover {
    color: #00a4ff;
}

/* course 盒子 */
.course {
    float: right;
    width: 230px;
    height: 300px;
    margin-top: 55px;
    background-color: #fff;
}

/* course 中的 h2 盒子*/
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}

/* course 中的 bd 盒子 */
.course .bd {
    padding: 0 20px;
}

/* course bd ul 中的 li 盒子 */
.course .bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}

/* course bd ul li 中的 h4 盒子 */
.course .bd ul li h4 {
    font-size: 15px;
    color: #4e4e4e;
}

/* course bd ul li 中的段落 */
.course .bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}

/* course bd 中的链接 */
.course .bd a {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 10px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}

/* goods 盒子 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .1);
    line-height: 60px;
}

/* goods 中的 h3 盒子 */
.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}

/* goods 中的 ul 盒子 */
.goods ul {
    float: left;
    margin-left: 30px;
}

/* goods ul 中的 li 盒子 */
.goods ul li {
    float: left;
}

/* goods ul li 中的链接 */
.goods ul li a {
    padding: 0 40px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}

/* goods 中的链接 */
.goods .mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}

/* box 盒子 */
.box {
    margin-top: 30px;
}

/* box 中的 box-hd 盒子 */
.box .box-hd {
    height: 45px;
    line-height: 45px;
}

/* box box-hd 中的 h3 盒子 */
.box .box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}

/* box box-hd 中的链接 */
.box .box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-right: 30px;
}

/* box box-bd 中的 ul 盒子 */
.box .box-bd ul {
    /* 要想让一行装下五个浮动小盒子 li，可以把它们的父盒子 ul 宽度加宽，这是一个小技巧 */
    width: 1225px;
    overflow: hidden;
}

/* box box-bd ul 中的 li 盒子 */
.box .box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
}

/* box box-bd ul li 中的图像，跟 li 的宽度保持一致 */
.box .box-bd ul li img {
    width: 100%;
}

/* box box-bd ul li 中的 h4 盒子 */
.box .box-bd ul li h4 {
    margin: 20px 20px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

/* box box-bd ul li 中的 info 盒子 */
.box .box-bd ul li .info {
    margin: 0 20px;
    font-size: 12px;
    color: #999;
}

/* box box-bd ul li info 中的行内元素 */
.box .box-bd ul li .info span {
    color: #ff7c2d;
}

/* footer 盒子 */
.footer {
    height: 415px;
}

/* footer 中的版心盒子 */
.footer .w {
    padding-top: 35px;
}

/* footer w 中的 copyright 盒子 */
.footer .w .copyright {
    float: left;
}

/* footer w copyright 中的段落 */
.footer .w .copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}

/* footer w copyright 中的链接 */
.footer .w .copyright a {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    font-size: 16px;
    color: #00a4ff;
}

/* footer w 中的 links 盒子 */
.footer .w .links {
    float: right;
}

/* footer w links 中的 dl 盒子 */
.footer .w .links dl {
    float: left;
    margin-left: 100px;
}

/* footer w links dl 中的 dt 盒子 */
.footer .w .links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

/* footer w links dl dd 中的链接 */
.footer .w .links dl dd a {
    font-size: 12px;
    color: #333;
}

CSS 的定位

定位

为什么需要定位

某个元素想自由的在一个盒子内移动位置，并压住其他盒子，使用标准流或浮动能实现吗？

当滚动网页窗口时，想让某个盒子固定在屏幕某个位置，不随网页一起滚动，使用标准流或浮动能实现吗？

以上两种情况显然使用标准流或浮动是无法快速实现的，此时就需要通过定位来实现。

浮动可以让多个块级盒子在一行中无空隙的显示，经常用于横向排列盒子。

定位则是可以让盒子自由的在某个盒子内移动位置，或固定在屏幕中的某个位置，并且可以压住其他盒子。

定位组成

定位：将盒子定在某一个位置。因此定位也是在摆放盒子。

定位=定位模式+边偏移：

定位模式用于指定一个元素在文档中的定位方式
边偏移则决定了该元素的最终位置

定位模式

定位模式能够决定元素的定位方式，它通过 CSS 中的 position 属性来设置，有四个属性值：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移决定了盒子最终移动到什么位置，有 top、bottom、left 和 right 四个属性：

属性	示例	描述
top	top: 80px;	顶部偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px;	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px;	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px;	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位

静态定位是元素的默认定位方式，无定位的意思，简单了解即可。

选择器 {position: static;}

有几个点需要注意：

静态定位是按照标准流的特性来摆放位置，它没有边偏移
静态定位在布局时很少用到

相对定位

相对定位指的是元素在移动位置的时候，是相对于它自身原来的位置而言的。

选择器 {position: relative;}

相对定位的特点：

元素相对于自己原先的位置来移动，移动的参照点是自身
移动的盒子原先位置仍继续占有，后面的盒子在标准流中的位置并不受影响（不脱标）

绝对定位

绝对定位指的是元素在移动位置的时候，是相对于它的祖先元素而言的。

选择器 {position: absolute;}

绝对定位的特点：

如果没有祖先元素，或祖先元素没有定位，则以浏览器为基准进行定位（即使某元素有父元素，但父元素没有定位，则该元素仍会以浏览器为基准进行定位）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）

加了绝对定位的盒子不能通过 margin: 0 auto; 使其水平居中，但是可以通过以下计算方法实现水平居中和垂直居中：

水平居中：先让盒子走父盒子宽度的一半 left: 50%;，再让盒子走自身宽度的一半
垂直居中：先让盒子走父盒子高度的一半 top: 50%;，再让盒子走自身高度的一半

子绝父相

子绝父相指的是子级使用绝对定位，父级则需要使用相对定位：

子级使用绝对定位，则不会占有位置，可以放到父级盒子内的任何一个地方
父盒子需要加定位，才能限制有定位的子盒子在父盒子内显示
父盒子在布局时，需要占有位置，因此父盒子只能是相对定位

总结：父级需要占有位置，因此使用相对定位，子级不再需要占有位置，因此使用绝对定位；相对定位经常用来作为绝对定位的父级。当然，子绝父相并不是绝对的，子绝父绝、子相父相也可以出现。

固定定位

固定定位指的是元素固定在浏览器可视区的某个位置，使其在浏览器页面滚动时位置不改变。

选择器 {position: fixed;}

固定定位的特点：

以浏览器的可视窗口为参照点移动元素
- 因为以可视窗口为参照点，因此与父元素没有任何关系
- 不随页面滚动条的滚动而滚动
固定定位不再占有原先的位置
- 固定定位也是脱标的，因此也可以看做是一种特殊的绝对定位

固定定位小技巧，让盒子固定在版心右侧位置：

让固定定位的盒子 left: 50%，走到浏览器可视区的一半位置，对版心而言也是走了一半位置
让固定定位的盒子 margin-left: 版心宽度的一半，这样就可以让固定定位的盒子紧贴着版心右侧

粘性定位

粘性定位可认为是相对定位和固定定位的混合。

选择器 {position: sticky; top: 10px;}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top、left、right、bottom 中的一个才会有效

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况，此时可以使用 z-index 属性来控制盒子的叠放顺序（z 轴）。

选择器 {z-index: 1;}

属性值可以是正整数、负整数、0，默认是 auto（即依照书写顺序，写在后面的更靠上），数值越大，盒子越靠上。

属性值不加单位，只有定位的盒子才有 z-index 属性。

定位特殊性

绝对定位和固定定位与浮动类似：

行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
块级元素添加绝对定位或固定定位，如果不给宽度或高度，则块级元素的大小就是内容的大小
浮动元素、绝对定位、固定定位都不会触发外边距合并的问题（即脱标的盒子不会触发外边距塌陷）
浮动元素会压住它下面标准流的盒子（脱标），但是不会压住标准流盒子里面的文字或图片；而绝对定位或固定定位则是会压住标准流盒子中的所有内容；浮动之所以不会压住文字，是因为浮动产生的最初目的就是为了做文字环绕效果的（文字会围绕在浮动元素周边）

定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否（占有位置）	相对于自身位置移动	常用
absolute 绝对定位	是（不占有位置）	带有定位的祖先元素	常用
fixed 固定定位	是（不占有位置）	浏览器可视区	常用
sticky 粘性定位	否（占有位置）	浏览器可视区	当前阶段少

网页布局总结

一个完整的网页，往往由标准流、浮动、定位一起布局完成，每个都有自己的专门用法和适用场景。

多个块级盒子垂直显示就用标准流布局；
多个块级盒子水平显示就用浮动布局；
想让元素在盒子内自由移动就用定位布局。

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但刷新下页面就又会重新出现。

所谓元素的显示与隐藏，就是让一个元素在页面中隐藏或显示出来。

有三个属性可以用来显示和隐藏元素：display（显示/隐藏）、visibility（显示/隐藏）、overflow（溢出的部分显示/隐藏）。

display

display 属性用于设置一个元素应如何显示：

display: none;，隐藏元素。display 隐藏元素后，不再占有原先的位置
display: block;，除了转换为块级元素为，同时还有显示元素的意思

display 属性应用极其广泛，搭配 JS 可以做出很多的网页效果。

visibility

visibility: inherit | visible | collapse | hidden
	inherit -- 继承上一个父元素的可见性
	visible -- 元素显示
	hidden -- 元素隐藏
	collapse -- 主要用来隐藏表格的行或列

visibility 属性用于指定一个元素可见还是隐藏，最常用的就是以下两个：

visibility: visible;，元素可见
visibility: hidden;，元素隐藏

visibility 隐藏元素后，继续占有原先的位置。

如果在隐藏元素的同时还想保留原先的位置，就用 visibility: visible;。

如果在隐藏元素的同时不想保留原先的位置，就用 display: none;（用处更多）。

overflow

overflow 属性不是对整个元素进行显示或隐藏，而是对元素溢出的部分进行显示或隐藏。

overflow: visible | auto | hidden | scroll
	visible -- 元素溢出的部分可见
	hidden -- 元素溢出的部分隐藏
	scroll -- 显示滚动条，即使不溢出也会显示滚动条
	auto -- 溢出时显示滚动条，不溢出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用 overflow: hidden;，因为它会隐藏多余的部分。

写进メ诗的结尾。

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录