CSS总结
复习完CSS后总结一下，首先看一下CSS的一个体系结构图：
CSS体系结构图.png
大体上分为这八个部分，参考一下vivijind的css博客和自己的笔记
CSS简介
CSS概述
CSS，cascading style sheet，层叠样式表 ，HTML主要对应页面的内容，CSS主要对应页面的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
引入方法
外部样式表:<link rel=”stylesheet” href =”base.css”>，herf里引入外部的css文件
内部样式表:<style></style> （将页面各种元素的设置集中写在<head></head>标签里）
内嵌样式表:<p style=””> 在标签内嵌入，该方法将html和css杂糅在一起， 不利于后期维护
语法
CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。
image.png
书写建议：
在每条声明的末尾都加上分号；
多重声明时，在每行只描述一个属性，这样可以增强样式定义的可读性
CSS注释方法： /* … */
浏览器私有属性
CSS标准包括w3c的标准，也包括各浏览器厂商的不同标准。标准中各个属性也要经历从草案(WD)到推荐(REC)的过程，css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，同时也会出现有的浏览器厂商支持的好，有的支持的不好，所以就用厂商前缀加以区分。
chrome,safari
- -webkit-
firefox
- -moz-
IE
- -ms-
opera
- -o-
.pic{
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
属性值语法
基本元素（关键字，类型、符号、inherit,initial（隐藏））
取值方法：
- CSS关键词（例如auto,red,disc等）
- CSS基本数据类型，基本类型使用包含在尖括号中的类型名表示（例如<length>、<number>等）
- 取值与其属性取值范围一致的类型，使用包含在尖括号中的带有引号的属性名表示（例如<’border-top-color’>等）
- 取值不同于其属性的类型，使用包含在尖括号中的属性名表示（例如<margin-width>、<border-width>等）
组合符号
- 空格 ：<’font-size’> <’font-family’> 必须出现且顺序不能变
- && : <length>&&<color> 必须出现，顺序可变
- || : underline || overline || line-through || blink 至少出现一个，顺序可变
- | ： <color> | transparent 仅能出现一个
- [] ：bold [thin ||<length>] 分组作用，大括号内可以看成一个
数量符号
- <length> 出现一次
- +出现一次或者多次
- ？可以出现也可以不出现
- {} <length>{2,4} {}内两个数字分别表示最少和最多出现次数，空格隔开
- *可以出现0,1…n次
- #需要出现一次或者多次，中间用逗号隔开
@规则语法
@规则以一个关键词@开始，紧跟在后的是一个标识符。
格式：@ 标识符 xxx; @ 标识符 xxx {}
常用标识符:
常用标识符.png
CSS选择器
在CSS中，选择器是一种模式，用于选择需要添加样式的元素。具体见：CSS选择器同时，需要注意的是，不同浏览器对选择器的支持不一样。
选择器兼容性说明：本节中所讲的选择器，主流的浏览器基本都支持，IE低版本有较多的兼容问题，具体可查看该页面。
简单选择器
-
标签选择器 标签{}
-
类选择器（class 属性） .class{}
- .
- 字母、数字，-，_
- className必须以字母开头
- 区分大小写
- 出现多次
-
id选择器 #id{}
- #
- 字母、数字，-，_
- id必须以字母开头
- 区分大小写
- 相同ID仅出现一次
-
通配符选择器 *{}
-
属性选择器（选择具有某个属性的元素） [属性]{}
- [att=val]{} 属性等于某个值的选择器 #nav{} == [id = nav]{} ID选择器为其特例
- [att~=val]{} 表示属性中包含xx值，使用空格分割 .sports{} == [class~=sports]{} 类选择器为其特例
- [att|=val]{} 分隔符等号 选择值为val或者val-开头的元素 （不常用）
- [att^=val]{} 以某个值开头的属性选择器
- [att$=val]{} 以什么结尾的元素
- [att*=val]{} 包含什么的元素
-
伪类选择器
- a:link{color:gray;} 伪类选中所有a标签且href有值的
- a:visited{} 访问过的
- a:hover{} hover上去的效果
- a:active{} 鼠标点击上去的样式
- :enabled 可用状态
- :disabled 不可用状态
- :checked 单选复选框状态，选中状态
- :first-child 选中第一项
- :last-child 选中最后一项
+:nth=child(even) 选中哪项（正着） old even 3n+1之类的 - :nth-last-child(even) 倒着选中哪项
- :only-child 选中只有一项的
- :fist-of-type 选中第一个类型的元素
- :last-of-type 选中最后一个
- :nth-of-type(2n)
- :nth-last-of-type(2n)
- :only-of-type
-
不常用的伪类选择器
- :empty 没有子元素的元素
- :root html根标签
- :not() 不包含某个选择器的元素
- :target 目标元素
- :lang() 选中一些language值是某些特殊值的元素
-
伪元素选择器
伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪元素选择器.png
-
组合选择器
组合选择器.png
继承
子元素会继承父元素的样式，但是我们显示运用inherited可以把非继承变成继承
- 继承属性（自动继承）
- color
- font
- text-align
- list-style
- …
- 非继承属性
- background
- border
- position
- …
CSS优先级
计算方法
- 计算方法（从上往下权重降低）
- a=行内样式
- b=ID选择器数量
- c=类、伪类的属性选择器的数量
- d=标签选择器和伪元素选择器的数量
-
优先级高的样式覆盖优先级低的样式
CSS优先级.png
CSS层叠
- 相同的属性会覆盖
- 优先级
- 后面覆盖前面
- 不同的属性合并
CSS改变优先级
- 改变先后顺序
- 提升选择器的优先级
- !important 增加!important关键字（当前面两种方法都不可以用时，才采取important的方式）
盒模型
CSS盒模型简介（W3C标准）
CSS盒模型.png
Content
- width：<length> | <percentage> | auto | inherit
- 百分比参照物为其父元素（大部分情况）
- 引申： max-width、min-width
- height：<length> | <percentage> | auto | inherit
- 引申： max-width、min-width
Padding
padding: [<length> | <percentage>] {1,4} | inherit
- 对面相等，后者省略，4面相等，只设一个
- 四个值：上右下左 TRBL
- 三个值：上右下，然后左复制右
- 二个值：上右，上复制下，左复制右
- 一个值：四边都是这个值
- 也可以单个设置：padding-top、padding-right、padding-bottom、padding-left
- 引申：margin、border 类似
Margin
margin: [<length> | <percentage> | auto] {1,4} | inherit
- margin合并：毗邻元素margin会合并，父元素与第一个/最后一个元素考虑合并
- 利用auto妙用 margin: 0 auto——水平居中
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
margin.png
margin合并问题，详见 MDN 外边距合并
Border
边框 border: [<border-width> || <border-style> || <border-color>] | inherit
- border-width: [<length> | thin | medium | thick] {1,4} | inherit 默认边框值
- border-style: [solid | dashed | dotted |…] {1,4} | inherit
- border-color: [<color>|transparent]{1,4} | inherit
- 默认字体颜色，颜色可以有一个或者四个值，分别表示边框中上右下左四个颜色
- border:2px solid;border-color:#333 #333 transparent;border-radius:50%;
border-radius
圆角 border-radius: [<length>|<percentage>]{1,4}[/[<length>|percentage>]{1,4}]?
-
border-radius:10px; 表示四个角水平和垂直半径都是10px
border-radius.png
overflow
防止盒子内容超出 overflow: visible | hidden | scroll | auto
overflow.png
- 引申： overflow-x, overflow-y
- Overflow-x 是否对内容的左/右边缘进行裁剪。
- Overflow-y 是否对内容的上/下边缘进行裁剪。
box-sizing
盒子大小box-sizing: content-box | border-box | inherit
指定当前属性是哪个区域的宽高（设置width、height指定的区域）
- content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
- border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为IE怪异模式下的盒模型。
个人感觉IE盒模型比W3C的标准盒模型好用也方便...
box-shadow
盒阴影box-shadow: none | <shadow>[,<shadow>]*
box-shadow.png
- 阴影不占空间，仅修饰性的效果
outline
轮廓 outline: [<outline-width> || <outline-style> || <outline-color>] | inherit
- outline-width: <length> | thin | medium | thick | inherit 默认边框值
- outline-style: solid | dashed | dotted |…| inherit
- outline-color: <color>|invert | inherit invert表示和当前背景色相反的颜色
- outline不占用空间，在border外
- 可以利用outline模仿border边框
文本
字体
字体大小
- font-size: <length>|<percentage>|<absolute-size>|<relative-size>
- 例如12px 2em 200%
- 2em（2倍字体，建议使用相对值） 12px（绝对值） 字体大小
- 长度单位：
- em表示当前字体的倍数，相对大小值
- 百分比表示整个页面的宽度
- mm、cm、dm等表示毫米，厘米，分米
- px表示多少个像素点
- pt表示印刷上的磅，七十二分之一英寸
- 1rem = 16px
字体类型
font-family: [<family-name>|<generic-family>]#
- <generic-family> = serif | sans-serif | cursive | fantasy | monospace
- 五大类字体 serif(英文，矢量字体） sans-serif modospace（宽字体） cursive（手写字体） fatasy（无法归类的字体，特殊字符之类）
- 可制定大类也可制定具体字体名字，用”,”来加入多个字体，表示备选字体（当浏览器找不到字体时，会采用默认字体，提供备用字体可以提供多个选择）
粗体
- font-weight: normal | bold | bolder | lighter
- bold(加粗) or 900-100（数字表示粗，不同浏览器支持数字不同）
斜体（字体风格）
- font-style: normal | italic（字体本身的斜体） | oblique（字体没有斜体时，强制倾斜，浏览器计算得到）
- normal（正常） italic（斜体，厂家设计的斜体） obique（浏览器计算产生的斜体）
行高
line-height : normal | <number> | <length> | <percentage> 行的高度（行间距）
- 例如12px 3em（em表示当前字体的大小） 300% 3（等价于300%，略微有差别，见下）
- 300%设置时，如果把里面某段字设置为小的大小，行高不变，为先计算，后继承
- 3设置时，如果把里面字段设置为小的大小，行高根据改后的大小*3，为不计算，直接继承
- 和height的区别：line-height只针对行元素，height针对其他所有元素
- line-height：行高 设置文字间上下距离还有可以让层里面的东西可以垂直居中
- height：高度 就是定义一个层 或某样东西的高度
小型大写字母的字体
font-variant: small-caps （小的大写字母）
- font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font缩写
font：[[<font-style>||<font-variant>||<font-weight>||<font-stretch>]? <font-size> [/<line-height>]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar
- 示例：缩写：font: 30px/2 “Consolas”, monospace;
颜色
- color: red/#ff0000/reg(255,0,0)/rgba(255,0,0,1)/transparent
- 英文单词说明颜色，例如gray，red，yellow
- rgb颜色 #ff00ff 16进制数字分别表示rgb
- rgb颜色 rgb(255,255,0) rgba(255,255,0,0.5) 透明度 1，表示不带a通道，不透明
- 颜色值#ff0000也可以使用#f00缩写来表示
对齐
水平对齐
text-align: left | right | center | justify（两端对齐）
垂直对齐
vertical-align: baseline（默认值，基线） | sub（下标） | super（上标） | top（当前这一行的最高点） | text-top（文本的最高点） | middle（居中） | bottom（当前这一行的最低点） | text-bottom（文字的最低点） | <percentage>（相对于行高） | <length>（以baseline为起点，走..px）
缩进
text-indent: <length>|<percentage>（参照物为容器的宽度）
- 如果text-indent设置一个负的极大值，则里面的文字将跑出容器，达到隐藏文字的目的，该手段也经常用，往往运用场景为：代码中需要，但是界面中不显示
- 首行缩进2个字可以使用 text-indent:2
空格、换行
white-space: normal | nowrap | pre | pre-wrap | pre-line
- 单词自动换行 word-wrap: normal | break-word
-
任意两个字母间自动换行 word-break: normal | keep-all | break-all
white-space.png
间距
- word-spacing:30px 英文单词之间的间距
- letter-spacing:10px 字符和字符之间的间距
变形
text-transfrom:uppercase(大写)\lowercase（小写）\capitalize（首字母大写） 变形
标注
- text-decoration: none | [ underline || overline || line-through ]
- underline(下划线） overline（上划线） line-through（中间划线，删除线） blink（闪烁，不是所有浏览器支持） 文字装饰(可组合)
效果
阴影
text-shadow: none | [<length>{2,3} && <color>?] #
- 1px 2px 表示x、y轴上的偏移
- 第三个length表示模糊半径
- 如果文字阴影中的颜色没有设置，那么阴影颜色就是文字颜色
- 3px 5px 5px rgba(0,255,0,0.5) 给定四个值（可以为为负数），第一个：x方向上距离本体字延伸长度，第二个：y方向上延伸长度 第三个：模糊的范围 第四个：颜色 阴影，可以给定多个阴影实现霓虹灯的效果
文本溢出
文字省略… 样式： text-overflow: clip | ellipsis
- 示例：三个属性同时使用，第二个表示溢出的时候截断，然后nowrap进行不自动换行
- text-overflow:ellipsis; overflow: hidden; white-space: nowarp
- 注意使用overflow时，元素需要为块级元素才能设置宽度，满足溢出效果
光标
cursor : [<uri>,]*（可以自定义图片） [auto | default（普通光标，普通鼠标形状） | none（消失） | help（问号） | pointer（手型） | zoom-in（放大镜） | zoom-out（缩小镜） | move（两边上下的箭头） ]
轮廓
- outline-color: red 轮廓效果
- outline-style: solid\doted\dashed\double\groove（三维凹槽）\ridge（三维凸槽）\inset（凹的边）-
\outset（凸的边） 线型 - outline-width: thin\10 粗细
强制继承的属性
inherit.png
CSS布局
常见的CSS布局有：水平垂直居中、多列、全屏、响应式等等。这么多布局，我们是不是要一个一个记下来呢？其实万变不离其中，需要搞清楚的是在布局中起作用的css属性的每个特性，然后按照特性来对布局进行分配就能解决一大部分情况了。
在对CSS进行布局时，首先将问题分解，然后考虑每一个特性怎么实现，最后结合整理形成最终的布局。
下面我们对布局中一些常见的问题来进行具体的分析。
基本布局元素
display
块级元素 display:block
常用的块级元素有: div、p、form、header、footer、section、h1~h6、ul等
块级元素的特性：
- 默认宽度为父元素的宽度（影响元素大小）
- 可以设置宽高（影响元素大小）
- 换行显示（影响元素位置）
行内元素display: inline
常用的行内元素有：span、a、label、cite、em等行内元素的特性：
- 默认宽高为内容宽高（影响元素大小）
- 不可设置宽高（影响元素大小）
- 同行显示，可以在行内换行（影响元素位置）
结合块级和行内元素 display:inline-block
常用的inline-block元素有：input、textarea、select、button等
inline-block元素特性：
- 默认宽高为内容宽高（影响元素大小）
- 可以设置宽高（影响元素大小）
- 同行显示（影响元素位置）
- 整块换行（范围超过边界时，会整个一起换行，不会在行内换行）（影响元素位置）
display:table
指定对象作为块元素级的表格,类同于html标签table
display: table-cell
指定对象作为表格单元格。类同于html标签td
display: none vs visibility:hidden
display: none不删除元素的情况下隐藏或显示元素,不会保留元素本该显示的空间
visibility:hidden: 保留元素本来该显示的空间
position定位
优点：绝对定位脱离文档流，子元素不会对其他元素产生影响
缺点：
- 需要设置宽度，并进行具体的left设定来水平排列
- 兼容性问题，有些浏览器需要加私有前缀
static
static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
relative
- 元素仍在文档流中
- 参照物为元素本身，原来的位置还在，别的元素就不能替代这个位置
- 常用场景：改变z轴上的层级、绝对定位元素的参照物
absolute
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为第一个定位祖先（祖先上需要有定位元素）/根元素
fixed
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
float浮动
- 默认宽度为内容宽度
- 脱离文档流（和position不同，会被边界挡住，不是完全脱离）
- 向指定的方向一直移动
- 问题：需要清除浮动
flex
弹性布局，设置或检索弹性盒模型对象的子元素如何分配空间。
这个属性很好用，就是存在兼容性问题。
水平垂直排列
水平排列
实现有三种方式，一种是元素为行内元素，一种是定位布局，另一种是弹性布局。
未完待续~~
