CSS
外部样式表（外链试）：
例如：
<head>
<link rel=”stylesheet” type=”text/css” href=”css文件路径” />
</head>
属性:
- Rel:定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet”,表示被链接的文档是一个样式表文件
- Type 定义所链接文档的类型，在这里需要指定”text/css”,表示链接的外部文件为CSS样式表。我们都可以省略
- Href 定义所链接外部样式文件的URL，可以使相对路径，也可以是绝对路径
CSS基础选择器：
-
标签选择器： p{}
他会把页面相同的元素全部选择出来 -
类选择器： .test{}
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。 -
类选择器特殊用法-多类名：
在一个标签内部，只能有一个class属性。中间必须要使用空格空出来。
列如： class=”nav nav-test” -
Id选择器： #id{}
Id选择器只能用一次 -
通配符选择器：
*{
Margin:0;
Padding:0;
}
1.Font字体： (font字体简写字体大小必须设置)
Font-size:大小
Font-family:设置字体
Font-weight:字体加粗 normal（默认值） bold（加粗） bolder（特粗） lighter
Font-style:字体风格 normal(默认) italic(斜体) oblique(倾斜的字体)
Font：综合设置字体样式（重点）
综合性写法：
font: italic 700 20px “黑体”;
2.文本
Color：设置文本颜色
列如：
color:#4AB8FF color:red: color:rgb(255,0,0)
Color: 设置透明颜色
列如： color:rgba(255,0,0,0.5)
Line-height （使用较多）: 设置行间距(技巧：行高等于高度，可以让当行文本居中对齐)
Text-align: （使用较多）
文本水平居中 left(左) right(右) center(中间) justify(两端对齐)
对行内元素、行内块元素进行水平居中对齐
Text-indent: 设置首行缩进 text-indent:2em;
Text-decoration:（使用较多）
文本装饰： none(默认取消下划线) underline(定义下划线) overline(上划线)
Text-indent:
首行文本缩进：
用于设置文字的首行缩进,1em就是一个字的宽度，如果是汉子的段落，1em就是一个汉子的宽度。
列如： text-indet:2em;
列表（使用较多）：
List-style-image: 将图标设置为列表项
3. Emmet语法：
- 1.生成标签直接输入标签名按tab键即可 比如div然后tab键，就可以生成
<div></div> - 2.如果想要生成多个相同标签，加上就可以了比如div3就可以快速生成3个div
- 3.如果有父子级关系的标签，就可以用> 比如 ul>li就可以了
- 4.如果有兄弟关系的标签，用+就可以了比如div+p
- 5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
- 6.如果生成的div类名是有顺序的，可以用自增符号&
4.CSS复合选择器：
复合选择器就是由两个或多个基础选择器组成的。
后代选择器：（重点）
后代选择器选择它的子孙后代
写法： .div p
写法： 把外层标签写在前面，内层标签写在后面，中间用空格分隔。
列如： 父级 子级{属性：属性值}
子元素选择器：
写法： div>strong
写法： 把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接
交集选择器： (不常用)
条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。中间是不能有空格。
写法: p.red{
color:red;
}
并集选择器（重点）
写法： p,span,.calss{}
技巧： 并级选择器通常用于集体声明，逗号隔开，所有选择器都会执行后面操作
5.链接伪类选择器（重点）：
作用： 给超链接添加特殊效果
注意： 写的时候，他们的顺序尽量不要颠倒
a:link 未访问的链接
a:visited 已访问的链接
a:hover （常用）鼠标移动到链接上
a:active 选定的链接
复合选择器总结：
- 后代选择器：用来选择元素后代 是选择所有的子孙后代 使用较多 符号是空格 .nav a
- **子元素选择器：**选择最近一级元素 只选亲儿子 使用较少 符号是> .nav>p
- **交集选择器：**选择两个标签交集的部分 即是 又是 使用较少 没有符号 p.class
- **并集选择器：**选择某些相同样式的选择器 可以用于集体声明 使用较多 符号是逗号 .nav,.class
- **链接伪类选择器：**给链接更改状态 较多 重点记住a{}和a:hover 世界开发用的较多
6.标签有哪三种显示模式（非常重要）
块元素、行内元素、行内块元素
什么是标签显示模式？
标签以什么方式进行显示，比如div自己独占一行，比如span一行可以放很多个。
作用：
我们网页的标签非常多，在不同的地方会用到不同类型的标签，以便更好地完成我们的网页。
标签的类型（分类)：
HTML标签一般分为块标签和行内标签两种类型，他们也称块元素和行内元素
常见的块元素有
<h1>~<h6>、<p>、<div>、<ol>、<li>等，其中<div>标签是最典型的块元素
特点：
- 1.比较霸道，自己独占一行
- 2.高度，宽度，外边距以及内边距都可以控制
- 3.宽度默认是容器的100%
- 4.是一个容器及盒子，里面可以放行内元素或块级元素
行内元素
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<ins>、<span>等，其中<span>标签是最典型的行内元素。
特点：
- 1.相邻行内元素在一行上，一行可以显示多个。
- 2.高、宽直接设置是无效地
- 3.默认宽度就是他本身内容的宽度
- 4.行内元素只能容纳文本或其他行内元素
行内块元素（inline-block）
在行内元素中有几个特殊的标签<img /> 、<input /> 、<td>，可以对她们设置宽高和对其属性。
特点：
- 1.和相邻行内元素在一行上，但是之间会有空白缝隙，一行可以显示多个。
- 2.默认宽高就是它本身内容的宽度
- 3.高度、行高、外边距以及内边距都可以控制
三种模式总结区别:
**块级元素** 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
**行内元素** 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或侧其他行内元素
**行内块元素** 一行放多个行内块元素 可以设置宽度和 它本身内容的高度
7.显示模式转换display （使用较多）
- 块转行内元素： display:linline
- 行内转块元素： display:block;
- 块、行内元素转换为行内块元素： display:inline-block;
8.去掉列表默认的样式:（使用较多）
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，所以我们一般都是直接去掉样式。
列如： li{ list-style:none;}
9.Css背景(background)：
background-color： 背景颜色
Background-image： 背景图片
图像平铺：
x轴跟Y轴都平铺
background-repeat: repeat;
x轴平铺
background-repeat: repeat-x;
y轴平铺
background-repeat: repeat-y;
默认只有一张
background-repeat: no-repeat;
10.背景位置（position）重点-主要用于精灵图：
Background-position: length
列如：background-positon: 10px 50px； （x,y） **使用较多**
Background-position: position positon;
参数值：
Position： Top、center、bottom、left、center、right方位定位
注意：
必须先指定background-image属性
Position后面是x坐标和y坐标。
如果只指定了一个方位名词，另一个值默认居中
如果position后面是精确坐标，name第一个，肯定x第二的一定是y
若果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
11.背景附着：
背景附着就是解释背景是滚动还是固定的。
语法：
Background-attachment:scroll | fixed
参数 作用
Scroll 背景图像是随对象内容
Fixed 背景图像固定
12背景透明：
语法： background:rgba(0,0,0,0.3)
- 1.最后一个参数是alpha透明度取值范围0~1之间
- 2.我们习惯把0.3的0省略掉，这样写background：rgba(0,0,0,.3)
- 3.注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- 4.因为是CSS3，所以低于ie9的版本是不支持的。
背景总结:
属性 作用 值
Background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
Background-image 背景图片 Url（图片地址）
Background-repeat 是否平铺 Repeat、norepeat、repeat-x、repeat-y
Background-position 背景位置 Length、position分别是x和y坐标，切记如果有精确数值单位，则必须按照先X后Y的写法
Background-attachment 背景固定还是滚动 Scroll、fixed(不滚动)
背景颜色简写：
Background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
13.CSS三大特性： （重点）
一.css层叠性
就近原则，样式不冲突不会层叠
二.Css继承性
子元素会继承父元素的样式（text- font- line-height这些元素开头的可以继承）
三.Css优先级（重点）
！Important>行内样式>ID样式>类样式、伪类>标签选择器>继承或者*
继承权重为0：
权重叠加:
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成的，那么此时就会出现权重叠加问题。
列如：
Div ul li ----> 0,0,0,3
.nav ul li ----> 0,0,1,2
A:hover ----> 0,0,1,1
.nav a ----> 0,0,1,1
14.盒子模型（Box Model）：
盒子模型由哪四种组成： 内边距、外边距、边框、内容.
盒子里面的距离： 内边距（padding）
盒子与盒子的距离： 外边距（margin）
边框的样式： border-style:
none:没有边框即忽略所有边框的宽度（默认值）
solid: 边框单实线 （最为常用）
dashed:边框为虚线
dotted: 边框为点线
盒子边框写法总结表
表格的细线边框：
Table{
border-collapse:collapse;
}
Collapse单词是合并的意思
Border-collapse:collapse;表示相邻边框合并在一起
15.内边距（padding）：
Padding属性用于设置内边距，是指边框与内容之间的距离。
内容和边框有了距离，添加了内边距
盒子会变大
盒子的实际的大小=内容的宽度和高度+内边距+边框
Padding不影响盒子大小情况： （重点）
如果这个盒子，没有宽度 则padding不会撑开盒子
设置：
Padding-left 左内边距
Padding-right 右内边距
Padding-top 上内边距
Padding-bottom 下内边距
16.外边距：
margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离,或者是盒子跟四周的距离。
属性：
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
17.块级盒子水平居中：
可以让一个块级盒子实现水平居中
盒子必须指定了宽度（width）
然后就给左右的外边框边距都设置为auto
常见的三种块级盒子水平居中:
Margin-left:auto margin-right:auto
Margin:auto;
Margin: 0 auto;
18.文字居中和盒子居中的区别： (重点)
- 1.文字水平居中是text-align:center,而且还可以让行内元素和行内块元素（input、img）居中对齐
- 2.块级盒子水平居中，左右margin改为auto
列如：
text-align:center ;
margin:10 px auto;
19.插入图片和图片背景图片区别： （重点）
- 1.插入图片我们用的最多比如产品展示类 移动位置只能靠盒模型 padding margin
- 2.背景图片我们一般用于小图标背景 或者超大背景图片 背景图片只能通过 background-position.
清除元素的默认内外边距（重点）:
代码：
*{
Padding:0; 清除内边距
Margin:0; 清除外边距
}
注意： （重点）
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
20.相邻块元素垂直外边距的合并： （重点）
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并（也称为外边距塌陷）
解决方案：
尽量只给一个盒子添加margin值
21.嵌套块元素垂直外边距的合并（塌陷）：
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框、
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者。
解决方案：（重点）
- 1.可以为父元素定义上边框 border-top: 1px solid transparent（透明） ;
- 2.可以为父元素定义内边框
- 3.可以为父元素添加overflow:hidder
22.盒子模型布局稳定性
优先使用宽度（width）其次使用内边距（padding）再使用外边距（margin）
23.拓展内容：
讲一下CSS3部分新属性，但是我们遵循的原则是，一下内容，不会影响我们页面布局，知识样式更好看了而已。
语法： border-radius:length
技巧： 让一个正方形变成圆圈 border-radius:50%;
border-radius: 100px; 形状变成圆形
以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用高度的一半就好了。
24.盒子阴影（CSS3）：
语法：
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 影音尺寸（影子大小）影音颜色（内/外影音）：
值 描述
h-shadow 必须。水平阴影的位置。允许负值
v-shadow 必须。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影（outset）改为内部阴影
前两个属性是必须写的。其余的可以省略。
浮动：
目标：
1.能说出css布局的三种机制
理解
1.能够说出普通流在布局中的特点
2.能够说出我们为什么用浮动
3.能够说出我们为什么要清除浮动
CSS布局的三种机制: （重点）
CSS提供了3种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，
- 1.普通流（标准流）
块级元素会独占一行，从上向下顺序排列
。常用元素： div、hr、p、h1~h6、ul、li、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘侧会自动换行；
。常用元素： span、a、i、em等。
- 2.浮动
。让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。
- 3.定位
。将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的js。
什么是浮动：
概念： 元素的浮动是指设置了浮动属性的元素会
1.脱离标准普通流的控制
2.移动到指定位置
作用：
- 1.让多个盒子（div）水平排列成一行，使得浮动成为布局的重要手段。
- 2.可以实现盒子的左右对齐等等。
- 3.浮动最早是用来控制图片，实现文字环绕图片的效果
语法：
选择器{ float:属性值;}
None 元素不浮动（默认值）
Left 元素向左浮动
Right 元素享有浮动
小结：float属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。
浮动口诀之 漏：
浮动的盒子，会把自己原来的位置漏给下面标准流的盒子，就是不占有原来的位置，是脱离标准流，我们俗称“脱标”
浮动口诀之 特、 （重点）
浮动–特性 float属性会改变元素display属性。改成display: inline-block;
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
注意：浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行
浮动（float小结）：
**特点 **
- 浮 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
- 漏 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子
- 特 特别注意：浮动元素会改变display属性，转行成了行内块，但是元素之间之间没有空隙
浮动（float）的应用 （非常重要）：
浮动和标准流的父盒子搭配
我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给**浮动的元素添加一个标准流的父亲**，这样最大化的减小了对其他标准流的影响。
浮动（float）的扩展:
- 子盒子的浮动不会超过父盒子的边框。
- 也不会超过父盒子的内边框。
清除浮动： （非常重要）
为什么要清除浮动？
因为父级盒子很多情况下，不方便给宽度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子了
清除浮动本质：
清除浮动主要为了解决父级元素因子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动的方法：
语法：
·
Left 不允许左侧有浮动元素（清除左侧浮动的影响）
Right 不允许右侧有浮动元素（清除右侧浮动的影响）
Both 同时清除左右两侧浮动的影响
1. 第一种：额外标签法
就是在浮动元素末尾添加一个空的标签
列如：
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。
1. 第二种：父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto|scroll都可以实现
优点：代码简捷
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
1. 第三种：使用after伪元素清除浮动
：after方式为空元素额外标签发的升级版，好处就是不用单独添加标签了。
使用方法：
.clearfix:after{
content:””;
display:block;
height:0;
clear:both;
visibility:hiddent;
}
.clearfix{
*zoom: 1; /* IE6、7专们清除浮动样式 */
}
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持：after，使用zoom:1出发hasLayout
代表网站： 百度、淘宝、网易等
1. 第四种：使用双伪元素清除浮动
使用方法：
.
clearfix:before,clearfix:after｛
Content:””;
Display:table;
｝
.clearfix:after{
Clear:both
}
.clearfix{
*zoom:1;
}
优点： 代码更简洁
缺点： 由于IE6-7不支持：after，使用zoom:1出发hasLayout
什么时候要清除浮动呢？
1.父级没设置高度
2.子盒子浮动了
3.影响下面布局了，我们就应该清除浮动。
清除浮动的方式 优点 缺点
额外标签法 通俗易懂，书写方便 添加许多无意义的标签，结构化比较差
父级overflow:hidden; 书写简单 溢出会隐藏内容
父级伪元素 结构语义化正确 由于IE6-7不支持，兼容性问题
父级双伪元素 结构语义正确 由于IE6-7不支持，兼容性问题
2227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
