CSS学习笔记（一）：

1.网页基本构成

• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">手机页面:initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。
• 小图标meta name=shortcut icon

2.常用标签

• <audio>音乐 autoplay自动播放，loop循环，controls
• <embed>【5】定义外部插件
• <section>移动端 相当于 <div>
• <figure><figcaption>图文描述（块）

3.行内、块级元素

容易混淆的：

• 块：ol, ul, li, form, dl, dt, dd, nav
• 行：textarea, br, input, select, img

行内元素不能设定宽高，想设置，转换为块（display:block/ display:inline-block——既有宽高，又同占一行）
行内元素不能套用块级元素（除了<a>可以套块级，但<a>不能嵌套<a>）
<p>不能嵌套块元素，可以嵌套行内

4.语义化

• 利于seo搜索（logo一般都会放在h1中，权重最大）
• 样式丢失的时候还能很好的呈现
• 更好的支持更多终端
• 利于团队开发与维护

如何做

• 减少无意义的标签span，div
• 尽量不要使用标签本身css属性
• 强调的部分用strong，em，其他样式用css
• 表格搭建的时候尽量用thead，tbody，tfoot
• 列表搭建的时候尽量用ul，ol，li，dl，dt，dd

5.引入

头部

• 行内style
• 内嵌<style type=“text/css”></>
• 外链<link rel=“stylesheet” style=“text/css” >
• 导入式

<style>
    @import "~animate.css";
</style>

注意：如果既有外链式，又有导入式，则要求导入式放在最上面

导入和外链的区别：

• link是标签，@import是css提供的方式
• link是页面加载是同时加载，但导入式会等页面全部下载完后再加载
• 当使用js控制dom去改变css样式，只能用link标签

6.选择器

• 基本选择器：选择器{ 声明1；声明1；}
  • 元素名，权重为1
  • class：. 权重为10
  • id：# 权重为100
  • 通配符：* 代表所有的标签名（一般用来去掉浏览器默认自带的边距margin、padding），权重小于1

选择器	权重
!important (作为属性加在声明后面)	Infinity（无穷大）
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

可以在元素样式属性值后面加"!important",权重为1000

• 并集选择器：
  选择器1，选择器2{ 声明1；声明2；}
• 交集选择器：
  标签 #id . 属性{ 声明1；声明2；}
• 后代选择器(多代，只要包含就算，可以只选关键元素)：
  选择器1   选择器2{ 声明1；声明2；}
• 子代选择器(下一层的所有子代)：
  选择器1>选择器2{ 声明1；声明2；}
• 相邻兄弟选择器(并列元素，有相同的父元素)：
  选择器1+选择器2{ 声明1；}+后的紧挨着的第一个元素
• 兄弟选择器(并列元素，有相同的父元素)：
  选择器1~选择器2{ 声明1；}~后的所有元素
• 属性选择器(标签自带属性或自定义的属性):
  [属性]或[属性=“xxx”] { 声明1；声明2；}
• 伪类选择器：选择器：伪类名 { 声明 }
  • 锚伪类：

  a:link {color: #FF0000}		/* 未访问的链接 */
  a:visited {color: #00FF00}	/* 已访问的链接 */
  a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
  a:active {color: #0000FF}	/* 选定的链接 */
  提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
  提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
  提示：伪类名称对大小写不敏感。
  

  • :first-child伪类
    p:first-child：不是选择p的子元素的第一个，是作为“第一个-子元素”的p
  • lang伪类
    为不同的语言定义特殊的规则
• 伪元素：选择器：伪元素 { 声明 }
  • :frist-line伪元素
    为块级元素的第一行文本添加样式
  • :frist-letter伪元素
    向文本的首字母设置特殊样式
  • :before  :after伪元素
    在元素前、后插入新的内容，天生自带content属性，设置内容
    h1:after {content:url(/xxx/xxx.gif)}content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

伪元素伪类的存在性：

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，
而不是元素的id、class、属性等静态的标志。

由于状态是动态变化的，所以一个元素达到一个特定状态时，
它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，
它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。
实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，
选取某些内容前面或后面这种普通的选择器无法完成的工作。
它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，
并不存在于文档中，所以叫伪元素。

7.定位

CSS有三种基本机制：普通流，浮动和绝对定位。

1）定位

CSS的position属性规定四种定位类型：static正常、relative相对定位（占位，占用原本位置，位移不多占空间）、absolute绝对定位（脱离文档流，不占位，相对包含块定位）、fixed（脱离文档流，不占位，和absolute一样，包含块为视窗）

• top、right、 bottom、 left：与边界的偏移
• overflow：如果超出规定区域，用overflow属性（visible:默认值，呈现元素外、hidden：被修剪，不可见、scroll：滚动条、auto：看情况显示滚动条、inherit：继承父元素的overflow属性）
• clip：修剪后放置clip:rect(0px,60px,200px,0px);
• vertical-align：设置元素的垂直对齐方式（sub,super,top,text-top,middle,bottom,text-bottom）
• z-index：设置堆叠顺序，值为数字，使用在定位元素上

2）浮动（左右）

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
普通文档流和浮动流没有交集，浮动流下，会出现“碰撞”、“卡住”、“下降”
要指定宽度，否则会尽可能的窄

• left, right, none, inherit
• 清理：clear属性：left,right,both,none,inherit
• 不可继承
• 所有元素都可以设置浮动，默认display: block
• 脱离文档流：不占布局和尺寸，浮于正常的文档流至上

清楚浮动问题的方法：

• 给父级元素增加height
• overflow: hidden
• 在最后一个元素后添加块级元素（clear: both）
• clearfix清浮动（最常用的做法）：利用: after伪元素清楚，利用选择器添加空的块级元素（块级，clear: both，content: “”， （一般确保也加上另外四个条件：height: 0; font-size:0; overflow: hidden; visibility: hidden;））设置样式.clearfix: after

  .clearfix: after{
  	//必须要素
  	display: block;
  	clear: both;
  	content: "";
  	//非必须
  	height: 0;
  	overflow: hidden;
  	font-size: 0;
  	visibility: hidden;
  }
  .clearfix {
  	zoom: 1;
  }
  

  3）绝对定位

  • 设置top, bottom, left, right四个方位
  • 不占文档流
  • 要有参照物，找第一个有position属性的父元素，没有则找到整个框
  • z-index：谁大，决定谁在上面，只有有position属性的才生效
  • 一定要给定位的方向，上>下，左>右

  4）相对定位

  • 四个方位
  • 相对自己占位
  • z-index

  5）固定定位

  • 脱离文档流
  • 四个方位
  • 参照物：浏览器窗口
  • z-index
  • 多个绝对定位，会重叠，文档中在后面的会在视图上显示在上层