CSS3的基本使用
# CSS基础
# 😆CSS简介
CSS的主要使用场景就是美化网页，布局页面的
HTML的局限性
HTML只关注内容的语义，网页元素显示出来
做结构，显示元素内容
CSS网页的美容师
CSS是层叠样式表(Cascading Style Sheets)的简称，有时候也称为CSS样式表或级联样式表
CSS也是一种标记语言
CSS主要用于设置HTML页面中文本内容（字体，大小，对齐方式等），图像的外形（宽高，边框样式，边距等）以及版面的布局和外观显示样式
CSS可以美化HTML，让HTML更漂亮，让页面布局更简单
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离
# 😎CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化
简单理解：CSS初始化是指重设浏览器的样式（也称CSS reset）
每个网页都必须首先进行CSS初始化
# 😏CSS语法
# 1. CSS语法规范
CSS规则由两个主要的部分构成，选择器以及一条或多条声明
- 选择器是由指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式的属性
- 属性和属性值之间用英文 ；分开
- 多个“键值对”之间用英文 ；进行区分
<!doctype html>
<html lang="en">
<head>
...
<title>Document</title>
<style>
p {
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<p>hihihi</p>
</body>
</html>
# 2. Emmet语法
作用：提高 html / css 的编写速度
- 快速生成HTML结构
- 生成标签：直接输入标签名，按tab键即可
- 生成多个相同标签，加上 * 就可以了
- 父子级关系的标签，用 > 就可以了
- 兄弟关系的标签，用 + 就可以了 div+p
- 带有类名或id名，直接写 .demo 或 #demo
- 如果生成的div类名有顺序，可以用自增符号
$div$*3 - 生成的标签内部写内容可以用
{}表示
- 快速生成CSS样式语法
- 例如：
ti = text-indent: ; lh26px = line-height: 26px;
- 例如：
# 3. CSS引用方式
CSS样式表可以分为三大类
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(链接式)
# 3.1 内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有CSS代码抽取出来，单独放到<style>标签中
<head>
<style>
div {
color : red;
}
</style>
</head>
<body>
<div>aaa</div>
<style>
div {
color : red;
}
</style>
</body>
<style>标签理论上可以放在HTML文档中的任何地方，但一般会放到文档中的<head>标签中- 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
- 使用内部样式表设定CSS，通常也会被称为嵌入式引入
# 3.2 行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。用于修改简单的样式
<body>
<p style="color:red;">
aaa
</p>
</body>
- style 其实就是标签的属性
- 在双引号中间，写法要符合CSS规范
- 可以控制当前的标签设置样式
- 当只有对当前元素添加简单样式的时候，可以考虑使用
- 使用行内样式表设定CSS，通常也被称为
行内式引入
# 3.3 外部样式表
实际开发中都是使用外部样式表，适合于样式比较多的情况。核心：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表分两步
- 新建后缀名为.css的样式文件，把所有CSS代码都放到此文件中
- 在HTML页面中，使用
<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
# 4. CSS三大特性
CSS有三个非常重要的三个特性：层叠性，继承性，优先级
# 4.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
层叠式主要解决样式的冲突问题
<style>
div {
color:red;
font-size:12px;
}
div {
color:pink;
}
</style>
样式冲突，遵循的原则是
就近原则，哪个样式离结构近，就执行哪个样式,样式不冲突，不会层叠
# 4.2 继承性
CSS继承：子标签会继承父标签的某些样式，如文本颜色、字号等。
<style>
div {
color:red;
font-size:12px;
}
</style>
<body>
<div>
<p>
aaa
</p>
</div>
</body>
# 4.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
<style>
div {
color:red;
}
. text {
color:pink;
}
</style>
<body>
<div claas="test">
aaa
</div>
</body>
需要注意：
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承 或 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器 伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| !important 重要的 | 无穷大 |
# 4.4 权重叠加
复合选择器有权重叠加的问题
<style>
ul li {
color:green;
}
li {
color:pink;
}
</style>
<body>
<ul>
<li>aa</li>
</ul>
</body>
ul li 权重 0，0，0，1 + 0，0，0，1 = 0，0，0，2
# 😊元素显示模式
作用：在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页
元素显示模式就是元素（标签）以什么方式进行显示
HTML元素一般分为块元素和行内元素两个类型
# 1. 块元素
常见的块元素：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<div>标签是最典型的块元素
块级元素的特点：
- 比较霸道，自己独占一行
- 高度，宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：
文字类的元素内不能放块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
# 2. 行内元素
常见的行内元素：
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素
注意：
链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
# 3. 行内块元素
常见的行内块标签：
<img />、<input />、<td>
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙
- 一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）
# 4. 元素显示模块转换
特殊情况下，需要元素模式的转换，简单理解为：一个模式的元素需要另一种模式的特性
比如增加<a>的触发范围
- 转换为块元素：
display:block - 转换为行内元素：
display:inline - 转换成行内块：
display:inline-block
# 😆CSS基础选择器
# 1. CSS选择器作用
选择器（选择符）就是根据不同需求把不同的标签选择出来这就是选择器的作用。简单来说，就是选择标签用的
# 2. CSS选择器分类
选择器分为基础选择器和复合选择器两大类
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
# 2.1 标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
- **作用：**标签选择器可以把某一类标签全部选择出来，如所有的
<div>和所有的<span>标签 - **优点：**能快速为页面中同类型的标签统一设置样式
- **缺点：**不能设计差异化样式，只能选择全部的当前标签
标签名 {
属性1：属性值1；
...
}
<style>
p {
color: green;
}
</style>
# 2.2 类选择器
如果想差异化选择不同标签，单独选一个或某几个标签，可以使用类选择器
.类名 {
属性1：属性值1；
...
}
结构需要使用class属性调用class类的意思;
类选择器在HTML中以class属性表示。在CSS中，类选择器以一个点"."号显示
<head>
<style>
.red {
color : red;
}
</style>
</head>
<body>
<div class="red">红色</div>
</body>
注意：
- 类选择器使用的"."(英文点号)进行标识，后面紧跟类名(自定义)
- 可以理解为给这个标签起名字
- 长名字或词组可以使用中横线来为选择器命名
- 不要使用纯字母、中文等命名；尽量使用英文字母标表示
- 命名要有意义
- 命名规范（Web前端开发规范手册.doc）
# 2.3 类选择器-多类名
可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签
简单理解为一个标签有多个名字
使用方式
<div class="red content1">aa</div>
# 2.4 id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
#id名 {
属性1：属性值1；
...
}
只能调用一次，不能在多个div中使用同个id，只能一个人使用！！！
<head>
<style>
#red {
color : red;
}
</style>
</head>
<body>
<div id="red">红色</div>
</body>
# 2.5 通配符选择器
在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）
<style>
* {
margin: 0;
padding: 0;
}
</style>
# 😆CSS复合选择器
在CSS中，可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器 ，复合选择器式建立在基础选择器之上，对基本选择器进行组合形成的
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器，子选择器，并集选择器、伪类选择器等等
# 1. 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面。中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
元素1 元素2 {
样式声明；
}
- 元素1 和 元素2 中间空格隔开
- 元素1 是父级 ，元素2 是子级 最终选择的是元素2
- 只要是元素1 的后代就可以
- 元素1 和 元素2 是任意基础选择器
<head>
<style>
ol li {
color: pink;
}
</style>
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
# 2. 子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是亲儿子的元素
元素1 > 元素2 {
样式声明；
}
- 表示选择元素1里面的所有直接后代（子元素）元素2
- 元素1 和 元素2 中间用大于号隔开
- 元素1 父级；原生2是子级，自己的亲儿子
<style>
# 后代选择器
.nav a {
color: pink;
}
# 子选择器
.nav > a {
color: pink;
}
</style>
# 3. 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
元素1,元素2 {
样式声明；
}
- 通过英文逗号（,）连接而成，
任何形式选择器都可以作为并集选择器的一部分
<style>
# 子选择器
div,p {
color: pink;
}
</style>
# 4. 伪类选择器
伪类选择器用于向某一些选择器添加特殊效果。
伪类选择器最大的特点是用冒号（:）表示，比如 :hover , :first-child
伪类选择器有很多，比如有链接伪类，结构伪类等
# 4.1 链接伪类选择器
a:link选择所有未被访问的链接a:visited选择所有已被访问的链接a:hover选择鼠标指针位于其上的链接a:active选择活动链接（鼠标按下未弹起的链接）
<body>
<style>
# 未访问的链接
a:link {
color: black;
text-decoration: none;
}
# 访问过的链接
a:visited {
color: pink;
text-decoration: none;
}
# 鼠标经过时的链接
a:visited {
color: red;
text-decoration: none;
}
# 鼠标点击链接，未松开
a:active {
color: red;
text-decoration: none;
}
</style>
<a href="#">aaa</a>
</body>
# 4.2 :focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这些选择器也主要针对表单元素来说
input:focus {
background-color:yellow;
}
# 😍CSS样式
# 1.字体属性
# 1.1 字体系列
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式（如斜体等）
CSS 使用 font-family 属性定义文本的字体系列
注意：
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
p {
font-family: Arial;
}
# 1.2 字体大小
CSS 使用 font-size 属性定义字体大小
- px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的字体大小为16px
- 不同浏览器可能默认显示的字号大小不一致，所以尽量给一个明确值
- 可以给body指定整个页面文字大小
p {
font-size: 20px;
}
# 1.3 字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细
font-weight: normal | bold | bolder | lighter | number
| 参数 | 描述 |
|---|---|
| normal | 正常的字体。相当于number为400 |
| bold | 粗体。相当于number为700；也相当于<b>标签 |
| bolder | 特粗体 |
| lighter | 细体 |
| number | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
p {
font-weight: bold;
}
# 1.4 字体样式
CSS 使用 font-style 属性设置文本的风格
font-style：nomal | italic
| 参数 | 描述 |
|---|---|
| nomal | 默认值。浏览器会显示标准的字体样式 font-style:normal; |
| italic | 浏览器会显示斜体的字体样式; |
p {
font-weight: bold;
}
# 1.5 字体复合属性
字体属性可以把以上字体样式综合起来写，更节约代码
font: font-style font-weight font-size/line-height font-family;
使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用
font: italic Arial;
p {
font: italic 700 16px Arial;
}
# 2. 文本属性
CSS Text(文本)属性用于定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
# 2.1 文本颜色
color 属性用于定义文本颜色
| 颜色 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue ... |
| 十六进制 | #FF0000 , #FF6600 , #29D794 |
| RGB代码 | rgb(255,0,0) |
p {
color: red;
color: rgb(255,0,255);
color: #FF0000;
}
# 2.2 对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
| 属性值 | 解释 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
p {
text-align: center;
}
# 2.3 装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
| 属性值 | 描述 |
|---|---|
| none | 默认。没有装饰线 |
| underline | 下划线。链接a自带下划线 |
| overline | 上划线（几乎不用） |
| line-through | 删除线 |
p {
text-decoration: underline;
}
超链接a的下划线取消方式 ↑ ，自行理解
# 2.4 文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
p {
text-indent：20px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度。甚至该长度可以是负值的
p {
text-indent：2em;
}
em是一个相对单位，就是当前元素（font-size）1个文字的大小。如何当前元素没有设置大小，则会按照父元素的1分文字大小
# 2.5 行间距
line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
行间距 = 上间距 + 文本高度 + 下间距
p {
line-height：26px;
}
# 2.6 垂直居中
让文字的行号等于盒子的高度 就可以让文字在当前盒子内垂直居中
height: 40px;
line-height: 40px;
# 2.7 文本阴影
在CSS3中，可以使用text-shadow属性将阴影应用于文本
text-shadow：h-shadow v-shadow blur color;
# 3. CSS背景
通过CSS背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等
页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色
# 3.1 背景颜色
background-color 属性定义了元素的背景颜色
background-color: transparent(默认，透明的) |color
# 3.2 背景图片
background-image属性描述了元素的背景图像
优点：非常便于控制位置
background-image: none(无背景图片) | url (使用绝对或相对地址指定背景图像)
# 3.3 背景平铺
如果需要HTML页面上对背景图像进行平铺，可以使用background-repeat
background-repeat：repeat(默认情况都是平铺) | no-repeat(默认情况都是平铺) | repeat-x(沿x轴平铺) | repeat-y(沿y轴平铺)
# 3.4 背景图片位置
background-position 属性可以改变图片在背景中的位置
background-position: x y;
参数代表意思：x坐标和y坐标 ；可以使用 方位名词 或 精准单位
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名称 |
示例：
<style>
body {
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
# 3.5 精确单位
background-position: 20px 50px;
- 如何参数值时精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
- 如何只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
# 3.6 混合单位
background-position: 20px center;
- 如果指定的两个值时精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
# 3.7 背景图像固定
background-attachment属性设置背景图像是否固定或随页面的其余部分滚动
可以制作视差滚动的效果
background-attachment：scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象的内容滚动 |
| fixed | 背景图像固定 |
# 3.8 背景属性复合写法
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中，从而节约代码量
# 3.9 背景色半透明
background：rgba(0,0,0,0.3)
CSS3为我们提供了背景颜色半透明的效果,最后一个参数是alpha透明度，取值范围在0 ~ 1之间
# 3.10 综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五彩导航</title>
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height:48px;
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url(img/bg1.png) no-repeat;
}
.nav .bg2 {
background: url(img/bg2.png) no-repeat;
}
.nav .bg3 {
background: url(img/bg3.png) no-repeat;
}
.nav .bg4 {
background: url(img/bg4.png) no-repeat;
}
.nav .bg5 {
background: url(img/bg5.png) no-repeat;
}
.nav .bg1:hover {
background: url(img/bg5.png) no-repeat;
}
.nav .bg2:hover {
background: url(img/bg4.png) no-repeat;
}
.nav .bg3:hover {
background: url(img/bg11.png) no-repeat;
}
.nav .bg4:hover {
background: url(img/bg2.png) no-repeat;
}
.nav .bg5:hover {
background: url(img/bg1.png) no-repeat;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>
# 😴CSS盒子
# 1. 盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容
页面布局需要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面
网页布局过程：
- 准备相关的网页元素，网页元素基本都是盒子Box
- 利用CSS设置好盒子样式，然后摆放到相应位置
- 盒子里放内容
# 2. 边框border
border可以设置元素的边框。边框有三部分组成：边框的宽度（粗细）、边框样式、边框颜色
border：border-width | border-stype | border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位px |
| border-style | 边框的样式<br />solid 实线边框、dashed 虚线边框、dotted 点线边框 |
| border-color | 边框颜色 |
复合写法：没有顺序
border: 1px solid red
border还可以分上下左右来写
<style>
div {
width: 100px;
height: 100px;
border-top: 1px solid red;
border-bottom: 1px solid pink;
border-right: 1px solid blue;
border-left: 1px solid black;
}
</style>
# 3. 边框影响盒子的实际大小
边框会额外增加盒子的实际大小。因此我们有两种解决方案
- 测量盒子大小时候，不要边框
- 如果测量的时候包含了边框，则需要
width/height减去边框的宽度
# 4. 表格border-collapse
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
/* 合并相邻的边框 */
border-collapse: collapse;
# 5. 内边距padding
padding属性用于设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding属性的复合写法
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 上下左右都有5px的内边距 |
| padding:5px 10px; | 上下内边距5px，左右内边距10px |
| padding:5px 10px 20px; | 上5px，左右10px，下20px |
| padding:5px 10px 20px 30px; | 上5px，右10px，下20px，左30px 顺时针 |
# 5.1 padding影响盒子的实际大小
当给盒子指定padding值之后，发生了2件事情
- 内容和边框有距离，添加了内边距
- padding影响盒子的实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方法:
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
# 5.2 pandding不撑开盒子大小
盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
# 6. 外边距margin
margin属性用于设置外边距，即控制盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
# 6.1 外边距典型应用
可以让块盒子水平居中，但必须满足两个条件
- 盒子必须指定的宽度
- 盒子左右的外边距都设置为auto
margin：0 auto;
行内元素或行内块元素水平居中给其父元素添加text-align:center
# 6.2 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom，下面元素有margin-top，则它们之间的垂直间距不是margin-bottom和margin—top之和，而是取两个值中的较大者
解决：
尽量只给一个盒子添加margin值
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距的同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决：
可以为父元素定义上边框
border：1px solid transparent可以为父元素定义上内边距
padding：1px/** 可以为父元素添加 **/ overflow:hidden
# 7. 圆角边框
在CSS3中，新增圆角边框样式，这样盒子就可以变圆角
border-radius:length;
radius半径(圆的半径)原理：圆与边框的交集形成圆角效果
- 参数值可以为数值或百分比的形式
- 设置圆形，参数 = 正方形的宽度或高度的一半
- 设置圆形，参数 = 50%
- 圆角矩形，参数 = 高度的一半
- 参数简写属性
- 四个值，左上角、右上角、右下角和左下角
# 8. 盒子阴影
在CSS3中，新增了盒子阴影。可以使用box-shadow属性为盒子添加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置。允许负值 |
| v-shadow | 必需，垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影(outset)改为内部阴影 |
# 😟CSS浮动
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置
CSS提供了三种传统布局方式（简单说就是盒子如何进行排列顺序）
- 普通流（标准流）
- 浮动
- 定位
标准流
所谓标准流：就是标签按照规定好默认方式排列
- 块级元素会独占一行，从上向下顺序排序
- 常用元素：
div hr p h1 ~ h6 ul ol dl form table
- 常用元素：
- 行内元素会按照顺序，从左到右顺序排序，碰到父元素边缘则自动换行
- 常用元素：
span a i em ...
- 常用元素：
浮动最典型的应用：可以将多个块级元素一行内排列显示
网页布局的准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
# 1. 浮动float
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器 { float: 属性值 }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
# 2. 浮动特性
加了浮动之后，会具有很多特性，需要掌握
浮动元素会脱离标准流(脱标)浮动元素会一行内显示并且元素顶部对齐浮动元素会具有行内块元素的特性
1.设置浮动float的元素最重要特性
- 脱离标准普通流的控制(浮)移动到指定位置(动)，俗称脱标
- 浮动的盒子
不再保留原先的位置
2.如果多个盒子都设置浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会又缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐
3.浮动元素会具有行内块元素特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素的相似特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽。但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间没有缝隙的。是紧挨着一起的
- 行内元素同理
4.浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采用的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置，符合网页布局第一准则
# 3. 浮动布局注意
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排序左右位置
2.一个元素浮动，理论上其余兄弟元素也浮动
一个盒子里有多个子盒子，如果其中一个盒子浮动，那么其他兄弟也应该浮动。以预防引起问题
浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
# 4. 清除浮动
为什么要清除浮动？
由于父级盒子很多情况下，不方便给高度。但是子盒子浮动又不占又位置。最后父级盒子高度为0时，就会影响下面的标准流盒子
# 5. 清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检查高度，父级有了高度，就不会影响下面的标准流了
选择器 { clear:属性值；}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
实际工作中，几乎只用 clear:both;
清除浮动的策略：闭合浮动
# 6. 清除浮动方法
- 额外标签法，也称隔墙法（W3C推荐）
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
# 6.1 额外标签法
额外标签法会在浮动元素末尾添加一个空的标签，如<div class="clear"></div>，或者其他标签</br>等
然后在.clear上编写 clear:both
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
注意：这个空标签必须是块级元素
# 6.2 父级添加overflow属性
可以给父级添加overflow属性，将其属性值设置为hidden、auto 或 scroll
- 优点：代码简洁
- 缺点：无法显示溢出的部分
# 6.3 父级添加:after伪元素法
:after 方式是额外标签法的升级版，也是父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6 7 专有 * /
*zoom: 1;
}
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站：百度、淘宝网、网易...
# 6.4 双伪元素清除浮动
也给父元素添加
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯...
# 😕CSS定位
标准流或浮动都无法快速实现，此时需要定位来实现
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子
# 1. 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子,
定位 = 定位模式 + 边偏移定位模式：用于指定一个元素在文档中的定位方式
边偏移：则决定该元素的最终位置
# 2. 定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
# 3. 边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
# 4. 静态定位Static
静态定位就是元素的默认定位方式，无定位的意思
选择器 { position:static; }
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到
# 5. 相对定位relative
相对定位时元素在移动位置的时候，是相对于它原来的位置来说的
选择器 { position:relative; }
相对定位的特点：
- 它是相对于自己原来的位置来移动的
（移动位置的时候参照点是自己原来的位置） - 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
（不脱标，继续保留原来的位置）
# 6. 绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
选择器 { position:absolute; }
- 如果
没有祖先元素或祖先元素没有定位，则以浏览器为准定位(Document文档) - 如果祖先元素有定位（相对、绝对、固定定位），则以最近的一级的有定位祖先元素为参考点移动位置
- 绝对定位
不再占有原先的位置（脱标）
# 7. 子绝父相的由来
子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不会占有位置。可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级
总结：因为父级需要占有位置，因此时相对定位。子盒子不需要占有位置，则是绝对定位
# 8. 固定定位fixed
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可在浏览器页面滚动时元素的位置不会改变
选择器 { position:fixed; }
固定定位特点：
- 以浏览器的可视窗口为参照点移动的元素
- 跟父元素没有任何关系
- 不随着滚动条的滚动而滚动
- 不在占有原先的位置
固定定位也是脱标的，其实固定定位耶可以看做是一种特殊的绝对定位
固定定位技巧：固定在版心右侧位置
- 让固定定位盒子left:50%，走到浏览器可视区的一半位置
- 让固定定位的盒子 margin-left，版心宽度的一半距离。多走版心宽度的一半位置
<head>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子</div>
</body>
# 9. 粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的
选择器 { position:sticky; top:10px;}
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom其中一个才有效
但兼容性很差，IE不支持
<head>
<style>
body {
height: 3000px;
}
.nav {
position: sticky;
width: 800px;
height: 50px;
background-color: skyblue;
margin: 100px auto;
top: 0;
}
</style>
</head>
<body>
<div class="nav">导航栏</div>
</body>
# 10.定位扩展
# 10.1 定位叠放顺序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
选择器 { z-index:1; }
数值可以是正整数、负整数或0。默认为auto。数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
# 10.2 绝对定位的盒子居中
加了绝对定位的盒子不能通过margin: 0 auto水平居中。但可以通过计算方式实现水平和垂直居中
position: absolute
1.父容器宽度的一半
left:50%;
2.margin负值往左边走自己盒子宽度的一半
margin-left:-100px
top:50%
margin-top:-100px
width:200px
height:200px
background-color:pink
# 10.3 定位的特殊特性
绝对定位和固定定位也和浮动类似
- 行内元素添加
绝对或固定定位，可以直接设置高度和宽度 - 块级元素添加
绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小
1.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题
2.绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字\图片
<head>
<style>
.box {
float: left;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<p>zzz</p>
</body>
但绝对定位（固定定位）会压住下面标准流所有的内容
<head>
<style>
.box {
position: absolute;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<p>zzz</p>
</body>
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果。文字会围绕浮动元素
# 10.4 定位综合案例
<head>
<style>
* {
margin: 0;
padding: 0;
}
.tb-promo {
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
}
.tb-promo .prev {
position: absolute;
top: 50%;
left: 0;
margin-top: -15px;
width: 20px;
height: 30px;
color: white;
background: rgba(0,0,0,.3);
text-align: center;
line-height: 30px;
text-decoration: none;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.tb-promo .next {
position: absolute;
top: 50%;
right: 0;
margin-top: -15px;
width: 20px;
height: 30px;
color: white;
background: rgba(0,0,0,.3);
text-align: center;
line-height: 30px;
text-decoration: none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: pink;
background: rgba(255,255,255,.3);
border-radius: 7px;
}
li {
list-style: none;
}
.promo-nav li {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
float: left;
}
.promo-nav li:hover {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="images/tb.jpg">
<a href="#" class="prev"> < </a>
<div class="next"> > </div>
<ul class="promo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
# 😊CSS显示隐藏元素
让一个元素崽页面中隐藏或显示出来
# 1. display
display属性用于设置一个元素应如何显示
- display: none 隐藏对象
- display: block 除了转换为块级元素之外，同时还可以显示元素的意思
display隐藏元素后，不再占有原来的位置
# 2. visibility
visibility属性用于设置一个元素应可见还是隐藏
- visibility : visible 元素可视
- visibility : hidden 元素隐藏
visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用
visibility : hidden如果隐藏元素不想要原来位置，就用
display: none（用处多）
# 3. overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，发生什么
overflow : visible 默认，把溢出的内容显示出来
overflow : hidden 把溢出的内容隐藏起来
overflow : scroll 把溢出的内容显示滚动条
overflow : auto 在需要的地方添加滚动条
（跟scroll区别，当使用auto时候，溢出显示滚动条，没溢出没有滚动条）
如果有定位的盒子，请谨慎使用 overflow : hidden ，因为它会隐藏多余的部分
# 4. 案例遮罩层
有半透明黑色的遮罩看不见，当鼠标经过就显示出来
遮罩的盒子不占有位置，就需要用绝对定位和display配合使用
<head>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
height: 100%;
width: 100%;
}
.tudou .mask {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,.4) url(images/arr.png) no-repeat center;
}
/* 当鼠标经过土豆盒子，就让里面的遮罩层显示出来 */
.tudou:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg">
</div>
</body>
# 😱CSS高级技巧
# 1. 精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵图(也称CSS Sprites、CSS雪碧)
精灵技术目的：
为了有效减少服务器接收和发送请求次数，提高页面的加载速度
使用精灵图核心：
- 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
- 这个大图片也称sprites精灵图或者雪碧图
- 移动背景图片位置，此时可以使用
background-position - 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
使用精灵图核心总结：
- 精灵图主要针对于小的背景图片使用
- 主要借助于背景位置来实现
background-position - 一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）
<head>
<style>
span {
display: inline-block;
}
.m {
width: 146px;
height: 134px;
background: url("images/abcd.jpg") no-repeat -105px -268px;
}
</style>
</head>
<body>
<span class="m"></span>
</body>
# 2. 字体图标
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标
精灵图有诸多优点，但缺点也很明显
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完成想要更换非常复杂
此时，有一种技术出现很好的解决了以上问题，就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
- 兼容性：几乎支持所有的浏览器
注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化
总结：
- 遇到一些结构和样式比较简单的小图标，就用字体图标
- 遇到一些结构和样式复杂一点的小图片，就用精灵图
字体图标是一些网页常见的小图标，我们直接网上下载即可
- 字体图标的下载
- 字体图标的引用（引入html页面）
- 字体图标的追加（添加新的小图标）
下载网站：
- icomoon字库 http://icomoon.io （免费，外服）
- 阿里iconfont字库 http://www.iconfont.cn (免费)
字体图标引用：
把下载包里面的
fonts文件夹放入页面根目录下
在css样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中（不需要记，下载的压缩包里面自带了style.css复制前面的就好啦）
<style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } </style>声明图标
<head> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } span { font-family: 'icomoon'; } </style> </head> <body> <span></span> //这图标在压缩包里面的html中找到需要的复制，然后style声明样式就生成了 </body>
字体图标追加
- 在网页中找到下载图标的网页中，然后上传曾经我们下载的selection.json，最后选中自己又想添加的图标，最后替换新的压缩包，并替换以前的文件
# 3. CSS三角
<head>
<style>
/*.box1 {*/
/* width: 0;*/
/* height: 0;*/
/* border-top: 10px solid pink;*/
/* border-right: 10px solid red;*/
/* border-bottom: 10px solid blue;*/
/* border-left: 10px solid green;*/
/*}*/
.box1 {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
案例
京东效果
<head>
<style>
.jd {
position: relative;
width: 50px;
height: 100px;
background-color: pink;
}
.jd span {
position: absolute;
width: 0;
height: 0;
/*为了照顾兼容性*/
font-size: 0;
line-height: 0;
border: 5px solid transparent;
border-bottom-color: pink;
right: 15px;
top: -10px;
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>
# 4. CSS用户界面样式
所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
# 4.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li { cursor: pointer; }
| 属性值 | 描述 |
|---|---|
| default | 小白（默认） |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<li style="cursor: pointer;"></li>
# 4.2 表单轮廓outline
给表单添加outline:0; 或者 outline:none; 样式之后，就可以去掉默认的蓝色边框
<style>
input {
outline: none;
}
</style>
<body>
<input type="text">
</body>
# 4.3 防止拖拽文本域resize
<style>
textarea {
resize: none;
}
</style>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
# 4.4 vertical-align属性
vertical-align属性使用场景：经常用于设置图片或表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但它只针对于行内元素或者行内块元素有效
vertical-align : baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
# 5. 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方式两种：
- 给图片添加
vertical-align : top | middle | bottom - 把图片转换为块级元素
display : block
# 6. 单行文字溢出省略号显示
单行文字溢出显示省略号 -- 必须满足三个条件
1.先强制一行内显示文本
white-space : nowrap;（默认normal自动换行）
2.超出的部分隐藏
overflow : hidden;
3.文字用省略号代替超出的部分
text-overflow : ellipsis;
# 7. 多行文本溢出显示省略号
多行文本溢出显示省略号，有比较大兼容性问题。适合于webKit浏览器或移动端（移动端大部分是webkit内核）
overflow : ellipsis;
text-overflow : ellipsis;
1.弹性伸缩盒子模型显示
display : -webkit-box;
2.限制在一个块元素显示的文本的行数
-webkit-line-clamp : 2;
3.设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient : vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置多少个字，操作更简单
# 8. 常见布局技巧
# 8.1 margin负值的运用
<head>
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
- 让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
<style>
ul li {
position: relative; /* 情况二 */
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;;
}
/* 情况一 */
ul li:hover {
position: relative;
border: 1px solid blue;
}
/* 情况二 */
ul li:hover {
z-index: 1;
border: 1px solid blue;
}
</style>
# 8.2 文本围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 70px;
margin-right: 5px;
}
.pic img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
</body>
# 8.3 行内块的巧妙运用
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-decoration: none;
text-align: center;
line-height: 36px;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="elp">....</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
# 8.4 CSS三角强化
<head>
<style>
.box1 {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
border-bottom: 0px solid blue;
border-left: 0px solid green;
}
.box2 {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<head>
<style>
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-width: 700;
}
.miaosha i {
position: absolute;
right: 0;
/*top: 0;*/
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">￥1650
<i></i>
</span>
<span class="origin">￥5650</span>
</div>
</body>