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">&lt;</a><a href="#" class="next">&gt;</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">&lt;&lt;上一页</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">下一页&gt;&gt;</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;
}