目录
1.语法风格&代码规范：
(1)语法规范
(2)注释
(3)代码风格
(4)注意事项
2.选择器分类
(1)基础选择器
1)标签选择器
2）类选择器
3）id选择器
4）通配符选择器
(2)复合选择器
1）后代选择器 (重要)
2）子选择器
3）并集选择器(重要)
（3）伪类选择器
1）链接伪类选择器(重要)
2）:focus伪类选择器
3.CSS字体属性
（1）font-family：设置文字字体
（2）font-size：设置字体大小
(3）font-weight：调整字体粗细
(4）font-style：设置文字样式
(5）字体复合属性
4.CSS文本属性
(1）text-align：文本水平对齐方式
(2）color：文本颜色
(3）text-indent：文本缩进
(4）text-decoration：文本装饰
(5）line-height：行间距（行高）
5.CSS引入方式
(1）内部样式表：
(2）行内样式表：
(3）外部样式表:
6.Chrome调试工具
7.Emmet语法
（1）快速生成html结构
（2）快速生成css样式
（3）vscode中好用的功能
8.CSS元素显示模式
1.块元素：
2.行内元素（内联元素）
3.行内块元素
4.元素显示模式转换
9.文字垂直方向居中显示
10.CSS的背景属性
（1）background-color 背景颜色
（2）background-image 背景图片
（3）background-repeat 背景平铺
（4）background-position： x y； 背景图片的位置
（5）background-attachment 背景图像是否固定
（6）background: 背景样式的 复合性写法
（7）背景属性总结
11.CSS三大特性
1.层叠性
2.继承性
3.优先级
12.CSS盒子模型
(1)边框(border)
（2）内边距(padding)
（3）外边距(margin）
1）外边距典型应用：
2）外边距的合并：
3）嵌套块元素垂直外边距的塌陷
13.清除内外边距
14.PS
1.测量网页元素大小
2.PS切图：
15.案例总结：
16.圆角边框（重点）
17.盒子阴影（重点）
18.文字阴影
19.CSS浮动-float
1.float 属性：
2.浮动特性(重难点！)
(1）浮动元素会脱离标准流（脱标）
(2）浮动元素会一行内显示且沿着元素顶端对齐
(3）浮动的元素--都具有行内块元素的特性
(4）浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
(5）一浮全浮: 有一个孩子浮动了，其余的兄弟元素都要浮动才行，要不然没用。
3.清除浮动
清除浮动方法：
(1）额外标签法（隔墙法）
(2）父级元素添加 overflow属性（重点）
(3）父级元素添加 after伪元素（重点）（百度，网易，淘宝用此法）
(4）父级元素添加 双伪元素（重点）（小米，腾讯 用此法）
20.学习开发流程&遵循规则/思路/注意事项
21.CSS定位
1.相关知识：
1.1.定位模式：
1.2.边偏移：
2.定位
1.静态定位static
2.相对定位relative（重要）
3.绝对定位absolute（重要）
4.固定定位 fixed（重要）
5.粘性定位sticky
6.定位的总结：
7.定位叠放次序 z-index
8.定位知识拓展
9.案例--淘宝轮播图
22.元素的显示与隐藏
1.display属性（重点！！！！最常用）
2.visibility属性
3.overflow属性
4.案例：
CSS高级技巧：
1.精灵图 sprites
2.字体图标 iconfont
1.字体图标的下载
2.字体图标的引用：
3.CSS三角形
4.CSS用户界面样式
5.vertical-align属性&应用
6.常见布局技巧
属性手册网址：http://css.doyoe.com/
概念：CSS是层叠样式表（Cascading Style Sheets）/CSS样式表/级联样式表
1.语法风格&代码规范：
(1)语法规范：
选择器 {
属性名: 属性值;
属性名: 属性值;
}
(2)注释：
/* ctrl+/ */
(3)代码风格：
i.选择器后面带空格，属性名的冒号后面也带空格，这样比较舒服
ii.每个属性和属性值最好独占一行，属性值结尾别忘了分号;
iii.选择器，属性名，属性值 全部用小写字母，特殊情况除外
(4)注意事项：
px不可省略
<style>
/* 语法规范:
选择器{属性名：属性值; 属性名：属性值;} */
p {
color: blueviolet;
font-size: 20px; /*这里必须加px */
}
</style>2.选择器分类
(1)基础选择器
1)标签选择器
语法：HTML标签名称{…} ， 按照标签名分类。
作用：为某一类标签设置统一的CSS样式。
特点：不能差异化选择
优点：能快速为页面中 同类型的标签 设置统一样式。
缺点：不能设计差异化样式，只能选择全部的同类标签，太局限了。
使用频率：较多
<style>
/* 标签选择器： 标签名 {……} */
p {
color: blueviolet;
font-size: 20px; /*这里必须加px */
}
div {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h2>********************标签选择器************************</h2>
<p>所有p标签内文字，统一改变样式</p>
<p>所有p标签内文字，统一改变样式</p>
<p>所有p标签内文字，统一改变样式</p>
<div>所有div标签统一样式</div>
<div>所有div标签统一样式</div>
<div>所有div标签统一样式</div>
</body>
</html>2）类选择器
语法：类名{ } ，类名不同于标签名
调用：class属性="类名 类名 类名"
一个标签中是可以有多类名的，这些类名之间要用空格隔开。
口诀：样式“点”定义，结构“类class”调用，一个或多个，开发最常用
作用：为一个或者某几个标签(class属性同的)设置样式。
特点：可以根据需求选择
使用频率：非常多
<style>
/* 类选择器： .类名{……} 调用：class属性=“类名”
口诀：样式“点”定义，结构“类class”调用，一个或多个，开发最常用 */
.red {
color: red;
}
.div-red {
background-color: red;
}
.div-green {
background-color: green;
}
.div-size {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h2>********************类选择器************************</h2>
<ul>
<li class="red">风风风</li>
<li>花花花</li>
<li>雪雪雪</li>
</ul>
<h3>案例1:</h3>
<!-- 多个类名之间，空格隔开 -->
<div class="div-red div-size"></div>
<div class="div-green div-size" ></div>
<div class="div-red div-size"></div>
</body>
</html>3）id选择器
语法： #id名{ } ，作为选择器，id名 不同于 标签名
调用：id属性="名"
口诀：样式“#”定义，结构“id”调用，只能调用一次，别人切勿使用
作用：为唯一一个标签设置样式
特点：id属性只能在HTML文档中出现一次
使用情况：一般配合javascript使用（id主要是针对js使用的，js中有个getElementById，在css和html中调用相同的id并不会报错）
/*id选择器： #id名 {……} 调用：属性id=“”
口诀：样式“#”定义，结构“id”调用，只能调用一次，别人切勿使用*/
#name {
color: pink;
}
4）通配符选择器
调用：无需调用
作用：把页面中<html>,<body>和其内的所有标签都改为相同的样式，不需要调用。
特点：选择的太多，有部分不需要
使用情况：特殊情况下使用，属性：margin或padding 用的比较多
* {
margin: 0px;
padding: 0px;
}(2)复合选择器(两个/多个基础选择器，通过不同方式组合而成的)
1）后代选择器 (又称：包含选择器) (重要)
语法：父元素 子元素 {……} （空格隔开）
作用：
可选“父元素里面的所有(某标签)子元素”
子元素：所有在父元素内的标签都算在内
特点：可选 “所有子孙后代”
使用频率：较多
<style>
/* 如果只把ol中的li变成紫色 ，ul中的li不变色*/
ol li {
color: rgb(129, 13, 239);
}
/* 如果有两个ul，想给其中一个里面的a标签变色，怎么搞？很简单，ul加个类名 */
.a-haha li a {
text-decoration: none;
color: yellow;
}
</style>
</head>
<body>
<h2>**********复合选择器--后代选择器****************</h2>
<ul>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><a href="#">嘻嘻</a></li>
</ul>
<ul class="a-haha">
<li>haha</li>
<li>haha</li>
<li><a href="#">haha</a></li>
</ul>
<ol>
<li>pppp</li>
<li>pppp</li>
<li><a href="#">pppp</a></li>
</ol>
</body>2）子选择器
语法： 父元素 > 第一层子元素 {……}
作用：可选“父元素里面的第一层子元素”
使用频率：较少
<style>
/* div中 所有的a标签 均换颜色 */
.son-a a {
color: rgb(175, 63, 11);
}
/* div的只第一层孩子中的a 字体放大 */
.son-a>a {
font-size: 30px;
}
</style>
<body>
<h2>**********复合选择器--子选择器****************</h2>
<div class="son-a">
<a href="#">第一层孩子</a>
<p>
<a href="#">第二层孩子</a>
</p>
</div>
</body>3）并集选择器(重要)
语法：元素1，元素2，元素3 {…} (规范：各元素竖着写）（注：最后一个元素后无逗号)
作用：可以同时选择多组标签，同时为他们定义相同的样式
特点：可以用于集体声明
使用频率：较多
<style>
/* 同时给div,p,span,pig-family一家 添加同样的样式 */
div,
p,
span,
.pig-family {
color: aquamarine;
}
</style>
<body>
<div>第一</div>
<p>第二</p>
<span>第三</span>
<ul class="pig-family">
<li>pig son</li>
<li>pig dad</li>
<li>pig mum</li>
</ul>
</body>（3）伪类选择器
1）链接伪类选择器(重要)
语法：
a:link /*选择所有"未被访问的链接"*/
a:hover /*…"鼠标放上去不点击的链接"*/
a:visited /*鼠标点击后的链接样式*/
a:active /*鼠标点击不抬起时链接样式*/
(按照以上顺序书写，即LVHA的顺序，否则不生效)（实际开发中 a{}，a:hover{} 常用）
作用：为链接添加特殊效果
特点：选择不同状态的链接
使用频率：最常用
注意：
- 实际开发中，需要单独给a指定样式才能生效，如果只是对a的上级body，p，div指定样式，对a没用的。
- 实际开发中，只用link和hover就足够了。
/****按顺序写LVHA！！！！****/
/* 未访问的链接a:link */
a:link {
color: #333;
text-decoration: none;
font-size: 30px;
}
/* 已访问过的链接：a:visited */
a:visited {
color: orange;
}
/* 鼠标经过时，不点击链接：a:hover */
a:hover {
color: skyblue;
}
/* 鼠标点击后，未松开时链接样式：a：active */
a:active {
color: green;
}2）:focus伪类选择器
作用：选取 获得焦点的表单元素
特点：与form表单相关
使用频率：较少
<style>
/* 获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
</style>
<body>
<h2>**********复合选择器--focus伪类选择器****************</h2>
<input type="text">
<input type="text">
<input type="text">
</body>
3.CSS字体属性
（1）font-family：设置文字字体
多种字体时，用逗号隔开；从第一种字体开始检测，没有，再检测下一种字体，以此类推。
如果某字体是由多个单词加空格组成，那么要加单引号。
body{
/*微软雅黑字体*/
font-family: 'microsoft yahei', 'Times New Roman', Times, serif;
}（2）font-size：设置字体大小
记得加px；不同浏览器默认大小不同；如果定义body，注意对标题标签是无效的。
body {
font-size: 30px;
}
h2{
/*body设置的字体大小，对h1～h6无效*/
font-size: 30px;
}(3）font-weight：调整字体粗细
实际开发中更提倡用数字表示加粗或者变细，范围：100~900 整百
属性值：normal=400(默认) / bold=700 / bolder / lighter / 数字(不加px);
.bold {
/*下面两种一样的效果，数字后面不用加px*/
font-weight: 700;
/* 等价于：font-weight: bold; */
}(4）font-style：设置文字样式
属性值：normal--默认值；italic--斜体
p {
font-style: normal; /* 让倾斜的字体不倾斜; */
}(5）字体复合属性
注意：一定要按照font:font-style font-weight font-size/(line-height) font-family;这个顺序，少一个font不起效果，而且font-size和font-family绝对不可以省略，其他的都可以省略；空格隔开。
.font-sum{
/*font-style: normal;
font-weight: 700;
font-size: 30px;
font-family: '宋体';*/
/* 上方“四合一”： */
/* 复合写法：font:font-style font-weight font-size/line-height font-family; */
font: normal 700 20px/24px 'microsoft yahei';
/* 复合写法：font:(省略font-style font-weight) font-size/line-height font-family; */
font: 20px Times;
}4.CSS文本属性
(1）text-align：文本水平对齐方式
| 属性值: | left(默认) | center | right |
应用：行内元素/行内块元素--水平居中方法：给父盒子添加text-align：center；即可
(2）color：文本颜色
| 属性值: | 颜色英文 | #十六进制(最常用) | rgb(255 ,255 ,0 )或rgb(100%,20%,0%) |
(3）text-indent：文本缩进
通常用em作单位，(em是相对单位(变化)，1em=当前一个文字的大小(font-size)，若当前元素没设置大小，则按照父元素一个字大小，如1em=16px)
也可以用px做单位，但是一般来说是2em，首行缩进2个字符。
| 属性值: | 数字em(常用) | 数字px |
(4）text-decoration：文本装饰
| 属性值: | none (默认) 无装饰线(取消下划线) | underline 下划线 | overline 上划线 | line-through 删除线 |
(5）line-height：行间距（行高）
| 属性值: | 数字px | 数字(小数也可) (常用) (如：行高1.5--行高为font-size的1.5倍) |
技巧：行高=盒子的高度（height=line-height），使文字垂直居中显示
行高=font-size+2*间距
- 测量行高的方法：
(工具app：Faststone capture 用它去量)
<style>
.font-text{
/* 字体颜色 */
/* color: pink;
color: #ff0000; */
color: rgb(39, 199, 232);
/* 水平对齐方式 */
text-align: left;
/* 装饰文本---下划线 */
text-decoration: underline;
/* 文本缩进 */
text-indent: 2em;
/* 行高 */
line-height: 25px;
}
.indent1{
/* 文本缩进 */
text-indent: -20px;
}
.indent2{
/* 文本缩进 */
text-indent: 20px;
}
</style>
<body>
<p class="font-text">位置，颜色，装饰文本，缩进，行高</p>
<p class="indent1">文本缩进</p>
<p class="indent2">文本缩进</p>
</body>5.CSS引入方式
(1）内部样式表：
位置：写在head里的<style>标签中，实际上<style>写在哪里都可以，通常写在head里。
作用区域：控制“当前整个html页面”
特点：没有实现 结构与样式完全分离
/* 在css文件中只有样式，没有标签 */
<style>
div{
color: aqua;
}
</style>(2）行内样式表：
位置：写在标签属性里：<p style=“属性名：属性值；属性名：属性值…(css规范)”>少用，定义简单样式
作用区域：控制 “当前标签”
权重高
<p style="color: red; font-size: 25px; font-family: 'microsoft yahei';">行内样式</p>(3）外部样式表:
位置：外部.css文件中，比较重要，常用！
作用区域：控制使用link引入的所有html文件
引入的步骤：
1.新建css文件，把所有的css代码放进去(在css文件中只有样式没有标签)
2.在html文件中使用link来引入：rel意思是引用的是什么，stylesheet意思是引用的是一个表。
<!-- 引入外部样式表---CSS文件 -->
<head>
<link rel="stylesheet" href="css/style.css">
</head>6.Chrome调试工具
打开调试工具：F12 或 右击->检查
7.Emmet语法
这一部分内容实际上就是vscode中的一些快捷键
引号内多行编辑的快捷键：shift + alt+鼠标点选
（1）快速生成html结构
（2）快速生成css样式
.emmet{
text-align: center; /* tac →tab*/
text-indent: 2em; /* ti2em →tab */
width: 30px; /* w30 →tab*/
height: 100px; /* h100 →tab*/
line-height: 26px; /* lh26px →tab*/
}（3）vscode中好用的功能：
保存时自动改为标准格式，设置→搜索format→找到format on save勾选
8.CSS元素显示模式
1.块元素：
常见块元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，<div>最典型的块元素
块元素的特点：
1.比较霸道，自己独占一行
2.高度，宽度，外边距，内边距 都可以控制
3.默认宽度是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放 “行内元素 或 块元素”
注意："文字类元素"内不能放"块级元素"，如<p>，<h1>标签 里面都不能放块元素<div>
2.行内元素（内联元素）：
常见的行内元素：<a>,<del>,<s>,<ins>,<u>，<span>等，<span>最典型的行内元素
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.高，宽 直接设置是无效的 (可放入块中)
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意： <a>里不能再放<a>
特殊情况下，<a>里可以放块级元素，例如:
这一大块都是链接，在这一大块里再放商品图片，介绍，价格等，这种情况下“把a转换成块级元素”比较好
3.行内块元素：
同时具有块元素和行内元素的特点：<img/>,<input/>,<td>
特点：
1.和相邻行内元素(行内块元素)在一行上，但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点)
2.默认宽度就是本身内容宽度（行内元素特点）
3.宽度，高度，行高，外边距，内边距都是可以控制的（块元素特点）
4.元素显示模式转换：
- 在css中使用：display: block; ----行内元素 改为 块元素。
- 在css中使用：display: inline; ----块元素 改为 行内元素。
- 在css中使用：display: inline-block;- ---行内元素 改为 行内块元素。
把行内元素a转换为块级元素（为了增加a标签链接的点击范围），拥有块级元素的特点，如：独占一行，而且修改它的宽度和高度是有效的。
<style>
/* a,img转化为 块元素 */
.block {
font-size: 30px;
width: 200px;
height: 100px;
background-color: blueviolet;
color: yellow;
display: block;
padding: 1%;
}
/* p转化为行内元素 */
.p-inline {
background-color: #333;
display: inline;
}
/* div-块元素 */
.div-block {
width: 300px;
height: 300px;
background-color: #666;
}
/* input-行内块元素 */
.input-inline-block {
width: 200px;
height: 40px;
background: pink;
}
</style>
<body>
<h2>******************行内元素/块元素/行内块元素*********************</h2>
<a href="#" class="block">行内元素</a>
<br>
<img src="images/baidu.png" alt="wrong" class="block">img行内元素->block
<p class="p-inline">块元素->inline</p>
<div class="div-block">块元素</div>
<input type="text" class="input-inline-block">行内块元素
<input type="text" class="input-inline-block">行内块元素
</body>运行结果：
9.文字垂直方向居中显示
- 技巧：行高=盒子的高度（height=line-height），使文字垂直居中显示
- line-height>height，文字垂直偏下
- line-height<height，文字垂直偏上
p {
width: 230px;
/* 技巧：行高=盒子的高度，使文字垂直居中显示*/
/*height=line-height */
height: 40px;
font: 14px/40px 'microsoft yahei';
background-color: rgb(85, 88, 89);
}
a:hover {
background-color: orange;
}10.CSS的背景属性
（1）background-color 背景颜色：
| 属性值 | transparent 透明(默认) | color 颜色 | rgba(r,g,b,a); 背景色半透明 （CSS3新增属性，IE9+浏览器才支持） |
注：rgba(r,g,b,a)：里面的四个参数中，a是alpha透明度，是控制透明程度的，取值在0~1之间（0:100%透明，1:不透明），如0.3的0可以省略，写.3也是可以的
（2）background-image 背景图片：
开发中常见于：logo，装饰性图片，超大背景图片，精灵图
优点：便于控制位置
| 属性值 | none (默认) | url ( url地址 ) |
（3）background-repeat 背景平铺：
| 属性值 | repeat 平铺 (默认) | no-repeat 不平铺 | repeat-x 水平方向平铺 | repeat-y 垂直方向平铺 |
（4）background-position： x y； 背景图片的位置：
| 属性值：方位词 (x,y顺序无关) | 属性值：精确单位（x，y顺序固定，先x后y） | |
| x坐标 | left / center / right | % / 由浮点数字和单位标识符组成的长度值 |
| y坐标 | top / center / bottom | % / 由浮点数字和单位标识符组成的长度值 |
注意事项：
1.如果x，y都是方位名词，则两个值前后顺序无影响，如: right center 和 center right一样
2.如果x，y都是方位名词，只写其中一个，则另一个默认是center
3.如果x，y都是精确单位，则第一个一定x，第二个一定是y
4.如果x，y都是精确单位，只写其中一个(这个一定是x)，y默认center
5.如果x，y都是混合两种情况，只写其中一个(这个一定是x)，y默认center
（5）background-attachment 背景图像是否固定（网页滚动时，图片是否随之滚动）：
后期可以制作视差滚动的效果
| 属性值 | scroll 滚动（默认） | fixed 固定 |
（6）background: 背景样式的 复合性写法：
惯用顺序：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
提示：背景图片 在 背景颜色 上方显示
/* 背景颜色/图片，背景图片在背景颜色上方显示 */
.div-bgcolor {
width: 200px;
height: 200px;
background-color: red;
background-image: url(images/baidu.png);
/*不平铺*/
background-repeat: no-repeat;
/*水平方向平铺*/
background-repeat: repeat-x;
/*垂直方向平铺*/
background-repeat: repeat-y;
/*背景图片的位置-水平居中垂直top*/
background-position: center top;
/*与上一行效果一样！！！*/
background-position: top center;
/*背景图片的位置-水平靠左垂直居中---x轴left，y轴默认center*/
background-position: left;
/* xy为精确单位 */
background-position: 20px 50px;
background-position: 20px ; /*同：20px center*/
/*混xy为合单位*/ /*上下二者--效果相同！！*/
background-position: 20px center;
background-position: 20px top;
}
body {
/* 惯用顺序：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; */
background: purple url(images/temperature.png) no-repeat fixed center top;
}
.half {
/*半透明*/
background: rgba(0, 0, 0, .3);
}技巧：
- 小的装饰性图片：不用img标签，用背景图片-不平铺-定位置
- 超大图片插入：不用img标签，用背景图片-不平铺-定位置crnter top；
（7）背景属性总结：
11.CSS三大特性
1.层叠性
“后设置的样式”会覆盖“前设置的样式”
- 样式冲突时，层叠覆盖
- 样式不冲突，不层叠
div {
color: black;
font-size: 15px;
}
div {
/* 颜色黑会被红色覆盖掉，但是字体大小却不会有变化 */
color: red;
}2.继承性
“子标签”继承“父标签”的某些样式（主要是text-、font-、line-等开头的，以及color属性）
<style>
/* 继承性 */
/*如下面这样设置的话，p标签中的文字也会变成黑色20px，继承了div中的属性 */
div {
color: rgb(228, 61, 61);
font: 20px/1.5 'microsoft yahei';
}
</style>
</head>
<div>
<p>并不是所有的属性都继承，只继承文字相关的属性</p>
</div>3.优先级
3.1.当一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
3.2.子元素继承的权重是0，如果该元素没有直接选中，那么不管父元素权重有多高，子元素得到的权重都是0。
3.3.<a>默认指定了样式(蓝色，有下划线)（即：a{color: blue}，优先级大于0)，所以不继承父标签的样式
3.4.优先级中权重的叠加问题：
复合选择器会有权重叠加的问题，元素会选择权重高的去使用。
权重会叠加，不会进位，如：（0，0，0，11）
权重：元素选择器<类选择器<id选择器<标签内style样式<!important
<style>
/* 优先级 :元素选择器<类选择器<id选择器<标签内style样式< !important */
/* 优先级： div < .test < #test < style="color: ;" < color: red!important */
div {
color: red!important;
}
.test {
color: yellow;
}
#test {
color: blue;
}
/*继承的权重是0 */
/*所以，以后看标签到底执行哪个样式，就先看这个标签有没有直接被选出来 */
.power {
color: pink;
}
p {
color: orange;
}
/* 复合选择器 有 权重叠加 的问题 */
/* li权重：0，0，0，1 1*/
li {
color: red;
}
/* *************权重会叠加，不会进位：0，0，0，11. ************** */
/* ul+li的权重：0，0，0，1 + 0，0，0，1=0，0，0，2 2*/
ul li {
color: blue;
}
/* .wanan+li的权重：0，0，1，0 + 0，0，0，1=0，0，1，1 11*/
.wanan li {
color: yellow;
}
/* .first 权重 10<11 ，无法更改上方11的颜色*/
.first {
color: aqua;
}
/* .wanan .first权重20>11，可以更改颜色 */
.wanan .first {
color: aqua;
}
</style>
<body>
<div class="test" id="test" style="color: purple">倔强</div>
<span class="power">
<p>继承power的权重是0 < p{} 的权重</p>
</span>
<ul class="wanan">
<li class="first">几人份的畅谈</li>
<li>道三两句晚安</li>
<li>惹多情的遐想</li>
<li>却轻易地走散</li>
</ul>
</body>12.CSS盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素
主要包括：border边框、外边距margin、内边距padding，内容content
(1)边框(border)
边框会影响盒子的实际大小，解决方案:（1.测量时不测边框；2.测量边框，width/height减去边框宽度）
| 属性 | 属性值 |
| border-width 边框的宽度(粗细) | px |
| border-style 边框的样式 | none 无｜solid 实线｜dashed 虚线｜dotted 点线｜ hidden｜double｜groove｜ridge｜inset｜outset |
| border-color 边框的颜色 | color｜rgb｜#十六进制 |
- 边框属性的复合写法：
| 属性 | border：1px solid red； (没有顺序) | border-top | border-bottom | border-left | border-right |
❗️注意:「 层叠性 」：border 和 四边分别设置 的前后顺序，后者会覆盖前者
- 合并相邻边框 的属性：
border-collapse： collapse；
/* CSS盒子模型---边框-宽度｜样式｜颜色*/
.box {
border-width: 3px;
border-style: dashed;
border-color: rgb(172, 232, 181);
/* 三合一--复合写法 */
border: 3px dashed greenyellow;
/* 边框的四边---可以分别设置 */
/* 边框(四边可分别设置) */
border-bottom: 3px dashed rgb(157, 247, 23);
border-top: 3px solid rgb(7, 142, 27);
border-left: 3px dotted rgb(67, 184, 67);
border-right: 3px dashed rgb(4, 103, 4);
}（2）内边距(padding)
padding会影响盒子的实际大小，调整width/height减去padding
- padding不会撑开盒子的大小：盒子本身 没有指定 width/height属性；
- padding不会撑开盒子的大小：如果父元素指定了width，那么在子元素中没有指定width，给子元素添加padding不会撑开盒子。
- padding会撑开盒子的大小：盒子本身 指定了 width/height属性
技巧：padding会撑开盒子，在字数不一的导航栏，不设置width，而设置padding，使得间距一致
| 属性 | padding (复合写法) | padding-left | padding-right | padding-top | padding-bottom |
（3）外边距(margin）
复合写法中，值的个数-表达意思 同padding上表。
| 属性 | margin (复合写法) | margin-left | margin-right | margin-top | margin-bottom |
1）外边距典型应用：
- 块盒子水平居中，必须满足两个条件：
1.盒子必须指定宽度width
2.左右外边距设为auto，即：margin：0 auto；（上下0，左右居中）
- 行内元素 / 行内块元素水平居中：
给其父元素添加属性 text-align：center；
2）外边距的合并：
注：浮动的盒子--不会有外边距合并的问题
- 上下相邻块元素，垂直外边距的合并
上边有:margin-bottom
下边有:margin-top
则：垂直距离为：不是二者之和，而是：取两个值中较大者
解决方案：只给一个盒子设置margin值
3）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大（父元素和子元素的margin-top比较）的外边距值
解决方案：
1.为父元素定义上边框 border-top: 1px solid transparent;
2.为父元素定义上内边距 padding-top:1px;
3.为父元素添加 overflow：hidden；
(其他方法:浮动/固定/绝对定位的盒子不会有塌陷问题，这三个方法都是脱标的，也就是说脱标的元素是不会出现外边距合并和塌陷的问题的。)
13.清除内外边距
网页元素自带边距-F12查看，不同浏览器默认值不同；所以布局前清除网页元素默认的内外边距
* {
margin: 0;
padding: 0;
}注： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(很多时候不起效果)。
块元素和行内块元素，可以设置上下左右的内外边距。
14.PS
1.测量网页元素大小
2.PS切图：
1.选图层(多图层组合时可以合并)-右击-导出png
2.cutterman---ps插件
3.像素大师 pc软件--放入图片，鼠标悬浮上方，自动显示大小
15.案例总结：
（1）小米商品模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redmi shop</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #f5f5f5;
}
.box {
width: 420px;
height: 600px;
border: 1px solid rgb(198, 193, 193);
margin: 0 auto;
}
a {
color: black;
text-decoration: none;
}
img {
/* 图片宽度和父亲一样宽 */
width: 100%;
}
.box>p {
height: 140px;
font: 23px 'microsoft yahei';
/* 因为没有width属性，所以padding不会撑开盒子的宽度 */
padding: 0 20px;
margin-top: 20px;
}
.appraise {
width: 400px;
padding-left: 20px;
margin-top: 10px;
font: 14px 'microsoft yahei';
color: #b0b0b0;
}
.info {
margin-top: 20px;
padding: 0 20px;
background-color: pink;
}
.info h4 {
/* width: 260px; */
/* 块元素->转化为行内块元素后，可以实现同一行显示，！！！但是他们之间会有大的空白缝隙！！！很难控制！！！ */
display: inline-block;
font: 18px 'microsofe yahei';
font-weight: 400;
}
.info p {
/* width: 30px; */
display: inline-block;
color: rgb(174, 171, 171);
margin: 0 25px 0 35px;
/* background-color: green; */
}
.info span {
/* width: 50px; */
display: inline-block;
color: orange;
/* background-color: purple; */
}
</style>
</head>
<body>
<div class="box">
<img src="../images/produce.png" alt="无线蓝牙耳机img" />
<p><a href="#">快递牛，整体不错蓝牙可以秒连，红米给力</a></p>
<div class="appraise">来自于117384232的评价</div>
<div class="info">
<!-- 商品名称 属于标题，恰当地使用标签！！！！ -->
<h4><a href="#">Redmmi AirDots真无线蓝…</a></h4>
<p>｜</p>
<span>99.9元</span>
</div>
</div>
</body>
</html>
❗️注：块元素->转化为行内块元素后，可以实现同一行显示，！！！但是他们之间会有大的空白缝隙！！！很难控制！！！
（2）快报模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快报模块</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 248px;
height: 163px;
border: 1px solid grey;
color: #797676;
font-family: 'microsoft yahei';
margin: 0 auto;
}
.title {
height: 32px;
font-size: 14px;
line-height: 32px;
/* 字体粗细，值-无单位 */
font-weight: 400;
border-bottom: 1px dotted grey;
padding: 0 15px;
}
li {
list-style: none;
}
.box ul {
margin-top: 7px;
}
.box ul li {
/*垂直居中 */
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul li a {
font-size: 12px;
text-decoration: none;
color: #666;
}
.box ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h3 class="title">优品购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】爆款耳机5折秒！母亲节</a></li>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】爆款耳机5折秒！立省1000</a></li>
</ul>
</div>
</body>
</html>16.圆角边框（重点）
在CSS3中新增了圆角边框的样式，这样盒子就可以变成圆角。
属性语法：border-radius：数字px｜数字% ---(圆角半径)； (%：半径是盒子宽度和高度的占比)
border-radius: 100px;
/*效果同上100px ，宽高200px*/
border-radius: 50%;
/*四个值：四个角的弧度分别设置*/
border-radius: 10px 45px 30px 15px;
/*两个值：左斜对角，右斜对角*/
border-radius: 40px 10px;
/*四个角分开设置*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;17.盒子阴影（重点）
盒子阴影部分不占空间
属性语法：box-shadow: h-shadow v-shadow blur spread color inset;
前两个,第四个-均可负值
前两个必写，其他可省略
模糊距离：影子的实虚，边界是否清晰
阴影尺寸：影子的大小
颜色常用：rgba(0,0,0,.3);
默认outset，（❗️但不可写明写outset，这样影子效果消失）
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);- 鼠标经过时，盒子出现阴影效果：
div:hover{
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}18.文字阴影
属性语法：text-shadow：h-shadow v-shadow blur color；
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);19.CSS浮动-float
传统网页的布局：标准流、浮动、定位。通常一个网页是由这三种布局共同构成的
浮动-最典型应用：多个块元素一行排列显示
❗️why need float：块元素->转化为行内块元素后，可以实现同一行显示，！！！但是他们之间会有大的空白缝隙！！！很难控制！！！
- 网页布局第一准则：
多个块元素纵向排列---标准流，横向排列---浮动。
先用标准流的父元素排列上下位置，然后内部子元素使用浮动来排列左右（开发中采用策略--浮动子集与标准流父级 搭配使用）
- 网页布局第二准则：
先设置盒子大小，再设置盒子位置。
1.float 属性：
作用：创建浮动框，将其移动到一边，直到左/右边缘/包含块/另一个浮动框边缘
属性值：float：none 不浮动(默认)｜left 元素向左浮动｜right 元素向右浮动
2.浮动特性(重难点！)
(1）浮动元素会脱离标准流（脱标）
1.浮动元素会脱离标准流的控制（浮），移动到指定位置（动）---（俗称：脱标）
2.脱标的盒子不再保留原来的位置。
(2）浮动元素会一行内显示且沿着元素顶端对齐
注：
1.浮动的元素是相互贴在一起的没有缝隙
2.如果父级宽度装不下这些盒子，那么多出的盒子会另起一行对齐。
(3）浮动的元素--都具有行内块元素的特性
任何元素(行内元素/块级元素)都可以添加浮动，添加浮动后，都具有行内块元素的特性。
所以：
1.如果给行内元素加了浮动，不需要再转换为块级/行内元素，就可以直接给宽度和高度；
2.如果块级元素没有设置宽度，默认和父级一样宽，但是设置了浮动之后，宽度大小根据内容来决定(行内快元素的特点)
(4）浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
例：son1不浮动，son2浮动，son3部浮动，结果：
上图：son1与son2紧贴，son3位于son2下方，son2-float，son3占据son2原来位置
(5）一浮全浮: 有一个孩子浮动了，其余的兄弟元素都要浮动才行，要不然没用。
3.清除浮动
为什么要清除浮动？因为父级盒子在很多情况下不方便给高度（如产品很多，要不断往里加，或者左右栏内容不一样多），但是子盒子浮动又不占有位置，最后父级盒子高度变成0，会影响后面的布局。
- 清除浮动的本质：
清除浮动元素造成的影响。
如果父盒子本身有高度，那么不需要清除浮动
清除浮动之后，父级盒子会根据浮动的子盒子自动检测高度，父级有了高度就不会影响后面的标准流了。
- 清除浮动的属性： clear：left｜right｜both (开发中只用both)
- 清除浮动的策略：闭合浮动（浮动只在父盒子内部影响，不影响外部其他盒子）
清除浮动方法：
(1）额外标签法（隔墙法）
- 在浮动的元素后面添加一个新的标签（必须是块级元素），然后新的标签使用clear:both设置浮动
/* 父盒子未设置高度，子盒子浮动后，不占父盒子空间，父元素height=0 */
.q-box {
border: 1px solid red;
}
.q-damao,
.q-ermao {
float: left;
width: 200px;
height: 200px;
margin-left: 100px;
background-color: orange;
}
/* 清除浮动---并且子元素多高，父元素就多高*/
.clear {
clear: both;
}
.q-footer {
height: 100px;
background-color: green;
}
<div class="q-box">
<div class="q-damao">大猫</div>
<div class="q-ermao">二毛</div>
<div class="clear"></div>
</div>
<div class="q-footer"></div>(2）父级元素添加 overflow属性（重点）
- 给父级添加属性：overflow：hidden （最常用）｜auto｜scroll；
优点：代码简洁；缺点：是无法显示溢出的部分，溢出的部分直接就被切掉看不见了。
.box {
/* 清除浮动 */
overflow: hidden;
}(3）父级元素添加 after伪元素（重点）（百度，网易，淘宝用此法）
额外标签法的升级版(利用CSS添加一个新盒子)，相当于往后面加了个块堵住，添加下面css代码：
/* 清除浮动--css在大盒子 最后方 生成一个空盒子*/
单 :after 为了兼容低版本浏览器；意思同---双::after
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6,7专有 */
*zoom: 1;
}
<!--父元素调用一下clearfix类-->
<div class="q-box clearfix">(4）父级元素添加 双伪元素（重点）（小米，腾讯 用此法）
在after的基础上再加一个，也就是头上和尾巴都堵住，添加下面的css代码：
/* 清除浮动--css在大盒子的 最前方，最后方 生成一个空盒子*/
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
<!--父元素调用一下clearfix类-->
<div class="q-box clearfix">20.学习开发流程&遵循规则/思路/注意事项
工具：ps-vscode-chrome
·CSS 属性书写顺序（重点）建议遵循以下顺序：
1.布局定位属性：display / position/ float / clear / visibility / overflow（建议 display第一个写，毕竟关系到模式）
2.自身属性：width / height / margin/ padding / border/ background
3. 文本属性：color/ font / text-decoration / text-align/ vertical-align / white- space / break-word
4. 其他属性(CSS3) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...
·页面布局整体思路
（为了提高网页制作的效率，布局时通常有以下的整体思路）
1.必须确定页面的版心（可视区），我们测量可得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。（页面布局第一准则）
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。（页面布局第二准则）
4 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
5. 所以，先理清楚布局结构，再写代码尤为重要。这需要我们多写多积累
·注意：
1.导航栏---实际开发中 ，我们不会直接用链接a，而是用li包含链接(li+a)的做法。
原因：1.lit+a 语义更清晰，一看这就是有条理的列表型内容。 2.如果直接用a，搜索引擎容易辨别为有堆砌关键字媒疑（故意堆砌关键字容易被搜索，引擎有降权的风险），从而影响网站排名。
2.让导航栏一行显示,给li加浮动，因为li是块级元素,需要一行显示。
3.技巧：nav导航栏可以不给宽度,将来可以继续添加其余文字。
4.技巧：因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度。
5.按钮button默认有边框。需要我们手动去掉。
21.CSS定位
1.相关知识：
为什么需要定位？浮动和标准流都无法实现的效果，需要定位来是实现。
定位：是让盒子自由的在某个盒子内移动位置，或者固定在屏幕中的某个位置，并且可以压住其他盒子。
定位=定位模式+边偏移
1.1.定位模式：
决定元素的定位方式
属性：position
属性值：static 静态定位｜relative 相对定位｜absolute绝对定位｜fixed 固定定位
1.2.边偏移：
定位的盒子移动的最终位置
四个属性：top｜bottom｜left｜right
2.定位
1.静态定位static（了解，很少用）
特点：
元素的默认定位，无定位的意思
按标准流特性摆放位置，没有边偏移
语法： 选择器{ position：static；}
2.相对定位relative（重要）
特点：
相对于-它原来的位置而言的
标准流中继续占有原来位置（不脱标）
语法： 选择器{ position：relative；}
/* 相对定位--以自身为参照 */
position: relative;
top: 100px;
left: 100px;3.绝对定位absolute（重要）
特点：
相对于-祖先级元素而言的
随滚动条滚动
祖先级元素-没有定位！！！，相对于浏览器文档定位
祖先级元素-有定位！！！（绝对，相对，固定定位），son相对于-最近一级有定位的祖父级元素为参考
标准流中不再占有原来的位置（脱标）
语法： 选择器{ position：absolute；}
- “子绝父相”
(如果子集用绝对定位的话，父级要用相对定位)
子绝父相也不是绝对的，如果遇到父元素不需要占有位置，子绝父绝也是存在的。
1.子集绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2.父盒子需要加定位，限制子盒子在父盒子里的显示
3.父盒子布局时，需要占有位置，要不然页面结构就乱了，所以父亲只能是相对定位
总的来说，父级需要占有位置，用相对定位，子盒子不需要占有位置，用绝对定位。
<style>
/* 父亲未定位，son以浏览器为参照 */
.father1 {
width: 200px;
height: 200px;
background-color: lightskyblue;
}
.son1 {
width: 150px;
height: 150px;
background-color: lightcoral;
position: absolute;
/* 浏览器左上角 */
/* top: 0;
left: 0; */
/* 浏览器左下角 */
/* bottom: 0;
left: 0; */
/* 浏览器右上角 */
top: 0;
right: 0;
/* 浏览器右下角 */
/* bottom: 0;
right: 0; */
}
/* 父亲定位了，son以父级元素为参照 */
.father2 {
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
left: 300px;
}
.son2 {
width: 150px;
height: 150px;
background-color: lightcoral;
position: absolute;
top: 40px;
right: 20px;
}
/* 爷爷定位了，父亲未定位，son以爷爷为参照 */
.grandfather3 {
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
left: 50px;
}
.father3 {
width: 150px;
height: 150px;
background-color: rgb(63, 164, 227);
}
.son3 {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
bottom: 0px;
right: 0px;
}
.grandfather4 {
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
left: 500px;
}
/* 绝对定位--不占据原来位置，被下一个占有 */
.grandfather4 .brother1 {
width: 60px;
height: 70px;
background-color: lightcoral;
position: absolute;
left: 5px;
top: 80px;
}
.grandfather4 .brother2 {
width: 200px;
height: 200px;
background-color: rgb(207, 160, 160);
}
</style>
</head>
<body>
<h3>***************相对定位***************</h3>
<div class="box1">borther1</div>
<div class="box2">brother2</div>
<h3>***************绝对定位***************</h3>
<div class="father1">father1未定位
<div class="son1">son1</div>
</div>
<div class="father2">father2已定位
<div class="son2">son2</div>
</div>
<div class="grandfather3">grandfather3已定位
<div class="father3">father3未定位
<div class="son3">son3</div>
</div>
</div>
<div class="grandfather4">grandfather4已定位
<div class="brother1">brother1绝对定位</div>
<div class="brother2">brother2占据brother1的位置</div>
</div>
</body>
4.固定定位 fixed（重要）（特殊的绝对定位）
固定于浏览器可视区的位置。
特点：
以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动
不占有原先位置（脱标）
主要使用场景：
浏览器页面滚动时，元素位置固定不变。
语法： 选择器{ position：fixed；}
- 固定在版心右侧位置：
1.先让固定定位的盒子 left：50%，走到整个页面的一半位置
2.再让该盒子 margin-left：正的(版心宽度的一半)
- 固定到版心左侧位置：
1.left：50%； 移动到浏览器的一半（中轴线）
2.margin-left：负的（版心宽度的一半+广告盒子自身的宽度） (左移--负数)
/* 网页两侧广告 */
/* 版心左侧广告位置 */
.ad1 {
width: 200px;
height: 500px;
position: fixed;
top: 300px;
/* 固定到---版心左侧--方法：
1.left：50%； 移动到浏览器的一半（中轴线）
2.margin-left：（版心宽度的一半+广告盒子自身的宽度） */
left: 50%;
margin-left: -830px;
}
.ad1 img {
width: 100%;
height: 500px;
}
/* 版心右侧广告位置 */
.ad2 {
width: 200px;
height: 500px;
/* 固定定位 */
position: fixed;
top: 300px;
/* 固定到---版心右侧--方法：
1.left：50%； 移动到浏览器的一半（中轴线）
2.margin-left：（版心宽度的一半） */
left: 50%;
margin-left: 630px;
}
.ad2 img {
width: 100%;
height: 500px;
}效果如下：（两侧的广告）
5.粘性定位sticky（了解，不常用，IE浏览器不支持）（网上大多是通过javascript实现的效果）
相对定位 和 固定定位 的混合
语法： 选择器{ position：sticky；top：10px；}
特点：
以浏览器的可视窗口为参照点移动元素。（固定定位的特点）
占有原来位置。（相对定位的特点）
必须添加top，left，right，bottom其中一个才有效
.stick {
width: 50px;
height: 300px;
background-color: pink;
/* 粘性定位： */
position: sticky;
/* 此盒子移动到距离浏览器上边缘100px时，不再随浏览器滑动 */
top: 100px;
}6.定位的总结：
- 注：既有left，又有right时，优先执行left
- 注：既有top，又有bottom时，优先执行top
7.定位叠放次序 z-index
使用定位布局时，用于控制盒子重叠的先后顺序（谁在上，谁在下）
语法：选择器{ z-index：1；}
属性值：auto 默认｜0｜正整数｜负整数 (负<auto=0<正)
- 规则：
1.数值越大，盒子越靠上
2.数值相同，按书写顺序，右者在前者上方
3.数值无单位！！！
4.只有定位的盒子，才有此属性
/* 定位的重叠现象 z-index -1 < auto = 0 */
.box-x {
position: absolute;
left: 0px;
}
.box-one {
width: 500px;
height: 500px;
background-color: pink;
z-index: -1;
}
.box-two {
width: 400px;
height: 400px;
background-color: rgb(162, 51, 70);
z-index: auto;
}
.box-three {
width: 450px;
height: 300px;
background-color: rgb(192, 13, 43);
z-index: 0;
}8.定位知识拓展
1.绝对定位盒子--居中效果的实现
由于：加了“绝对定位”的盒子，给属性margin：0 auto；---不会实现水平居中
- “绝对定位的盒子”实现水平居中的算法：
1.left=父容器宽度的50%；
2.margin-left：负的自身盒子宽的一半
- “绝对定位的盒子”实现垂直居中的算法：
1.top=父容器高度的50%；
2.margin-top：负的自身盒子高的一半
.r-middle {
/* “绝对定位的盒子”实现水平居中的算法：
1.left=父容器宽度的50%；2.margin-left：负的自身盒子宽的一半 */
position: absolute;
left: 50%;
margin-left: -50px;
}
.c-middle {
/* “绝对定位的盒子”实现垂直居中的算法：
1.top=父容器高度的50%；2.margin-top：负的自身盒子高的一半 */
position: absolute;
top: 50%;
margin-top: -50px;
}2.定位特殊特性：
- “绝对定位”，“固定定位” 与浮动，类似特性：
1)行内元素添加-“绝对定位”“固定定位”(相对定位不行)，可以直接设置宽度和高度(不需display：block)
/* 绝对定位 */
position: absolute;
/* 相对定位 */
position:fixed;
top: 0;
width: 100px;
height: 100px;
background-color: #622b2b;2).块级元素添加-“绝对”或“固定定位”，如果不给宽高，默认大小是内容大小（width和文字一样宽）。（不定位的div不设宽度，默认100%)
3.脱标(标准流中不占位置)的盒子-不会触发“外边距塌陷”
4.“绝对定位”“固定定位”----会完全压住盒子
为啥浮动压不住文字呢？因为浮动的发明最开始是做文字环绕效果的。（如：word中，文字中插入图片，文字环绕在四周，不遮挡文字）
- 浮动----只会挡住它下面标准流的盒子，但不会挡住标准流盒子里面的文字或者图片
- 绝对定位（固定定位）----会压住下面标准流的所有内容（图+文字）
9.案例--淘宝轮播图
轮播图中小圆点-- ul > li（背景图，圆角边框）
/* 案例-轮播图*/
.tb-promo {
/* 子绝父相 */
position: relative;
left: 10px;
width: 840px;
height: 628px;
background-color: pink;
}
/* 轮播图片 */
.tb-promo img {
width: 100%;
}
/* 轮播图-左右箭头 */
.tb-promo .prev,
.tb-promo .next {
position: absolute;
/* 垂直居中 */
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
background-color: rgba(0, 0, 0, .3);
font-size: 30px;
line-height: 50px;
text-align: center;
text-decoration: none;
color: #fff;
}
.tb-promo .prev {
left: 0px;
border-radius: 0 20px 20px 0;
}
.tb-promo .next {
right: 0px;
border-radius: 20px 0 0 20px;
}
/*****！！！！！！！！轮播图小圆点！！！！！！！******/
.point ul {
position: absolute;
bottom: 20px;
/* 水平居中 */
left: 50%;
margin-left: -50px;
width: 90px;
height: 20px;
background-color: rgba(255, 255, 255, .3);
border-radius: 20px;
}
.point ul li {
float: left;
margin: 4px;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
list-style: none;
}
.point ul .selected {
background-color: #ff5000;
}
<h3>***************定位--案例--淘宝轮播图***************</h3>
<div class="tb-promo">
<img src="images/produce.png" alt="">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<div class="point">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>22.元素的显示与隐藏
类似网站广告，点击叉号就不见了，但是刷新页面又会重新出现。
本质：让一个元素在页面隐藏或显示。
1.display属性（重点！！！！最常用）
用来设置一个元素如何显示，后面应用非常广泛，搭配JS可以做很多网页特效。
属性：
display: none; （隐藏对象）(用得最多)
display：block；（显示对象）（作用：“转换成块级元素”，“显示对象”）。
注意：display隐藏元素后，不再占有原来的位置。
2.visibility属性
visibility: visible; (元素可见)（常用）
visibility: hidden; (元素隐藏)（常用）
visibility: inherit; (继承父对象的可见性)
visibility: collapse; (隐藏表格的行/列，很少使用)
注意，visibility隐藏元素后，会占有原来的位置。
3.overflow属性
指定了：一个元素的框中内容（超出其指定宽度及高度），会发生溢出，溢出内容是否显示。
overflow: visible；（默认）不剪切，也不加滚动条，内容超出盒子显示。
overflow: hidden；超出部分直接隐藏，也没有滚动条。
overflow: auto；（根据文字长度而定）超出-自动添加滚动条；未超出-不添加滚动条。
overflow: scroll；总显示滚动条，不管内容是否超出。
注：如果有定位的盒子，慎用overflow: hidden；
（因为可能定位的盒子会有一小部分在父盒子外边，那这样就会直接把多余的切掉了，这可不行。比如学成在线那个hot小标签）
4.案例：
/* 案例-显示/隐藏 */
.pic {
/* 子绝父相 */
position: relative;
left: 10px;
width: 840px;
height: 628px;
background-color: pink;
}
/* 轮播图片 */
.pic img {
width: 100%;
}
.hid {
position: absolute;
top: 0;
left: 0;
/* 隐藏 */
display: none;
width: 840px;
height: 628px;
背景图颜色+图片(不重复+定位）
background: rgba(0, 0, 0, .3) url(images/radio.png) no-repeat center;
}
/* 当鼠标经过图片，内部遮罩层显示出来 */
.pic:hover .hid{
/* 显示 */
display: block;
}
<div class="pic">
<img src="images/produce.png" alt="">
<div class="hid"></div>
</div>效果图：
CSS高级技巧：
1.精灵图 sprites
目的：为了有效的减少服务器接受合发送请求的次数，提高页面的加载速度
使用精灵图核心：主要针对：背景图片 (把多个小的背景图片整合到一张大图片上)(大图片称为 sprites 精灵图 或者 雪碧图)
移动背景图片的位置-属性：background-position: -182px -10px;
简写： background: url() no-repeat -182px 0px;
注意：
移动的距离就是这个目标图片的x和 y坐标。
注意网页中的坐标有所不同：x轴右边是正值，左边是负值，y轴下边是正值，上边是负值。因为网页中，一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量 ，每个小背景图片的大小和位置。
.bg2 {
width: 26px;
height: 25px;
margin: 50px;
background: url(images/bg-sum.png) no-repeat -156px -106px;
/* 或者可以分开写
background: url(./images/spirit.png);
background-position: -156px -106px; */
}
- 精灵图也是有很多缺点的，比如：
1.图片文件比较大
2.图片本身放大缩小会失真
3.图片制作完毕后，想要更换，会非常麻烦（因此出现字体图标）
2.字体图标 iconfont
展示效果：图标；
本质：字体（具有字体的属性）
字体图标的优点：
1.字体图标的下载
阿里iconfont字库： http://www.iconfont.cn/，推荐指数：★★★★★
2.字体图标的引用：
(1)unicode引用方式
(2)✅font-class引用方式
<!-- 插入图标 链接-->
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3982245_uuj9arcfwa.css">
.icon-star {
font-size: 100px;
color: rgb(254, 219, 63);
} <!-- 引入图标 -->
<span class="iconfont icon-star"></span>（3）（symbol引用方式
…………移动端等引用方式，见iconfont官网
3.CSS三角形
网页中常见的三角形，使用CSS直接画出来，不必做成图片/字体图标
效果图如上，对应代码如下：
/* CSS直接画三角 */
.sanjiao {
/* 不给宽度，高度，给边框(四边颜色不同 */
width: 0;
height: 0;
border-top: 1px solid pink;
border-right: 1px solid rgb(21, 213, 174);
border-bottom: 1px solid rgb(127, 74, 220);
border-left: 1px solid rgb(244, 11, 93);
}<div class="sanjiao"></div>
效果图如上，对应代码如下：(1.宽高为0；2.border四边复合设置粗细，透明；3.根据需求单独设一条边为有色)(三步)
border的粗细，决定三角的大小
/* CSS直接画三角 */
.sanjiao {
width: 0;
height: 0;
/*为了照顾兼容性：兼容低级浏览器，还需写： */
line-height: 0 ;
font-size: 0;
/* 下三角▼ --- 边框(四边颜色不同，三个透明)，出现三角形 */
/*border-top: 1px solid pink;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;*/
/* 效果同上 */
/* border的粗细，决定三角的大小 */
border: 50px solid transparent;
border-top-color: pink;
}
效果图如上，对应代码如下：
.jd {
position: relative;
width: 100px;
height: 100px;
background-color: orange;
}
.jd span {
position: absolute;
top: -20px;
right: 15px;
width: 0;
height: 0;
line-height: 0px;
font-size: 0px;
border: 10px solid transparent;
border-bottom-color: pink;
}4.CSS用户界面样式
1.鼠标样式 cursor
语法：li { cursor: pointer; }
作用：鼠标放到对象上显示的效果
2.轮廓线 outline
多用于：表单input框
语法：取消表单轮廓：input { outline：none；(或outline: 0 ; )}（去掉默认的蓝色边框）
3.防止拖拽文本域 resize
语法：textarea{ resize: none; }(文本域不可调整大小)
注意：文本域内部自动有padding，所以标签<textarea></textarea>挨着，不要空开(效果如下)
写法一：光标左侧/上侧---没有空隙
写法二：光标左侧/上侧---有空隙
5.vertical-align属性&应用
1.属性：
用于：设置 图片或表单(行内块元素) 和文字的垂直对齐
设置一个元素的垂直对齐方式，只对行内元素/行内块元素有效
与行内块元素display: inline-block;搭配更合适
语法：vertical-align： baseline｜top｜middle|bottom
2.应用----解决图片底端 默认空白缝隙的问题
原因：行内块元素与文字默认-基线对齐
解决方案：
1.给图片添加：
vertical-align: bottom|top|middle等(提倡)
2.图片转换为块级元素：
display: block; (因为块无vertical-align属性) (不推荐--影响布局：右侧不能放文字)
.img {
vertical-align： top/ middle/ bottom
}3.应用---溢出文字省略号显示
3.1.单行-溢出文字省略号显示
- 必须满足三个条件：
1.强制一行内显示文本：white-space：nowrap；（默认 normal --自动换行）
2.超出的部分隐藏：overflow：hidden；
3.省略号代替超出部分：text-overflow：ellipsis；
.wordsome{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}3.2.多行-溢出文字省略号显示（更推荐后台人员实现此效果，前端兼容性差）
有较大的兼容性问题，适合于webKit浏览器、移动端（大多都是webKit内核）
- 必须满足的条件：
超出的部分隐藏：overflow：hidden；
省略号代替超出部分：text-overflow：ellipsis；
弹性伸缩盒子模型显示：display：-webkit-box；
限制在一个块元素显示的文本的行数：-webkit-line-clamp：2；
设置或检索伸缩盒子对象的子元素的排列方式：-webkit-box-orient：vertical；
6.常见布局技巧
1.margin负值的运用
在布局盒子的时候，可能会出现两个盒子叠加到一起导致边框变宽的情况，像这样：
那么我们就可以在这个时候设置margin-left: -1px; （浮动紧挨着基础上，盒子向左移动1px）
margin-left: -1px;
这个时候，如果想实现鼠标放上去就有选中整个边框的样子怎么做？如果只改变边框颜色，就会出现这种情况：
解决思路的核心---鼠标经过盒子时，提高当前盒子的层级
- 解决思路1：如果盒子没有定位，使用相对定位(占有原位置，有定位的会压住标准流，在上方显示)
.mar ul li:hover {
position: relative;
border-color: blue;
}- 解决思路2：如果盒子有定位，加z-index；
.mar ul li {
position: relative;
float: left;
margin-left: -1px;
border: 1px solid red;
}
.mar ul li:hover {
/* 2.如果盒子有定位，加z-index； */
z-index: 1;
border-color: blue;
}2.文字环绕浮动元素
巧妙运用--浮动元素不会压住文字的特性（只需给图片添加浮动，不会挡住标准流中的文字）
.box0 img {
float: left;
}3.行内块元素的巧妙运用
行内元素/行内块元素--想“水平居中”：给其父盒子添加text-align：center;即可
效果如上，代码如下：
/* 行内元素/行内块元素--想水平居中：给其父盒子添加text-align：center;即可 */
.box1 {
text-align: center;
}
.box1 a {
display: inline-block;
text-decoration: none;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #f7f7f7;
border: 1px solid #ccc;
color: #333;
font-size: 14px;
}
.box1 .prev,
.box1 .next {
width: 100px;
}
.box1 .current,
.box1 .elp {
background-color: #fff;
border: 0px;
}
.box1 input {
width: 45px;
height: 36px;
border: 1px solid #ccc;
/* 取消蓝色边框效果 */
outline: none;
}
.box1 button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
} <div class="box1">
<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="#">6</a>
<a href="#" class="elp">…</a>
<a href="#" class="next">下一页>></a>
到第
<input type="text">
页
<button>确定</button>
</div>4.CSS三角强化
<i></i>多用于三角形
效果如上，代码如下：
/* CSS画---直角三角形 */
.zjsj {
/* 不给宽度，高度，给边框(四边颜色不同，三个透明)，出现三角形 */
width: 0;
height: 0;
/*为了照顾兼容性：兼容低级浏览器，还需写： */
line-height: 0;
font-size: 0;
/* 直角三角形 */
/*写法一： */
border-top: 200px solid pink;
border-right: 100px solid blue;
/*写法二：分开写： */
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 200px 100px 0 0;
}
效果如上，代码如下：
.jdprice {
width: 201px;
height: 25px;
border: 1px solid red;
line-height: 25px;
}
.jdprice .red {
position: relative;
float: left;
margin-right: 10px;
width: 100px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
}
.jdprice .red i {
position: absolute;
right: 0px;
/*直角三角形 */
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 13px solid #fff;
}
.jdprice .content {
font-size: 14px;
color: #666;
text-decoration: line-through;
}<div class="jdprice">
<span class="red">¥1749.00
<i></i>
</span>
<span class="content">¥229900</span>
</div>5.CSS初始化
注：字体：不要用中文，用其对应的unicode编码代替，有效避免浏览器解释css代码时的乱码问题。（如：黑体：\9ED1\4F53 ; 宋体：\5B8B\4F53;）
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li 的小圆点 */
li {
list-style: none;
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #c81623;
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
.hide,
.none {
/* 元素隐藏 */
display: none;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}