前端学习——CSS重要知识点概括

一. CSS复习

1.1 CSS的使用方式

1. 内联样式：内联样式又称为行内样式，使用标签的style属性来设置，只能设置一个标签的样式，谨慎使用
2. 内部样式：内部样式写在head标签中的style标签内，只能设置当前页面的样式，酌情使用
3. 外部样式：单独的css文件，使用link标签的href属性引入，只要引入了该文件的页面都可以被设置样式，推荐使用

1.2 CSS选择器

名称	语法	描述
通配符选择器	*{}	选择所有标签（谨慎使用）
ID选择器	#id	要求ID的值唯一，如果页面中存在多个ID，也只获取到第一个
标签选择器	tag	直接写要选择的标签名，没有任何的符号
类选择器	.class	选取相同的类型的内容，以小数点开头
交集选择器	tag.class	表示并且的关系，要求必须是以标签选择器开头
并集选择器	selector1,selector2…	表示与的关系
后代选择器	selector1 selector2	空格隔开
子代选择器	selector1>selector2	大于号隔开
属性选择器	[href]	匹配包含href属性的标签（属性选择器可以单独使用表示匹配所有元素，也可以和任意选择器搭配使用）
	[href=‘abc’]	匹配href属性等于abc的标签
	[href*=‘abc’]	匹配href属性包含abc的标签
	[href^=‘abc’]	匹配href属性以abc开头的标签
	[href$=‘abc’]	匹配href属性以abc结尾的标签
	[href~=‘abc’]	匹配href属性等于abc，或者寻找被空格隔开的属性值中包含abc，主要用于匹配class属性
链接伪类选择器	:link	匹配未访问的链接
	:visited	匹配已访问的链接
	:hover	匹配鼠标悬浮中的链接
	:active	匹配选择中的链接（设置时按照当前顺序来设置）
结构伪类选择器	:first-child	匹配属于父类的首个子类元素的指定选择器
	:last-child	匹配属于父类的最后一个子类元素的指定选择器
	:nth-child(n)	匹配父类中第n个子元素，从上至下，n最小值为1
	:nth-last-child(n)	匹配父类中第n个子元素，从下至上，n最小值为1
伪元素选择器	::before	在元素内部的最前面添加元素，必须配合content属性一起使用
	::after	在元素内部的最后面添加元素，必须配合content属性一起使用
	::first-letter	匹配第一个单词或汉字
	::first-line	匹配第一行
	::selection	匹配光标选中的文本

1.3 CSS常用属性

1.3.1 字体样式属性

属性名	说明	可选值	备注
font-family	设置字体	宋体、微软雅黑等	可以一次性设置多个字体，浏览器会自动寻找符合要求的字体来显示
font-size	设置字号	数字	浏览器默认字号大小一般为14px或16px。推荐设置字号时使用偶数字号。IE8以下浏览器对于奇数字号有BUG。
font-weight	字体粗细	100-900的整百数 normal/bold/bolder/lighter	normal等价于400，bold等价于700
font-style	字体风格	normal/italic/oblique	italic和oblique都是设置字体倾斜，oblique用于设置字体本身没有斜体属性的一类字体
font	字体综合设置	selector{font:font-style font-weight font-size font-family}	综合设置时，多个属性间用空格隔开。必须准守语法要求的顺序。只有font-size和font-family为必填项，其他的可以省略。

1.3.2 CSS中的单位

单位名称	说明
px	像素，最常用
em	相对于当前标签内文本的尺寸
cm	厘米
mm	毫米
in	英寸

1.3.3 外观样式属性

属性名	描述	可选值	备注
color	文本颜色	预定义颜色，如red、green、blue 十六进制代码，如#FFFFFF表示白色，#000000表示黑色 rgb颜色代码，如rgb(255,255,255)表示白色，rgb(0,0,0)表示黑色 rgba颜色代码，如rgba(255,255,255,0.5)表示白色且50%的透明度	十六进制颜色代码是最常用的颜色设置，不区分大小写，#FFFFFF可以简写为#FFF
line-heght	行间距/行高	长度单位/百分比	一般设置行高和元素高度保持一致，用来实现文本垂直居中的效果
text-align	水平对齐方式	left/center/right	默认值left，只能设置标签内的内容居中，无法设置标签本身居中
text-indent	首行缩进	长度单位/百分比	推荐使用em单位，1em表示一个字的宽度，允许为负
text-decoration	文本装饰效果	none:默认装饰无效果 underline:下划线 overline:文本上方的线 line-through:穿过文本中的线	a标签的默认样式是underline，大部分情况下，我们需要给a标签设置text-decoration:none;来清除下划线

1.3.4 标签模式切换（display属性）

display的属性值	说明
block	行级标签转换为块级标签（使用最多）
inline	块级标签转换为行级标签
inline-block	块级/行级标签转换为行内块标签 行内块：在一行内显示的标签，但是他有高和宽的属性

1.3.5 背景属性

属性名	说明	可选值	备注
background-color	背景颜色	通color的值	背景颜色和背景图片可以同时设置
background-image	背景图片	none或者url(‘图片地址’)	设置none可以用来清除背景图片，空格隔开url可以一次性设置多个背景图片
background-repeat	背景是否平铺	repeat:设置纵横平铺 no-repeat:设置不平铺 repeat-x/y:设置横/纵向平铺	大部分情况下都是设置no-repeat让背景不要平铺，专门处理过一些小图片，可以通过repeat平铺来实现特定效果，类似铺地板
background-position	背景定位	具体的数值长度或百分比top/bottom/left/right/center	该属性要求必须先设置背景图片，以坐标系方式设置时，必须x轴在前，y轴在后，一般用于设置精灵图效果
background-attachment	背景附着	scroll：背景随滚动条滚动 fixed：背景图固定
background	综合设置	selector{ background:red url(‘地址’) repeat scroll position }	背景的综合设置没有官方要求的必须顺序，推荐使用该顺序

1.4 盒子模型

1.4.1 盒子模型概念

盒子模型就是把页面中的标签看做一个矩形的盒子（快递盒），每个盒子有元素内容，内边距（padding）、外边距（margin）和边框（border）组成

盒子模型是一种设计模式/方案，不是一门技术

1.4.2 边框

div {
   height: 200px;
   width: 200px;
}
/*css设置边框就会改变元素本身的大小*/
.d1 {
   /*border-color: blue;
   border-width: 1px;
   border-style: solid;*/
   /*设置四条边框都为1px宽度的蓝色实线*/
   /*border: 1px solid red;*/

   /*设置上边框为8px宽度的蓝色实现*/
   border-top: 8px solid blue;
   /*设置右边框为8px的红色双实线*/
   border-right: 8px double red;
   /*设置下边框为8px的黄色虚线*/
   border-bottom: 8px dashed yellow;
   /*设置左边框为8px的粉色圆点*/
   border-left: 8px dotted pink;
}
.d2 {
   border: 1px solid red;
   /*radius的值可以设置四个:左上,右上,右下,左下*/
   /*radius的值设置一个表示四个角设置相同属性*/
   /*radius的值的设置可以是具体长度单位,也可以是百分比*/
   /*50%永远是正圆*/
   border-radius: 50%;
   /*表格中有一个border属性,可以设置边框合并*/
   /*border-collapse: collapse;*/
}

1.4.3 内边距和外边距

1. 内边距padding用来设置边框与内部内容之间的距离，内边距会改变元素本身大小
2. 外边距margin用来设置边框与边框之间（多个元素之间）的距离，通过外边距可以实现元素自身的居中

  div{
   height: 200px;
   width: 200px;
   border: 1px solid red;
  }
  #d1{
   /*内边距padding*/
   /*改变内边距元素大小改变*/
   /*padding-left: 15px;
   padding-top: 20px;
   padding-right: 25px;
   padding-bottom: 30px;*/
   text-align: right;
   /*padding设置一个值表示四个内边距设置为统一值*/
   /*padding: 35px;*/
   /*设置上下内边距35px，左右内边距为45px*/
   /*padding: 35px 45px;*/
   /*设置上方内边距为25px，左右内边距为35px，下方内边距为45px*/
   /*padding: 25px 35px 45px;*/
   /*设置方向上右下左顺时针方向内边距*/
   padding: 25px 35px 45px 50px;
   /*切记内边距最小为0*/
  }


  #d2{
   /*外边距margin
   不改变元素大小
   外边距可以设置负值*/
   margin-top: 20px;
   /*margin-left: -30px;*/
   margin-right: 200px;
  }
  #d3 span{
   display: inline-block;
   height: 20px;
   width: 60px;
   /*margin: 15px;*/
   /*margin-right: 30px;*/
   background-color: pink;
  }
  #s1{
   margin-right: 25px;
  }
  #s2{
   margin-left: 45px;
  }
  /*左右外边距总长为两个元素之和*/
  /*上下外边距总长为两个元素外边距的最大值*/
  
  /*嵌套关系中，父级如果没有边框和外边距，那么子级和父级垂直方向的外边距取最大值，这时候会造成子级外边距无效的情况*/
  /*父级有边框或内边距时，两者外边距分别生效*/
  #father{
   width: 300px;
   height: 300px;
   background: pink;
   margin-top: 35px;
   /*padding: 10px;*/
   overflow: hidden;/*超出父级部分隐藏*/ 
  }
  #son{
   width: 50%;
   height: 150px;
   background: gray;
   margin-top: 15px;
  }

1.4.4 内外边距属性设置

属性名	说明
padding/margin	一次性设置四个方位的内/外边距，可选值有多种情况，单独说明
padding/margin-left	设置左内/外边距
padding/margin-right	设置右内/外边距
padding/margin-top	设置上内/外边距
padding/margin-bottom	设置下内/外边距

1.4.5 依次设置多个值

数值个数	说明
1个值	四个方位设置相同的值
2个值	设置上下和左右分别的值，padding:3px 5px;表示上下3px，左右5px
3个值	设置上，左右，下的值，padding：3px 5px 8px;表示上3px，左右5px，下8px
4个值	设置上、右、下、左（顺时针顺序）的值，padding：3px 4px 5px 6px;表示上3px，右4px，下5px，左6px

1.4.6 外边距的计算

1. 水平外边距相加即可
2. 垂直外边距取最大值
3. 嵌套时垂直外边距，如果父类元素没有上内边距和边框，则父元素的上外边距会与子元素的上外边框合并。合并后外边距为两者中的最大值

解决合并的方案有两个

1. 给父元素添加边框
2. 给父元素添加padding值

1.5 浮动

元素设置浮动是让该元素脱离原本的标准文档流，移动到其父类中指定的位置的过程

1.5.1 浮动的特点

• 浮：加了漂浮的元素盒子是浮起来的，漂浮在其他的标准流盒子之上
• 漏：加了漂浮的元素盒子不占据位置，原先的位置漏给标准流文档中的元素
• 特：浮动的盒子具有行内块的特性

1.5.2 浮动的语法

div {
	height: 200px;
	width: 200px;
	/*设置元素左浮动*/
	float: left;
	/*设置元素右浮动*/
	float: right;
}

1.5.3 清除浮动

清除浮动其实是清除浮动造成的影响

1. clear的方式清除浮动

div {
	/*清除左浮动*/
	clear: left;
	/*清除右浮动*/
	clear: right;
	/*清除所有浮动*/
	clear: both;
}

2. 额外标签法清除浮动

<div style="clear:both;"></div>

3. 父级控制法清除浮动

/*此处div一定是已经有了浮动效果的元素的父级标签*/
div {
	 /*父级添加overflow属性即可,不论overflow属性值为什么都可以实现*/
	 overflow: auto;
}

4. after伪元素方式清除浮动

.clearfix::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	/*指定标签不可见,但是仍然会占据原有的位置*/
	visibility: hidden;
}

1.6 定位

1.6.1 定位模式

position属性可用值	描述	备注
static	自动定位，其实就是不定位（默认值）	一般用来清除定位
relative	相对定位，相对于文档流中的位置进行定位	不脱离文档流，会占据空间
absolute	绝对定位，相对于已经定位的父元素进行定位	脱离文档流，不占据空间，类似浮动的效果 如果所有父级都没有定位，相对于浏览器进行定位 推荐定位模式为：子绝父相
fixed	固定定位，相对于浏览器窗口进行定位	不管任何情况下，都不会改变他的定位基点，IE6及以下不支持

1.6.2 偏移量设置

1. left：表示元素左侧偏移量，相对于其父级左边框的距离
2. right：表示元素的右侧偏移量，相对于其父级右边框的距离
3. top：表示元素上侧偏移量，相对于其父级上边框的距离
4. bottom：表示元素下侧偏移量，相对于其父级下边框的距离

1.6.3 叠放次序

当多个元素设置定位时，定位的元素之间，就可能发生重叠的现象，对定位元素使用z-index属性来设置层叠的顺序

z-index的默认值是0，可选值范围正整数，0和负整数，值越大，定位元素在层叠越优先，如果值相同，按照书写顺序匹配优先级

z-index属性只针对于定位元素有效，static也是无效的！！！

1.6.4 定位总结

定位模式	是否脱标	是否占位	偏移基准
static静态定位	否	是	不能使用偏移量属性
relative相对定位	是	是	基于自身左上角顶点（自恋型）
absolute	是（完全脱标）	否	基于父元素左上角顶点（拼爹型）
fixed	是（完全脱标）	否	基于浏览器内容的左上角顶点（一根筋）

1.7 显示与隐藏

1.7.1 display控制

特点：元素隐藏这时候会释放空间

div {
	/*设置元素显示*/
	display: block;
	/*设置元素隐藏*/
	display: none;
}

1.7.2 visibility控制

特点：元素控制隐藏的元素依然占据空间

div {
	/*设置元素可见*/
	visibility: visbile;
	/*设置元素不可见*/
	visibility: hidden;
}

1.7.3 overflow控制

特点：控制内容超出范围后的管理方案

div {
	/*默认值,超出内容不做任何处理*/
	overflow: visible;
	/*超出内容隐藏*/
	overflow: hidden;
	/*超出内容增加滚动条*/
	overflow: auto;
	/*不管是否超出都增加滚动条*/
	overflow: scroll;
}

1.8 界面样式

1.8.1 鼠标样式

/*常用样式*/
div {
	/*默认样式*/
	cursor: default;
	/*手指样式*/
	cursor: pointer;
	<ul>
		<li style="cursor: crosshair;">十字线鼠标样式</li>
		<li style="cursor: pointer;">链接样式(一只手)</li>
		<li style="cursor: move;">可移动</li>
		<!-- 上下左右和地图方位对应 -->
		<li style="cursor: e-resize;">向右拖动</li>
		<li style="cursor: w-resize;">向左拖动</li>
		<li style="cursor: n-resize;">向上拖动</li>
		<li style="cursor: s-resize;">向下拖动</li>
		<li style="cursor: ne-resize;">向右上拖动</li>
		<li style="cursor: nw-resize;">向左上拖动</li>
		<li style="cursor: se-resize;">向右下拖动</li>
		<li style="cursor: sw-resize;">向左下拖动</li>
		<li style="cursor: text;">文本标识</li>
		<li style="cursor: wait;">等待图标</li>
		<li style="cursor: help;">帮助</li>
	</ul>
	
}

1.8.2 轮廓样式

1. 轮廓（outline）的语法设置和边框（border）的语法设置一致，但是设置轮廓不占据空间，设置边框会改变元素大小

2. 边框可以设置圆角，轮廓不能设置

3. 一般给轮廓设置none，清除html标签自带的轮廓样式（input）

input {
	/*清空轮廓样式,值给0效果也一样*/
	outline: none;
	/*设置粗细为1px的红色实现轮廓*/
	outline: 1px solid red;
}

1.8.3 文本域拖拽

默认情况下，谷歌火狐等浏览器可以让用户随意的拖动textarea标签的大小，设置resize值为none来禁用该功能

textarea {
	resize: none;
}

1.8.4 垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            /*中间对齐*/
            /*vertical-align: middle;*/
            /*顶部对齐*/
            vertical-align: top;
            /*底部对齐*/
            /*vertical-align: bottom;*/
        }

    </style>
</head>
<body>
    <div>
        <span>对齐</span>
        <img src="img/1.jpg" alt="">
    </div>
</body>
</html>

1.9 文字溢出控制

1.9.1 设置溢出内容是否换行

div {
	/*默认值,超出宽度自动换行*/
	white-space: normal;
	/*设置超出内容强制不换行*/
	white-space: nowrap;
}

1.9.2 设置溢出内容样式

搭配overflow属性来实现超出内容自动截取并在最后追加省略号

div {
	overflow: hidden;
	white-space: nowrap;
	/*设置超出的内容被裁剪,并显示省略号*/
	text-overflow: ellipsis;
	/*设置超出内容直接裁剪,不显示省略号*/
	text-overflow: clip;
}

二. CSS3新特性

2.1 圆角边框

使用border-radius属性来设置圆角边框，它的值表示圆角弯曲开始的位置，可以是具体数值也可以是百分比

/*高宽相等的元素设置border-radius的值为50%可以得到正圆*/
div	{
	height: 200px;
	width: 200px;
	border-radius: 50%;
}

2.2 盒子阴影

div {
	width: 200px;
	height: 200px;
	border: 1px solid red;
	/*设置盒子阴影*/
	/*水平位置坐标、垂直位置坐标、模糊距离、阴影颜色、内/外阴影*/
	/*前两个属性为必填项,其他的都可以省略*/
	/*设置外阴影删除inset即可*/
	box-shadow: 20px 20px 30px rgba(0,0,255,.7) inset;
}

2.3 文本阴影

2.4 背景渐变

.d1 {
   height: 300px;
   width: 300px;
   /*默认垂直方向渐变,颜色值至少给两个*/
   /*background-image: linear-gradient(pink,blue);*/
   /*设置指定方向渐变,用单词表示*/
   /*background: linear-gradient(to top left,red,grey,blue);*/
   /*background: linear-gradient(-45deg,red 10%,grey 50%,blue 90%);*/
   /*设置透明渐变效果,配合背景颜色更有效果*/
   /*background: linear-gradient(to left,rgba(0,0,0,.9),rgba(0,0,0,0));*/

   /*设置每个渐变颜色的像素值*/
   /*background: linear-gradient(to top right,red 20px,blue 40px,grey 40px);*/
   background: repeating-linear-gradient(to top right,red 20px,blue 40px);
}

2.5 过渡

过渡是CSS3提供的全新特性，使用transition属性来实现平滑的过渡效果

使用时必须先表示出要过渡的元素属性有哪些，需要多久完成，运动曲线、是否等待

纯CSS实现过渡效果是，要搭配hover伪类来实现功能

属性名	描述
transition-property	定义用于过渡的CSS属性有哪些，可以设置all表示所有属性都具有过度特性
transition-duration	定义过渡完成所需要花费的时间，默认值为0，单位秒(s)
transition-timing-function	定义过渡效果的时间曲线
transition-delay	定义过渡效果何时开始（等待时间），默认值0，单位秒(s)
transition	简写形式，transition-property和duration为必填项，div{transition: all .5s}表示所有属性都具有过渡特性，在0.5秒之内完成

/*设置鼠标悬浮时div变大一倍,在0.5秒钟之内完成*/
div {
    height: 200px;
    width: 200px;
    background-color: pink;
    transition: all 0.5;
}
div:hover {
    height: 400px;
    width: 400px;
}

2.5.1 变形

2.5.1.1 2D变形

2.5.1.2 移动

div {
	height: 200px;
	width: 200px;
	background-color: pink;
	transition: all 0.5;
}
div:hover {
	/*元素向右(x轴)移动50px距离,向下(y轴)移动80px距离*/
	/*translate的值可以为负数控制反方向移动*/
	transform: translate(50px,80px);
}

2.5.1.3 缩放

div {
	height: 200px;
	width: 200px;
	background-color: pink;
	transition: all 0.5;
}
div:hover {
	/*设置元素横向放大2倍,纵向缩小一半*/
	/*给的值以1为依据,大于1表示放大,小于1则缩小*/
	transform: scale(2,0.5);
}

2.5.1.4 旋转

div {
	height: 200px;
	width: 200px;
	background-color: pink;
	transition: all 0.5;
}
div:hover {
	/*设置旋转角度,单位deg表示度数*/
	/*设置正数度数表示顺时针旋转,负数度数表示逆时针旋转*/
	transform: rotate(45deg);
}

2.5.1.5 倾斜

div {
	height: 200px;
	width: 200px;
	background-color: pink;
	transition: all 0.5;
}
div:hover {
	/*水平方向倾斜30度,垂直方向不变,第二个参数为0时可以不写*/
	transform: skew(30deg,0deg);
}

2.5.1.6 设置原点

div {
	height: 200px;
	width: 200px;
	background-color: pink;
	transition: all 0.5;
	/*设置元素变形的原点为x轴为10px,y轴为20px的位置*/
	transform-orgin: 10px 20px;
}

2.5.1.7 3D变形

左手坐标系

​ 伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

2.6 动画

@keyframes来声明动画，可以自定义动画的名称，动画的执行顺序和执行时机。
可以使用from表示动画的开始，to表示动画的结束。在这中间可以使用百分比来控制节奏。

	/*动画的声明*/
	@keyframes myAnimation {
		/*动画开始*/
		from {
			left: 200px;
		}
		/*规定执行时间的一半时执行*/
		50% {
			font-size:30px;
		}
		/*动画结束前执行*/
		to{
			background: pink;
		}
	}
	/*调用动画*/
	div{
		height: 100px;
		width: 100px;
		background: gray;
		position: absolute;
		left: 0;
		/*调用自定义动画，name的值要和自己声明的动画的名称保持一致*/
		animation-name: myAnimation;
		/*设置动画执行时间*/
		animation-duration: 4s;
		/*设置动画执行次数,设置infinite表示无限循环,默认值是1次*/
		animation-iteration-count: infinite;
		/*设置动画等待时间*/
		animation-delay:2s;
	}

三. CSS三大特性

3.1 层叠性

层叠性指的是CSS样式叠加能力，如果设置相同的样式属性，后设置的覆盖前面设置的，就近原则

3.2 继承性

子标签会默认继承父级标签设置的样式，但是不是所有样式都可以继承，背景、边框等不能继承

3.3 优先级

CSS的优先级要考虑权重一起来计算优先级的级别

贡献情况	贡献值
继承或者通配符选择器	0.0.0.0
每个标签选择器	0.0.0.1
每个类和伪类选择器	0.0.1.0
每个ID选择器	0.1.0.0
行内样式	1.0.0.0
!importment	无穷大

/*权重为0.0.0.3*/
div ul li {}
/*权重为0.0.1.3*/
div ul li.active {}

四. 总结

这篇博文是对于前段时间学习前端的一个总结知识，里面总结了CSS一些比较重要的知识点，算是一个简略的概括吧，里面大部分以表格和代码形式展现出来，大纲也比较清晰，大家可以看一看，后续还有对js基础知识和jQuery基础知识的更新，还有一个flex布局也还没有进行更新，明后两天会将剩下的给补上
大家看后发现有什么不对的可以多多指出，大家一起学习，共同进步！！！