1.CSS选择器·
1.1基础选择器
1.1.1标签选择器
概念：标签选择器是指用HTML标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：标签名{属性1：属性值1；属性2：属性值2；}
作用：可以把某一类标签全部选出来。比如所有的div和span标签。
优点：能快速地为页面中同类型标签统一样式。
缺点：不能设计差异化样式。`
<html>
<head>
<title></title>
<style>
div{
color：red;
}
span{
color:green;
}
</style>
</head>
<body>
<div>标签选择器</div>
<dv>页面同选起</dv>
<span>直接写标签</span>
<span>全部不放弃</span>
</body>
</html>
1.1.2类选择器
类选择器使用“.”进行识别，后面紧跟类名
语法：类名选择器
.类名{
属性1：属性值1；
属性2：属性值2；
}
标签：<p class="类名"></p>
优点：可以为元素对象定义单独或相同的样式。可以选择一个或多个标签
注意：类名不要纯数字、中文等命名，尽量使用英文来表示。
<html>
<head>
<title></title>
<style>
.red{
color：red;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.brown{
color:brown;
}
</style>
</head>
<body>
<div class="red">标签选择器</div>
<dv class="green">页面同选起</dv>
<span class="yellow">直接写标签</span>
<span class="brown">全部不放弃</span>
</body>
</html>
1.1.3id选择器
id选择器用#进行标识，后面紧跟id名
语法格式：
#id名{
属性1：属性值1；
属性2：属性值2；
}
标签：<p id="id名"></p>
id选择器和类选择器的区别：
类选择器好比人的名字，是可以多次使用的。
id选择器好比人的身份证号码，在全国是惟一的，不得重复，只能选择一次。
<html>
<head>
<title></title>
<style>
#red{
color：red;
}
</style>
</head>
<body>
<div id="red">标签选择器</div>
<dv>页面同选起</dv>
<span>直接写标签</span>
<span>全部不放弃</span>
</body>
</html>
1.1.4通配符选择器
通配符选择器用*表示，*也就是选择所有的标签，他是所有选择器作用范围最广的，能匹配页面中所有的元素。
语法格式：
*{
属性1：属性值1；
属性2：属性值2；
}
<html>
<head>
<title></title>
<style>
*{
color：red;
}
</style>
</head>
<body>
<div>标签选择器</div>
<dv>页面同选起</dv>
<span>直接写标签</span>
<span>全部不放弃</span>
</body>
</html>
基础选择器总结
1.2复合选择器
1.2.1后代选择器
概念：后代选择器又称为包含选择器
作用：用来选择元素或元素组的子孙后代
写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。父级 子级{属性：属性值；属性：属性值；}
语法：.class h3{color:red;font-size:16px;}
<html>
<head>
<title>后代选择器</title>
<style>
.nav a{
color:pink;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
</body>
</html>
1.2.2子代选择器
作用：子元素选择器只能选择作为某元素子元素的元素。
写法：父级标签写在前面自己标签写在后面，中间跟一个>进行连接。
语法：.class>h3{color:red;font-size:14px;}
<html>
<head>
<title>后代选择器</title>
<style>
/*后代选择器*/
div strong{
color:pink;
}
/*子代选择器*/
div>strong{
color:red;
}
</style>
</head>
<body>
<div class="nav">
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</body>
</html>
1.2.3交集选择器
条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点也有标签二的特点。
语法：h3.class{
color:red;
font-size:25px;
}
<html>
<head>
<title>后代选择器</title>
<style>
/*交集选择器*/
p.red{
color:red;
}
div.red{
color:pink;
}
/*类选择器*/
.red{
color:green;
}
</style>
</head>
<body>
<p class=“red””>红色</p>
<p class=“red””>红色</p>
<p>蓝色</p>
<p >蓝色</p>
<div class="red">红色</div>
<div class="red">红色</div>
</body>
</html>
1.2.4并集选择器
应用：如果某些选择器定义的相同格式，就可以利用并集选择器，可以让代码更简洁。
并集选择器：通过各个选择器连接而成的。
语法：.class,h3{color:red;font-size:25px;}
任何形式的选择器（包括标签选择器、class类选择器和id选择器），都可以作为并集选择器的一部分。
<html>
<head>
<title>后代选择器</title>
<style>
/*并集选择器*/
p,span{
color:red;
}
div，h3{
color:green;
}
</style>
</head>
<body>
<p class=“red””>红色</p>
<p class=“red””>红色</p>
<span>我和你</span>
<span>我和你</span>
<div class="green">绿色</div>
<div class="green">绿色</div>
<h3>你和我</h3>
<h3>你和我</h3>
</body>
</html>
1.2.5伪类选择器
作用：用于向某些选择器添加特殊效果。比如链接添加特殊效果。
种类： a:link /未访问的链接/
a:visited /已访问的链接/
a:hover /鼠标移动到链接上/
a:active /选定的链接/
<html>
<head>
<title>后代选择器</title>
<style>
/*未访问过的链接*/
a:link{
color:#333;
text-decoration:none;
}
/*已访问过的链接*/
a:visited{
color:blue;
text-decoration:none;
}
/*鼠标移动到链接上*/
a:hover{
color：green;
text-decoration:none;
}
/*选定的链接*/
a:active{
color：red;
text-decoration:none;
}
</style>
</head>
<body>
<a href="http://www.xiaomi.com">小米手机</a>
</body>
</html>
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号使用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是空格 .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住a{}和a:hover实际开发的写法 |
2.CSS3属性
2.1文本相关属性
font-size：大小（例：15px）
font-family：字体(例：“华文仿宋”)
font-weight：字体粗细（normal/bold）=（不加粗/加粗）
font-style: 字体样式(normal/italic)=（正常/倾斜）
font:font-style font-weight font-size/line-height font-family
例如：font：italic 700 20px "宋体"
font总结
| 属性 | 表示 | 3注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是700或bold，不加粗是normal或400.记住数字不要跟单位 |
| font-style | 字体样式 | 记住斜体是italic ,不斜是normal，工作中最常用的是normal |
| font | 字体连写 | 1.字体连写是有顺序的，不能随便换位置。2.其中字号和字体必须同时出现 |
2.2背景相关属性
2.2.1背景属性
背景颜色background-color：颜色名;
背景图片background-image：URL（路径名）；
背景平铺background-repeat：repeat/no-repeat/repeat-x/repeat-y
北京位置background-position:left/center/right left/center/right;
背景附着background-attachment:scroll/fixed;
背景简写background:背景颜色（#ooffff） 背景图片地址(url) 背 景平铺(repeat-y) 背景滚动(scroll) 背景位置(center top);
背景透明：background：rgba(0,0,0,0.3);
2.2.2css三大特性
层叠新：概念：所谓层叠新是指多种css样式的叠加。这是浏览器处理冲突的能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会把另一个属性层叠掉。
原则：样式冲突，遵循就近原则。那个样式离结构近，就执行哪个样式。
继承性：概念：字标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
注意：
（1）恰当的使用继承可以简化代码，降低css样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
（2）子元素可以继承父元素的样式（text-，font-，line-这些元素开头可以继承，以及color属性）
优先级：概念：定义css样式时，经常出现两个或更多规则应用在同一元素上，此时选择器相同执行层叠样式。选择器不同，就会出现优先级的问题。
权重计算公式：
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 6每个行内样式style=“”“” | 1,0,0,0 |
权重叠加：
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
2.3列表相关属性
2.4框模型（盒子模型）
2.4.1内容
2.4.2边框（border）
border-width 定义边框粗细；
border-style 定义边框样式（实线solid 虚线dashed 点线dotted）；
border-color 定义边框颜色；
border：border-width||border-style||border-color ；
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| border-top-style：样式 | border-bottom-style：样式 | border-left-style：样式 | border-right-style：样式 |
| border-top-width:宽度 | border-bottom-width:宽度 | border-left-width:宽度 | border-right-width:宽度 |
| border-top-color：颜色 | border-bottom-color：颜色 | border-left-color：颜色 | border-right-color：颜色 |
| border-top：宽度 样式 颜色 | border-bottom：宽度 样式 颜色 | border-left：宽度 样式 颜色 | border-right：宽度 样式 颜色 |
2.4.3内边距（padding）
padding属性用于设置内边距，是指边框与内容之间的距离。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding:上下左右内边距 |
| 2个值 | padding：上下内边距 左右内边距 |
| 3个值 | padding：上内边距 左右内边距 下内边距 |
| 4个值 | padding：上内边距 右内边距 下内边距 左内边距 |
2.4.4外边距(,margin)
（1）margin属性用于设置外边距。margin就是控制盒子与盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding:上下左右外边距 |
| 2个值 | padding：上下外边距 左右外边距 |
| 3个值 | padding：上外边距 左右外边距 下外边距 |
| 4个值 | padding：上外边距 右外边距 下外边距 左外边距 |
（2）块级盒子水平居中三种写法：
<1>margin：auto；
<2>margin-left：auto；
margin-right：auto；
<3>margin：0 auto；
(3)文字居中和盒子居中的区别？
文字居中：text-align：center；
盒子居中：margin：10px auto；
(4)插入图片和背景图片的区别？
插入图片移动位置，只能靠盒模型padding margin。
背景图片移动位置只能靠background-position。
<html>
<head>
<title>插入图片和背景图片的区别</title>
<style>
.pic,.bg{
width:400px;
height:300px;
border:1px solid red;
}
/*插入图片*/
.pic img{
margin:30px;
}
/*背景图片*/
.bg{
background:url(images/2.jpg) no-repeat;
background-position:30px 10px;
}
</style>
</head>
<body>
<div class="pic">
<img src="imgages/1.png">
</div>
<div class="bg">
</div>
</body>
</html>
(5)清除元素默认的内外边距
*{
margin：0；
padding：0；
}
(6)外边距的合并
[1]相同块元素垂直外边距的合并
当上下相邻两个块元素相遇时，如果上面元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们的垂直距离不是margin-bottom和margin-top之和。而是取两个值中较大者这种现象称为相邻块元素垂直外边距的合并。
解决方案：尽量给一个盒子添加margin值。
<html>
<head>
<title>相同块元素垂直外边距的合并</title>
<style>
.top,.bottom{
width:500px;
height:500px;
background-color:pink;
}
.bottom{
margin-top:50px;
}
.top{
background-color:purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
[2]嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上边距及边框，那么父元素上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的最大值。
解决方案：1.可以为父元素定义上边框.
2.可以为父元素定义上内边距.
3.可以为父元素添加 overflow:hidden.
<html>
<head>
<title>嵌套块元素垂直外边距的合并</title>
<style>
.father{
height:600px;
width:600px;
background-color:red;
/*1.可以为父元素定义上边框*/
border-top:1px solid green;
/*2.可以为父元素定义上内边距.*/
padding-top:1px;
/*3.可以为父元素添加 overflow:hidden.*/
overflow:hidden;
}
.son{
height:300px;
width:300px;
background-color:blue;
margin-top:100px;
}
</style>
</head>
<body>
<div class="father"></div>
<div class="son"></div>
</body>
</html>
(7)盒子模型布局稳定性
建议优先使用宽度（width）、内边距（padding）、外边距（margin）。
2.5标签的显示模式
什么是标签的显示模式？
标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个。
作用：我们的网页标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。
标签的分类：THML标签分为块标签和行内标签，他们也称为块元素和行内元素。
2.5.1块级元素（block-level）
常见的块元素有h1~h6、p、div、ul、ol、li等，其中div标签是最典型的快元素。
块级元素特点：
（1）比较霸道，自己独占一行
（2）高度、宽度、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
注意：
<1>只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div。
<2>同理还有这些标签h1~h6,dt等都是文字类块级元素，里面不能放其他块级元素。
2.5.2行内元素
常见的行内元素有：a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最常见的行内标签，有的地方也称内联标签。
特点：
（1）相邻元素在一行上，一行可以显示多个。
（2）高宽直接设置是无效的
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或者其他行内元素。
2.5.3行内块元素
常见的行内块元素有：input img td,可以对他们设置宽高和对齐属性。
特点：
（1）和相邻行内元素在一行上，但是之间会有空白缝隙，一行可以显示多个。
（2）默认宽度就是它本身内容的宽度。
（3）高度、行高、外边距以及内边距都可以控制。
2.5.4三种模式的总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行为元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
2.5.5 标签显示模式转换display
块转行内：display:inline;
行内转块：display:block；
块行内元素转换为行内块：display：inline-block;
3.CSS布局机制
网页布局的核心就是用css来摆放盒子
css提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。
一个完整的网页=标准流+浮动+定位
1.普通流（标准流）
块级元素会独占一行，从上而下顺序排列；
常用元素：div,hr,p,h1-h6,ul,ol,dl,form,table.
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span，a , i , em.
2.浮动
元素的浮动是指设置了浮动元素的属性会脱离标准普通流的控制，移动到指定位置。
作用：让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。可以实现盒子左右对齐等等。浮动最早用来控制图片，实现文字环绕图片的效果。
| 特点 | 说明 |
|---|---|
| 浮 | float属性会让盒子漂浮到标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了 |
| 漏 | 浮动的盒子，把自己原来的位子漏给下面标准流的盒子，就是不占有原来的位置，是脱离标准流的 |
| 特 | 浮动会改变display属性（块转化为行内块） |
2.1浮动的扩展
2.1.1浮动元素与父盒子之间的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
2.1.2浮动元素与兄弟盒子之间的关系
在一个父级盒子中，如果前一个兄弟盒子是：浮动的，那么当前盒子会与前一个盒子顶部对齐。：普通流的，当前盒子会显示在前一个兄弟盒子的下方。
在一个父级盒子里面有两个小盒子，如果第一个小盒子不浮动，第二个盒子浮动，那么第二个盒子紧贴在第一个下面显示。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议：如果一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题。
2.2清除浮动
2.2.1为什么清除浮动呢？
父级很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为零，就影响了下面的标准流盒子。
2.2.2清除浮动的本质？
清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题。
2.2.3清除浮动？
语法：选择器{clear：both | left | right}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
2.2.4清除浮动的方法？
<1>.额为标签法：clear：both；
<2>.父级添加overflow属性方法：overflow：hidden |auto | scroll
<3>.使用after伪元素清除浮动(父级)
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
<4>.使用双伪元素清除浮动（父级）
.clearfix:after
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
2.2.5清除浮动总结
什么时候清除浮动呢？
1.父级没有高度
2.子盒子浮动了
3.影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法 | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差 |
| 父级overflow：hidden； | 书写简单 | 溢出隐藏 |
| 父级伪元素 | 结构语义化正确 | 由于IE6-7不支持：after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持：after，兼容性问题 |
3.定位
将盒子在浏览器的某一个位置-----css离不开定位，特别是后面的JS特效。
4.定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，正常模式 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
注意：1.边偏移需要和定位模式联合使用，单独使用无效；
2.top和bottom不要同时使用
3.left 和right 不要同时使用
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
