CSS3

CSS知识点

一 . 解决老的浏览器支持问题

1.加上相应的前缀即可

Chorme	IE	Firefox	Safari	Opera
-webkit-	-ms-	-moz-	-webkit-	-o-或者-xv-

2.基本概念

• CSS3弹性盒子：
  • 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式；引入弹性布局的目的是提供更有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。
  • 弹性容器通过设置display属性为flex或inline-flex将其定义为弹性盒子，弹性容器内包含了一个或多个弹性子元素； 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

3.选择器

.intro	选择所有class=”intro”的元素	1
#id	#firstname	选择所有id=”firstname”的元素
*	*	选择所有元素
element	p	选择所有p元素
element,element	div,p	选择所有元素和元素
element element	div p	选择元素内的所有元素
element>element	div>p	选择所有父级是div元素的p元素
element+element	div+p	选择所有紧接着元素之后的元素
[attribute]	[target]	选择所有带有target属性元素
[attribute=value]	[target=-blank]	选择所有使用target=”-blank”的元素
[attribute~=value]	[title~=flower]	选择标题属性包含单词”flower”的所有元素
[attribute|=language]	[lang|=en]	选择一个lang属性的起始值=”EN”的所有元素
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标在链接上面时
:focus	input:focus	选择具有焦点的输入元素
:first-letter	p:first-letter	选择每一个元素的第一个字母
:first-line	p:first-line	选择每一个元素的第一行
:first-child	p:first-child	指定只有当元素是其父级的第一个子级的样式。
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	选择一个lang属性的起始值=”it”的所有元素
element1~element2	p~ul	选择p元素之后的每一个ul元素
[attribute^=value]	a[src^=”https”]	选择每一个src属性的值以”https”开头的元素
[attribute$=value]	a[src$=”.pdf”]	选择每一个src属性的值以”.pdf”结尾的元素
[attribute*=value]	a[src*=”44lan”]	选择每一个src属性的值包含子字符串”44lan”的元素
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。
:root	:root	选择文档的根元素
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）
:enabled	input:enabled	选择每一个已启用的输入元素
:disabled	input:disabled	选择每一个禁用的输入元素
:checked	input:checked	选择每个选中的输入元素
:not(selector)	:not(p)	选择每个并非p元素的元素
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素
:in-range	:in-range	匹配值在指定区间之内的input元素
:read-write	:read-write	用于匹配可读及可写的元素
:read-only	:read-only	用于匹配设置 “readonly”（只读） 属性的元素
:optional	:optional	用于匹配可选的输入元素
:required	:required	用于匹配设置了 “required” 属性的元素
:valid	:valid	用于匹配输入值为合法的元素
:invalid	:invalid	用于匹配输入值为非法的元素

二 . 多重样式优先级深入概念

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序

下列是一份优先级逐级增加的选择器列表：

• 通用选择器（*）
• 元素(类型)选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

• Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• Never 永远不要在全站范围的 css 上使用!important
• Never 永远不要在你的插件中使用 !important
• • 内联样式表的权值最高 1000；
  • ID 选择器的权值为 100
  • Class 类选择器的权值为 10
  • HTML 标签选择器的权值为 1
• id属性不要以数字开头，数字开头的id在Mozilla/Firefox浏览器不起作用
• 创建样式表
  • 外部样式表
  • 内部样式表
  • 内联样式表
  • 多重样式表

CSS 优先级法则：

• A 选择器都有一个权值，权值越大越优先；
• B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
• C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
• D 继承的CSS 样式不如后来指定的CSS 样式；
• E 在同一组属性设置中标有“!important”规则的优先级最大；

目标选择器

• ：target{ }当目标被选中时就会执行该样式

三 . CSS属性

1.align-content

• align-content属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

• 提示：使用 justify-content 属性对齐主轴上的各项（水平）

  注意：容器内必须有多行的项目，该属性才能渲染出效果。

  CSS 语法

  align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

• 属性值

  值	描述
  stretch	默认值。项目被拉伸以适应容器
  center	项目位于容器的中心。
  flex-start	项目位于容器的开头。
  flex-end	项目位于容器的结尾。
  space-between	项目位于各行之间留有空白的容器内。
  space-around	项目位于各行之前、之间、之后都留有空白的容器内。
  initial	设置该属性为它的默认值。
  inherit	从父元素继承该属性。

  #main { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center;}

2.align-items属性

• 设置flex容器的对齐方式，使用每个flex对象元素的 align-self 属性可重写 align-items 属性。
• 语法
  • align-items: stretch|center|flex-start|flex-end|baseline（位置元素在容器的基线）|initial（设为默认值）|inherit;

3.背景属性background

• 当使用简写属性时，属性值的顺序为：:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

四 . 文本格式

• 文本颜色color
• 文本对齐方式：text-align
• 文本修饰：text-decoration
• 文本转换：text-transform
• 文本缩进（指定第一行缩进）：text-indent
• 指定字符间的距离：letter-spacing（可正可负）
• 指定一个段落中行之间的空间：line-height
• 指定单词间的间距：word-spacing

一 . CSS3的基本概念

• CSS 用于控制网页的样式和布局。而CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。
• CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。
• css是指层叠样式表，解决内容与表现分离的问题
• id选择器可为特有的id的html元素指定特定的样式，ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
• 不要在属性值与单位之间留有空格（如：”margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

二 . CSS3的新属性

1.边框border

• 圆角边框：border-radius
  • border-radius：左上 右上 右下 左下；
• 阴影边框：border-shadow
  • box-shadow: 右偏移量 下偏移量 模糊距离 阴影尺寸 颜色 内外阴影；(可同时加多个)
  • • h-shadow：必需，水平阴影的位置。允许负值
    • v-shadow：必需。垂直阴影的位置。允许负值。
    • blur：可选，模糊距离
    • spread：可选，阴影尺寸
    • color：颜色
    • insert：可选，将外部阴影（outset）改为内部阴影，外部阴影是默认值（不允许写）
• 图像边框（IE浏览器不支持）：border-image
• 对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

2.图片滤镜filter属性

• 为元素添加可视效果（如饱和度与模糊度）
• img{ filter:grayscale(100%); //修改所有图片的颜色为100%灰度}
• 常用属性值
  • filter:none | biur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity()| saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了”inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：```**<offset-x> <offset-y>** (必须)这是设置阴影偏移量的两个 <length>值. **<offset-x>** 设定水平方向距离. 负值会使阴影出现在元素左边. **<offset-y>**设定垂直距离.负值会使阴影出现在元素上方。查看**<length>**可能的单位. **如果两个值都是0**, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).`` (可选)这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). (可选)这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 (可选)查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。`
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。”angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter: url(svg-url#element-id)
initial	设置属性为默认值，可参阅： CSS initial 关键字
inherit	从父元素继承该属性，可参阅：CSS inherit 关键字

三 . 常见模型和样式表

行内元素只有左右边距，没有上下边距，指定padding值可能有bug

1.居中对齐汇总

1-1 . 水平居中对齐

margin:0 auto;

必须是块级元素，且给定了宽度

text-align:center;

父级元素是块级元素，自身是行内元素或者行内块元素

width:内容宽；height：内容高；padding：盒宽减去内容宽再除以2；background-clip：content-box；

利用padding和background-clip配合实现div的水平居中

.parent{margin:0 auto;width:200px;height:200px;background-color:red;}.children {width: 100px;height: 100px;padding: 50px;background-color: black;background-clip:content-box;/居中的关键/

2 . 垂直居中

line-height:盒子高

自身或者父级元素必须有具体行高

position加translate（-50%，-50%），百分比以自身为基准,适合没固定大小的内容（min-width,max-height,overflow:scroll)

绝对定位

祖先容器：position：relative；

自身：height：***；position：absolute；margin：auto；top：0；left：0；

高度必须给出，建议加overflow：auto；防止内容溢出

内容元素：position: fixed，z-index: 999，记住父容器元素position: relative **

.Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999;}

注意点

1.相邻的垂直块级盒子，外边距会合并，且以最大的外边距为准

2.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块级元素，如果父级元素没有上内边距及边框，则父元素的上边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会合并

解决方法：

• 可以为父级盒子加上1px的上边框或上内边距
• 可以为父元素添加overflow：hidden；

3.宽度属性width和高度属性仅适用于块级元素，对行内元素无效（img标签和input除外）

计算盒子模型总高度时，还应考虑上下两个盒子外边框合并问题

如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小

内盒尺寸（元素实际大小）=width/height+padding+border

4.盒子模型布局稳定性

按照优先使用宽度（width），内边距（padding）外边距（margin）

width > padding > margin

原因：

• margin会有外边距合并问题还有ie下面的margin加倍的bug，所以最后使用
• padding 会影响盒子的大小，需要进行加减计算，比较麻烦，其次使用
• width没有什么问题

5. CSS盒模型

CSS3中可以通过box-sizing来指定盒模型，即指定为content-box，border-box，这样我们在计算盒子大小的方式就发生了变化

可分为以下两种情况：

• box-sizing : content-box ;盒子大小为 width+padding +border，content-border指事默认值，其让元素维持W3C的标准Box Mode

• box-sizing ： border-box；盒子大小就是width，即padding和border是包含在width里面的，新添属性

  注意：上面的标注的width指的是CSS属性里设置的width：length；content的值会自动调整的

6 . CSS层叠样式

• 样式冲突，遵循就近原则。哪个样式离结构近，就执行哪个样式
• 样式不冲突不会层叠

7.CSS继承性

恰当地使用继承可以简化代码，子元素可以继承父元素的样式（text-，font-，line-，这些元素开头的都可以继承，以及color属性）

8.CSS优先级

定义css样式时，经常出现两个或更多规则应用在同一元素上，这时就出现优先级问题

继承样式的权重为0.即在嵌套结构中，不管父元素权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式，行内样式优先，应用style属性的元素，其行内样式的权重非常高，远大于100.

权重相同时遵循就近原则。！important拥有最大的权重

9.浮动Float

• 浮动首先包含块的概念（包裹）。也就是说，浮动的元素总是找离他最近的父级元素对齐，但是不会超过内边距的范围

• 浮动元素排列元素，跟上一个元素（块级）有关。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。