前端知识点学习汇总，温故而知新
前端知识点学习汇总，温故而知新
1.CSS行内样式表:权重高，
<div style="color:#333">div</div>
2.内部样式表,写在header style里：结构+样式
选择器{属性1：属性值1；属性2：属性值2}
3.外部样式表：style.css,将结构和样式分开
<head>
<link rel="stylesheet" href="css/style.css">
</head>
样式表 优点 缺点 控制范围
行内样式表 书写方便，权重高 没有实现样式和结构相分离 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 控制整个项目
4.css样式规则：选择器{属性：属性值；属性：属性值}
css基础选择器：
1.标签选择器：同类型的标签一样的样式
2.类选择器：.item-img
style.css
.green{
color:#333;
}
3.多类名选择器：<div class="green text-25">
4.id选择器,以#声明:<div id="green">,id只能使用1次
#green{
color:#333;
}
5.通配符选择器 *表示把所有标签选中
*{
color:#333;
}
二. CSS字体样式属性
1.font-size:字号大小 14px
2.font-family:字体
3.font-weight：字体粗细,normal=400,bold=700
4.font-style：字体风格
italic：浏览器会显示斜体的字体样式。
normal：默认值，浏览器会显示标准的字体样式
5.font:综合设置字体样式
选择器 {font: font-style font-weight font-size/line-height font-family;}
三.CSS外观属性
1.color color属性用于定义文本的颜色，其取值方式有如下3种：
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600
RGB代码，如红色可以表示为rgb(255,0,0).
2. line-height：行间距
3. text-align：文本内容水平对齐方式
4.text-indent：首行缩进 p { text-indent: 2em; }
5.text-decoration：文本的装饰
none 默认定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
ling-through 定义穿过文本下的一条线
6.开发者工具（chrome)
7.CSS复合选择器：由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精
细的目标元素标签
7.1后代选择器：多个标签组成 div p{ color:#eee;} .text p{ color:#eee;} ul li{ color:#eee;}
7.2 子代选择器: 例：ul li > a { color: red;} li 里第1个a生效
7.3 交集选择器：交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为calss选择器，两个选择器之间不能
有空格. div.class div.red 满足2个条件的交集
7.4 并集选择器:各个选择器通过“逗号”连接而成的，任何形式的选择器（包括标签选择器、class选择器、
id选择器等）:div,p,span { color:red;} 集体声明样式是一样的
8.链接伪类选择器:css文件按顺序写，否则失效
：link :未访问的链接
：visited :已访问的链接
：hover:鼠标移动到链接上
：active:选定的链接， 鼠标点击标签，但是不松手时
a:link{
color:#333;
}
9.CSS注释
用“ /* “标记开始注释，在内容的结尾使用"*/" 结束
快捷键：
span table
span*6 table
ul>li table
div+span table
.red table
同样操作
10.标签显示模式（display）
块级元素：每个块元素通常都会独自占据一整行或多整行
常见的块元素有// h1,h6,p,div,ul,ol,li等，
其中<div>标签是最典型的块元素
块级元素特点：
1. 总是从新的一行开始。
2. 高度，行高，外边距以及内边距都可以控制。
3. 宽度默认是100%,高是里面文字的高度
4. 可以容纳内联元素和其他块元素。
11.行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以
设置宽度、高度、对齐等属性，常用于控制页面中文字的样式。
常见的行内元素有//<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span>标签最典型的行内元素。
行内元素的特点：
1. 和相邻行内元素在一行上。
2. 高、宽无效、但水平方向的padding和margin可以设置。
3. 默认宽度就是它本身内容的宽度。
4. 行内无素只能容纳文本或其他行内元素。（a特殊，a里面可以放块级元素）
注意：
1. 只有文字才能组成段落，因此p里面不能放块级无素，同理还有这些标签//h1,h2,h3,h4,h5,h6,dt，它
们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接
12.行内块元素（inline-block)
在行内元素中有几个特殊的标签——//< img />< input />< td>可以对它们设置宽度和对齐属性。
行内块元素的特点：
1、和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
2、默认宽度就是它本身内容的宽度。
3、高度，行高，外边距以及内边距都可以控制。
13.标签显示模式转换display
块转行内： display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;
14.CSS背景 （background）
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
参数：
repeat：背景图像在纵向和横向平铺（默认的）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向平铺
repeat-y：背景图像在纵向平铺
设置背景图片埋，默认把图片在水平和垂直方向平铺以铺满整个元素。
15.背景位置（position)
例：background-position： center top;
例:background-position：15px top; 则15px是X坐标 ，top是Y坐标
16.背景附着
设置或检索背景图像是随对象内容滚动还是固定的
background-attachment： scroll / fixed
17背景简写
background: transparent url(image.jpg) repeat-y scroll center;
18.背景透明（ CSS3)
background: rgba(0,0,0,0.3);
background: rgba(255,255,255,0.3);
19.盒子模型（CSS重点）
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个矩形都
由元素的内容、内边距（padding）、边框（border）和外边距(margin)组成。
网页布局的本质：把网页元素比如文字图片等等，放入盒子里面然后利用CSS摆放盒子的过程，就是网
页布局。
CSS三大模块：盒子模型，浮动，定位。
20盒子边框（border）
border: border-width/ border-style/ border-color
边框样式用于定义页面中边框的风格，常用属性值如下：
none：取消边框（默认值）
solid：边框单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
border-top（上边框） /border-bottom（下边框） / border-left （左边框） / border-right （右边
框）
21.行高的设置(line-height): 文字高度==行高，则是垂直居中
22表格的细线边框
在表格中，table是一个外边框，td是里面的网格线，会出现边框重叠，可用border-collapse: collapse;
来合并相邻边框。
border-collapse: collapse;
23.内边距（padding）
padding属性用于设置内边距，是指边框与内容之间的距离。
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
24.just color picker 颜色取值器
25.外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
取值顺序跟内边距相同。
* {
margin: 0; /*清除内外边距 */
padding: 0;
}
25外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足两个条件：
1、必须是块级元素
2、盒子必须指定了宽度（width）
然后就给左右外边距都设置为auto，就可使块级元素水平居中。
26.外边距合并
解决办法：
1、可以为父元素定义1像素的上边框或上内边距。在.father中写入：
border-top: 1px solid; 或者
padding-top: 1px;
但是这个方法有一个缺点，会撑大盒子，要减去相应的width的值
2、可以为父元素加overflow: hidden.（溢出隐藏）
26.圆角边框
border-radius: 50%;
border-radius: 10px 20px;
取值为50%则为圆形
27.盒子阴影
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
例： box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.4);
28.浮动（float）：是块级元素能在一行显示，脱离了标准流的限制。
float：加了浮动的元素盒子是浮起来的，漂浮在其他标准流盒子上面。加了浮动的盒子，不占位置，它
浮起来了，原来的位置漏给了标准流的盒子。有浮动的盒子需要和标准流的父级搭配使用，需注意，浮
动可以使元素显示模式体现为行内块特性。
float: left;
28.版心和布局
版心：960px/980px/990px/1190px/1210px
版心是指网页中主体内容所在区域，一般在浏览器窗口水平居中显示，常见的宽度值为 960px / 980px /
1190px / 1210px 等
28.1一列固定宽度且居中
28.2 两列左窄右宽型:左右型布局时要注意两盒子之间的浮动，盒子的宽度设置
28.3 通栏平均分布型
29.清除浮动
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题
选择器 { clear: 属性值；} clear 清除
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
.clear {
clear: both;
}
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。
30父级添加overflow属性方法
可以为父级添加：overflow: hidden;
别加错位置，给父盒子加，不是所有的浮动都需要清除，谁影响布局，清除谁。
.father {
border: 1px solid blue;
width: 300px;
overflow: hidden;
}
使用:after伪元素清除浮动
.clearfix:after { /* 正常浏览器清除浮动 */
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* zoom 1 就是ie6 清除浮动方式 *表示ie7以下的版本所识别 */
*zoom: 1;
}
三.CSS书写规范
1、选择器与 { 之间必须包含空格。
示例：.nav { }
2、属性名与之后的 ：之间不允许包含空格，：与属性值之间必须包含空格。
示例：font-size：12px;
选择器规范
当一个rule包含多个selector时，每个选择器声明必须独占一行。
选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
例：.nav li p { }
属性规范
属性定义必须另起一行，定义后必须以分号结尾。
行高的设置(line-height)
行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。做法就是文字的行高等于盒
子的高度。
.demo {
font-size: 16px;
}
30.定位（position）
元素的定位属性主要包括定位模式和边偏移两部份
边偏移属性 描述
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底端偏移量，定义元素相对于其父元素下边线的距离
left 左端偏移量，定义元素相对于其父元素左边线的距离
right 右端偏移量，定义元素相对于其父元素右边线的距离
定位模式（定位的分类）
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器 { position: 属性值;}
position属性的常用值
值 描述
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位。
position: relative; /*相对定位以自己的左上角定位，top盒子移动后仍保留原来的位置
*/
top: 100px;
left: 100px;
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
若所有父元素都没有定位，以浏览器当前屏幕为准对齐
31.fiex
四.CSS三大特性
CSS层叠性:相同的样式声明取并集样式
CSS继承性:子元素继承父元素的样式
CSS优先级：经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题
总结优先级：
1. 使用!important声明的规则。
2. 内嵌在HTML元素的style属性里面的声明。
3. 使用了ID选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含了一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。
8. 继承的权重是0
!important > style > id选择器>类选择器>标签选择器>*通配符或继承
