CSS基础笔记

CSS基础整理

---

前言

• @author: zengjiahao
• @date: 2018/10/13

内容目录

CSS3入门及提高01（样式表、字体、选择器）

1.掌握三种css导入方式的优缺点

行内式
	写在标签内部
		只能影响到一个标签
内嵌式
	写在head标签中
		可以影响一个页面
外链式
	单独存在的css文件
		可以影响一个网站

2.字体样式的设置

字体大小
	font-size
		px
			写多少就是多少
		em
			数值 * 当前默认字体大小
		默认字体大小是16px,最小字体是12px
字体库
	font-family
		默认的字体是:微软雅黑
		赋值的字体用双引号括起来
		多字体版本,中间用逗号隔开.
			如果都没有的情况下,使用默认字体
字体是否加粗
	font-weight
		normal
			正常字体
				400
		bold
			加粗
				700
字体是否倾斜
	font-style
		normal
			正常字体
		italic
			倾斜字体

3.掌握字体的连写设置

font:字体加粗 字体倾斜 字体大小 字体库
example: font:italic bold 80px "宋体";
前面两个可以省略,也可以调换位置
	字体加粗,字体倾斜
后面两个不能省略,也不能调换位置
	字体大小,字体库

4.四种基础选择器的掌握

标签选择器
	所有相同的标签都可以被控制到
类选择器(.)
	含有相同类名的可以被控制到
	类名
		可以有多个
		可以重名
id选择器(#)
	含有这个id名的元素可以被控制(唯一的)
	id
		只能有一个
		不能重复
通配符选择器(*)
	所有的元素都会被控制到
	一般不用

5.后代选择器的掌握

多个选择器名之间用空格隔开
后面的元素是前面的后代
最终效果座用在最后一个元素身上
中间的辈分可以省略
	3-5层级

6.子代选择器的掌握

多个选择器名之间用>隔开
后面的元素是前面的子代
最终效果作用在最后一个元素身上
中间的辈分不能省略

7.熟悉CSS的书写规则

选择器规则
属性名与冒号的规则
属性值与冒号的规则
属性结束的规则
每个属性的规则
嵌套层级的规则

CSS3入门及提高02（三大特性、背景、新标签）

1.交集选择器

选择器名之间没有任何连接符号 div.active{}
找到一个元素,满足所有条件
少了不行,多多益善
当后代选择器没办法精确控制元素的时候,可以配合交集提高精确度

2.并集选择器

选择器名之间用逗号隔开 div1,div2{}
	每一个条件单独一行
只要满足其中任何一个条件就可以被控制到
主要用来替代通配符

3.a标签的伪类选择器

a:link
	未被访问的链接
a:visited
	被访问过的链接
a:hover
	鼠标悬停的时候
		hover的应用场景最多
a:active
	鼠标点击不松开的时候
当同时存在四个伪类选择器的时候
	爱恨原则love hate

4.CSS三大特性

层叠性
	当选择器的权重相同的时候,发生属性冲突,后来者居上
继承性
	存在父子关系的元素,子元素会继承父元素的部分属性
	a标签不继承颜色
	h系列标签不继承字体大小
优先级
	继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
	权重的计算

5.掌握行高设置文本垂直居中

行高等于容器高度,文字垂直居中
当盒子没有设置高度,那么此时行高就是盒子的高度

6.设置文字水平居中

text-align
	left
	center
	right

7.设置背景图片

background-image
	设置背景图片的路径
		url()
background-position
	利用数值赋值
		x正方向往右
		y正方向往下
	利用方位名词赋值
		九个方位
background-repeat
	背景图片是否平铺
		no-repeat
background-attachment
	背景是否固定(是否随着内容滚动)
		默认值:scroll
		fixed
background-color
	背景颜色
		赋值方式与color一致
		背景的半透明
			rgba
				背景颜色透明
			opacity
				全局透明

8.背景的连写方式

background:图片路径  是否平铺  图片位移  背景颜色
没有顺序要求

CSS3入门及提高03（复杂选择器、盒子模型）

1.文本修饰属性

text-decoration
	none
	underline
	overline
	line-through

2.盒子不同显示模式的特点

块级:block
	可以设置有效宽高
	独自占据一行
	没有设置宽度的块级盒子,默认等于父盒子的宽度
行内:inline
	不能设置有效宽高,宽高由内容决定
	一行可以显示多个
行内块:inline-block
	可以设置有效宽高
	一行可以显示多个

3.熟练掌握盒子显示模式的转换

display
通过需求去判断应该用哪一个显示模式

4.边框属性学习

border-width
border-color
border-style
	默认情况下是none
border的连写
	上 右 下 左
圆角属性
	border-radius
		圆的半径

5.内边距属性学习

padding
	赋值规律跟border一样
	垂直方向的padding对行内元素是没有效果的

6.外边距属性学习

margin
	赋值规律跟border一样
	垂直方向的margin对行内元素没有效果
	塌陷问题
		垂直塌陷
			避免就好
		包含塌陷
			给父盒子添加上边框
			给父盒子添加上内边距
			上面的我们都不用
			overflow:hidden
				让内部布局,不影响外部

7.搞清楚什么时候用内边距与外边距

如果是盒子内部的距离,那么请用padding
如果是盒子外部的距离,那么请用margin

8.盒子的真实宽高设置

盒子的真实宽高 = 设置的宽高 + border + padding

CSS3入门及提高04（浮动、清除浮动影响、学成网项目）

1.浮动的初衷是为了干什么

文字环绕图片
	文字会环绕着浮动元素

2.浮动的特点掌握

浮动的元素可以实现模式转换:行内块
浮动的元素脱离标准流,不占据标准流的位置
浮动的元素依次排列,顺序由html的结构代码决定
浮动的元素顶部对齐
父元素浮动,会带跑子元素
子元素浮动的范围在父元素的区域内
如果浮动的元素前面有标准流,那么会在标准流的后面开始浮动

3.版心布局

拥有固定的宽度
水平居中
单独抽取成为一个类选择器
	谁需要用来版心,就添加谁的类名即可
三种常见的布局方式
	一列固定宽度布局
	左窄右宽布局
	通栏平局布局

4.浮动产生的影响怎么清除

浮动的影响是什么
	存在父子关系的盒子,当父元素没有设置高度,所有的子元素都浮动了,那么父元素会丧失高度
如何清除浮动带来的影响
	高度法
		你没有高度,我就给你一个高度
	overflow
		让内部布局,不影响外部
	额外标签法
		再所有子元素之后,添加一个额外的标签,并且设置clear属性
			官方推荐,但是我们不用
			会破坏代码的结构
	伪元素法
		单伪元素
		双伪元素

CSS3入门及提高05（复习、学成网讲解）

1.属性选择器

**选择器	**示例	**含义
E[attr]****	li[type]{}	存在attr属性即可
E[attr=val]****	li[type=“vegetable”]{}	属性值完全等于val
E[attr*=val]****	li[type*=ea]{}	属性值里包含val字符并且在“任意”位置
E[attr^=val]****	li[color^=‘green’]{}	属性值里包含val字符并且在“开始”位置
E[attr$=val]****	li[type$=‘t’]{}	属性值里包含val字符并且在“结束”位置

2.伪元素选择器

1. E::first-letter
	文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 
	文本第一行；
3. E::selection 
	可改变选中文本的样式；
4、E::before和E::after
	在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
	E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为	  E::after、E::before，这样做的目的是用来做兼容处理。
	":" 与 "::" 区别在于区分伪类和伪元素

CSS3入门及提高06（定位、元素显示）

1.四种定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
relative	相对定位，相对于其原文档流的位置进行定位
static	静态定位（默认定位方式）所有的标签在一开始都是静态定位（标准流）
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2.边偏移属性

边偏移属性	描述
top:100px;	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

3.“子绝父相”-定位使用口诀

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是 子级是绝对定位的话， 父级要用相对定位。

首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

总结:

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 

4.绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50%   父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。

5.定位盒子的层级与叠放次序（z-index）

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如：  z-index: 2;

默认情况下:
定位 > 浮动 > 标准流 

注意：
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

6.元素的显示与隐藏

1.display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。


2.visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

3.overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

CSS3入门及提高07（高级技巧、精灵图、字体图标、滑动门）

1.鼠标的样式属性cursor

default
	默认箭头
move
	移动光标
pointer
	点击光标
text
	文本光标
wait
	载入光标
help
	帮助光标

<ul>

  <li style="cursor:default">我是小白</li>

  <li style="cursor:pointer">我是小手</li>

  <li style="cursor:move">我是移动</li>

  <li style="cursor:text">我是文本</li>

</ul>

2.input标签的外轮廓线

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。
outline
	outline:0 / none;

3.vertical-align属性的应用

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom 
属性值:
middle
	一般将行内块元素设置为中线对齐
top
bottom
baseline
	默认情况是基线对齐
		导致行内块元素底部会有空白的间隙
		
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

去除图片底侧空白缝隙
有个很重要特性需要记住： 图片或者表单等行内块元素，在默认基线对齐的情况下,他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法:
1. 让图片不要和基线对齐。通过设置top对齐或bottom对齐等方式解决
2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

4.精灵图技术的使用

简介:
	CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
	
目的:
	节省浏览器与服务器之间的通信成本
	将小的图标做成一张大的图片
	利用背景图片的位移,来显示不同的位置
	背景图片的位移数值,要么是0,要么是负数

5.掌握字体图标的两种设置方式

简介:
	图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont).

优点:
	可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
	但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
	本身体积更小，但携带的信息并没有削减。
	几乎支持所有的浏览器
	移动端设备必备良药...

阿里icon font字库 http://www.iconfont.cn/
Font-Awesome http://fortawesome.github.io/Font-Awesome/

使用方法:
利用类名设置
	类名不要复制错
利用unicode编码

第一步：引用iconfont.css
<link rel="stylesheet" type="text/css" href="./iconfont.css">
第二步：给盒子使用字体
<i class="iconfont icon-xxx"></i>
或者
<i class="iconfont">&#x33;</i>

6.能够使用滑动门技术完成导航栏

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般结构:
<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>
	
1. a 设置 背景左侧，padding撑开合适宽度。    
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。

CSS3入门及提高08（动画、变形）

1.动画的过渡属性

过渡（transition)
transition是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

语法格式:
transition: 要过渡的属性  花费时间  运动曲线  何时开始;

如果有多组属性变化，还是用逗号隔开。
如果想要所有的属性都变化过渡， 写一个all 就可以了.

transition-duration  花费时间  单位是  秒     s    比如 0.5s    这个s单位必须写      ms 毫秒

运动曲线   默认是 ease 
	ease 先快 然后逐渐变慢
	linear 匀速
	ease-in 加速 
	ease-out 减速
	ease-in-out 先加速后减速

何时开始  默认是 0s  立马开始

2.2D变形

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform    


变形属性值:

移动 translate

可以改变元素的位置，x、y可为负值；水平向右,垂直向下为正
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

利用平移实现定位的盒子水平居中
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */

缩放 scale

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

旋转 rotate

可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
注意单位是 deg 度数  

transform-origin
可以调整元素转换变形的原点
div{transform-origin: left top;transform: rotate(45deg); }  
/* 改变元素原点到左上角，然后进行顺时旋转45度 */   
 
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用  px 像素。
div{transform-origin: 10px 10px;transform: rotate(45deg); } 
/* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */ 

3.透视

透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

4.3D变形

3D坐标系

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

简单记住他们的坐标：

 x左边是负的，右边是正的

 y 上面是负的， 下面是正的

 z 里面是负的， 外面是正的
 
 3D变换一些属性值
 
 rotateX(deg)
 rotateY(deg)
 rotateZ(deg)
 
 当旋转到背面时,如果想让背面不可见,可使用下列方法
 backface-visibility 属性定义当元素不面向屏幕时是否可见。
 
 translateX(x)
 translateY(y)
 translateZ(z)
 translate3d(x,y,z)
 注意:其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

5.简单了解动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式:
animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

默认情况下，动画执行完毕都会恢复原样

                参数1：动画名
                参数2：动画持续时间
                参数3：延迟时间
                参数4：动画曲线 steps linear这些
                参数5：动画次数
                参数6：是否恢复原样，默认为恢复，加一个forwards就代表不恢复(就变成动画最终的样子)
                参数7：alternate：加这个东西就代表让元素恢复的时候也有动画效果
                                  恢复的时候也算一次动画，所有如果为2，那么一次到动画目的一次返回就没了
                      normal：默认值就是用动画效果到最终目的
                      reverse：先闪现最终目的，再用动画效果回到最初的值
                      alternate-rever：相当于就是reverse，只是比reverse多了一个动画恢复 
  			   参数8:状态 代表是否继续动画，给paused代表暂停，默认是running，代表动画播放animation-play-state: paused;

                这些顺序可以随便乱写，但是先写的时间一定是动画持续时间，后写的是动画延迟时间

                不用刻意去记顺序，以后需要用什么效果，想到什么就写什么
                
                示例:
                /* animation: scale 1s .1s linear 2 forwards alternate; */
            	/* animation: alternate 1s scale linear .1s forwards 5; */

1.创建一个动画副本
@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

2.然后在需要用到的元素哪里,调用该副本
示例:
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}

详细请看文档
animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画"