css基础（二）

css的元素显式模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素，和行内块元素三种类型。

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

①比较霸道，自己独占一行。

②高度，宽度、外边距以及内边距都可以控制。（即使更开了宽度，仍然独占一行）

③宽度默认是容器（父级宽度）的100%。

④是一个容器及盒子，里面可以放行内或者块级元素。

注意：关于第四条，虽然原则上块级元素内可以放任意元素，但是对于文字类的元素内不能使用块级元素。文字类的元素包括p标签，标题标签等。

例如：在下面这个例子中<p><div></div></p>在浏览器中会变成奇怪的结构。如下图：

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

①相邻行内元素在一行上，一行可以显示多个。

②高、宽直接设置是无效的。

③默认宽度就是它本身内容的宽度。

④行内元素只能容纳文本或其他行内元素。

关于第四条：

1虽然原则上，行内元素内可以放文本和其它任意行内元素，但是对于a标签，a标签内不能再放一个a标签，不然会造成跳转混乱。（外层a和里层a都有href链接）。

2.虽然原则上，行内元素内不能容纳文本和其它行内元素，但是特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素

在行内元素中有几个特殊的标签——<img/>、<input/>、<td>、<textarea>、<select>、<object>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。又称行内置换元素。

置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

行内块元素的特点：

①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

②默认宽度就是它本身内容的宽度（行内元素特点）。

③高度，行高、外边距以及内边距都可以控制（块级元素特点）。

④能够使用块级元素的大多数属性，比如说text-indent。

元素显示模式转换

转换为块元素：display:block;（可将a标签转换为块级元素来增加触发范围，很常用）

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

单行文字垂直居中的代码

CSS没有给我们提供文字垂直居中的代码。我们一般用一个小技巧来实现它：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。

注意，给父块设置行高=父块，也可以使父块中的行内元素在父块内居中。

要知道，行高是由上边距，下边距和文字高度组成的。如图：

行高和盒子高度的关系是：行高中的上空隙会和盒子的上边界重合，因此：如果行高=盒子高度，行高的上空隙和下空隙会把文字挤到中间。（垂直居中效果），如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下。

css的背景

通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色。

语法：

background-color属性的默认取值为transparent（透明色）。也可以手动设置该属性为transparent。

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)。使用该属性必须要与url连用，url用于指定图片地址。

格式：

注意：background-color属性和background-image属性可以共存，对于包含透明颜色的背景图片来说，加上background-color属性会有颜色叠加效果。

例：下图左边为原图，右边为设置background-color为pink的效果

背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

格式：

该属性的参考取值如下：

背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

格式：下图中x和y代表的是x坐标和y坐标。x和y可以取值为方位，精确值（以px为单位）。

参数是方位

x和y为方位时，可能取值如下：

注意：

1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top
left效果一致。

2如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

例：

指定图片在div内上下居中，靠右

指定图片在div内居中：

参数是精确单位

x和y的取值为数字加px。

注意：

1.如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

2.如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

参数是混合单位

x和y可以取值为方位和精确单位。

注意：

第一个值是x坐标，第二个值是y坐标。

混合单位可以解决单用精确值实现很麻烦的图片水平居中，向下偏移精确值的问题，如果只用精确值，必须知道详细的图片宽度，经过计算才能赋值给x使其水平居中，而如果省略x只写y值那么系统会默认你省略的是y值，无法实现你想要的效果。而用符合属性只需就能实现。

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。如果背景图像固定，那么该元素下的其它标签会滚动，但是图片不会。如果滚动到元素的边界，视觉上图片会向下逐渐消失。

语法：

该属性可以取scroll值和fixed值，取值解释如下：

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background
中。从而节约代码量。当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

背景色半透明

语法如下：下图中，background最后一个属性就是透明度。注意，这种rgba的写法可以用在任何颜色属性上，包括文字颜色，背景颜色等。

最后一个参数是alpha透明度，取值范围在0~1之间

我们习惯把0.3的0省略掉，写为background:rgba(0,0,0,.3);

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS3新增属性，是IE9+版本浏览器才支持的

但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

css三大特性

css有三个非常重要的特性：层叠性、继承性、优先级。

层叠性（即覆盖）

如果相同的选择器（注意选择器相同！）针对。设置了不同样式，层叠性用来解决样式冲突的问题。

层叠性原则：

1.样式如果冲突，遵循就近原则。

2.样式不冲突，不会层叠。

继承性

css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

注意：

1.恰当地使用继承可以简化代码，降低css样式的复杂性。

2.子元素只能继承父元素的一部分样式，这一部分样式包括以text-开头的文本样式，以font-开头的字体样式，以line-开头的线段样式。以及color属性。

width的继承

先明确一个观点，无论什么情况下，子元素不会继承父元素的高度。但是有时候，行高的继承会影响盒子高度。请在本文档内搜索，行高与盒子高度查看。

同为内联元素

我们知道，内联元素不可以设置width和height，所以其宽度默认都是auto，由内容撑起来。

跨越继承

如果父元素是行内元素，子元素是块，子元素不会继承父元素的宽度,而是会和最近的块级父元素（这里的父元素指的是它所有的祖宗元素）一样。一定要看！！！

同为块级元素

子元素默认width是100%，所以会继承父元素的宽度；但是不会继承其高度，可以通过内容把高度撑起来；

另外，给子元素添加padding和margin时，可以看到内容的宽度是父元素的宽度减去子元素的margin和padding值；

父亲是块元素，孩子是行内块元素

子元素的宽度为auto（即内容的宽度）。但是如果子元素的内容是文字，文字会根据父元素的宽度而自动换行，因此在不设置子元素宽度的情况下，子元素的最大宽度为父元素的宽度。而如果子元素的内容是图片，则子元素的最大宽度为图片当前宽度，如果图片超过了父元素的大小，则子元素的宽度也会超过父元素的宽度。

父亲是块元素，孩子是内联元素

一般的内联元素是不能设置width和height，同第一条；但是要注意，当内联元素的文字宽度超过了父元素的宽度之后，文字会自动换行。经过检验，英文不会自动换行！！！！（这是因为内联元素的排列顺序就是排列在一行，从左到右排列，碰到父元素边缘则自动换行）如下图：

如果是img或者input等可以设置width和height的类型，

对于img，如果不设置宽高则默认以图片原本大小显示，单独设置宽或者高的值则按原图等比例缩放，设置width:100%;height:100%则可以铺满整个父元素；

同为块级元素，子元素脱离文档流

1)子元素设置浮动，则宽度为auto，宽度由内容撑起来

2)子元素设置定位，position：absolute或者fixed，效果同上

3)设置定位，position：relative，这时候子元素并没有脱离文档流，所以width依旧是100%；

同为块级元素，父元素脱离文档流

对子元素继承宽度没有影响

行高的继承

在css中，为父元素指定了行高，子元素也会继承这个行高。而行高有两种写法：

1.精确值的写法：使用数字加px指定。

2.倍数的写法，使用数字进行指定。含义是当前元素的行高是当前元素文字的大小*数字。（如果不指定文字大小，浏览器会用默认的文字大小进行计算，由于各个浏览器的默认文字大小不同，因此这样做不妥）。

优先级

当同一个元素指定了多个选择器，且多个选择器针对同一个属性有不同的样式声明，就会存在优先级的问题。css遵循以下优先级规则：

1.当选择器相同，则执行层叠性。

2.当选择器不同，则根据选择器权重执行。注意和层叠性一样，不同选择器指定的样式不冲突，则不同选择器指定的样式都会存在。

选择器权重表如下，从上到下权重依次增加：

注意：

1.无论父元素的权重是什么，子元素继承来的样式权重都是0。（根据这句话可以解释为什么对于a标签或者h标签这种有默认样式的标签，直接在body中指定样式不管用。因为继承的优先级为0，而浏览器为这些元素提供的默认样式相当于用元素选择器为这些标签添加了样式，权重为1，大于从body中继承的优先级，因此这些标签继承的样式无效）

2.权重虽然会叠加，但是不会有进位。

3.!important是写在具体的样式声明语句后，分号前面。如下：

权重的叠加

复合选择器会存在权重的叠加问题，计算方法就是依照权重表做加法，注意，权重表的权值不是二进制，不会进位！因此同样是元素选择器，ul
li的权重大于li的权重。

举例：

div ul li的权值为0,0,0,3 （0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3）

.nav ul li的权值为0,0,1,2（0,0,1,0+0,0,0,1+0,0,0,1=0,0,1,2）

a:hover的权值为0,0,1,1 [0,0,0,1（a为元素选择器）+0,0,1,0（:hover为伪类选择器）]

盒子模型

页面布局要学习三大核心,盒子模型,浮动和定位.学习好盒子模型能非常好的帮助我们布局页面。

网页中的盒模型

火狐中选择了元素就可以看到盒模型，google也类似：

网页布局的本质

网页布局的步骤如下：

1.先准备好相关的网页元素，网页元素基本都是盒子 Box 。

2.利用CSS设置好盒子样式，然后摆放到相应位置。（比如设置span，div的宽高，背景属性等）

3.往盒子里面装内容。（在元素标签中装入子元素，文字等）

网页布局的核心本质：就是利用CSS摆盒子。

下图中，红框圈出的部分就是盒子。

盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素它包括：外边距、边框、内边距、和实际内容（从外到内）。注意在默认情况下给元素设置宽高实际上是设置content部分的宽高！！不包含外边距，边框和内边距。

行高与盒子高度

先明确一点，行高在什么时候会影响高度：必须是在盒子中有文字或者字体图标的时候。如果盒子中只有图片（包括img元素或用背景设置图片），行高都不会影响盒子的高度！！

内联元素的行高

行内元素（内联元素）设置行高是有效果的，但是不建议这么做。虽然行内元素设置行高之后会有位置的变化，但是并没有改变盒子大小，所以再为行内元素设置背景时，还是默认高度的地方有背景。如图：

行内块或块级元素的行高

如果父亲是块级元素，子元素为行内块或块级元素。则当子元素没有设置高度或其的高度小于行高时，子元素的高度会=从父元素继承来的行高（注意这个等于是视觉上的等于）即是说：

1.当子元素没有设置高度。子元素的高度=父元素的高度。子元素内的单行文字在父元素内居中显示。并且当子元素的总行高（总行高等于行高*文本行数）超过父元素的高度时，子元素会超出父元素高度。

2.当子元素设置了高度但高度小于父元素的高度时，子元素的高度还是为自己设置的高度。但子元素文字的排列不会受影响。还是会在父元素内居中。且即使设置其高度为0，其文字还是会在父元素内居中显示。但是此时为子元素加上背景，会发现背景色只填充子元素本来设置的高度的部分。事实上包括边框等样式，都只会在背景色填充的区域体现。

边框

CSS边框属性允许你指定一个元素边框的样式和颜色。普通元素的边框包含三个样式属性，border-width(边框宽度),border-style(边框样式)，border-color(边框颜色)，可以分别设置它们。常见的border-style（边框样式）的取值为none（默认值，无边框），solid（实线），dotted（点线),dashed(虚线)

语法如下：

复合样式

border的复合写法包含三个部分，这三个部分没有先后顺序，约定俗成的顺序为border-width(边框宽度),border-style(边框样式)，border-color(边框颜色)。

简写语法如下：

要注意，css允许分开设置上下左右四个边框，分别为border-top，border-left，border-right，border-bottom。

语法如下：

表格的细线边框

在表格中分别给table，th，td加边框能实现为表格加上外边框，表头内边框和表体内边框。但单元格和单元格，table和单元格的边框会融合，会导致边框变为两倍粗。

解决办法：利用border-collapse
属性控制浏览器绘制表格边框。当border-collapse属性赋值为collapse的时候，相邻的边框会合并在一起（合并并不是融合，合并指的是有两个边框则消除掉一个边框的粗细）。

注意：要给th，td，table均加上这个属性，语法如下：

边框会影响盒子实际大小

如前文所说，元素的宽高属性实际上是元素content区域的宽高，设置了border之后，content区域宽高不变，border会将盒子撑大。边框会额外增加盒子的实际大小。因此我们的目标是让盒子保持我们想要的大小，有两种方案解决:

1. 测量盒子大小的时候,不量边框.

2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距

注意：只有行内块和块元素有上下左右内边距，而对于行内元素来说，只有左右内边距。（这是考虑兼容性的说法，事实上，有些浏览器允许为行内元素设置上下内边距）

padding属性用于设置内边距，即边框与内容之间的距离。padding属性又可以细分为四个属性，上内边距，下内边距，左内边距，右内边距。

padding属性的复合写法

可以用padding属性来直接设置上下左右内边距，格式如下：

浏览器中的padding

火狐浏览器中紫色的部分。google浏览器中绿色的部分等。

padding属性会影响盒子大小

如前文所说，元素的宽高属性实际上是元素content区域的宽高，设置了padding之后，content区域宽高不变，padding会将盒子撑大。因此要让盒子保持我们想要的大小，设定
width/height为减去多出来的内边距大小后的值即可。

paddind内边距撑开盒子的巧妙应用

看下面的解释之前，请先看前面的行高与盒子高度的关系。

让元素按照字数的多少自适应宽度的实现方法：不给元素设定宽度，而是设置固定的padding值撑开盒子。（如果只适应宽度，可以不设置上下内边距而是设置父元素的高度和行高相等，来达成子元素的内容上下居中。且一定要注意，子元素只会从父元素那里继承行高而不是高度，（具体的宽高继承规范情况继承那一节）因此如果父元素的高度不等于行高，子元素从父元素那里继承来的行高也不会等于父元素的高度，视觉效果上就是子元素中的文字没有在父元素中上下居中。新浪网的做法是设置子元素的上下内边距来撑开子元素的盒子，使子元素的内容在父元素中上下居中）

看到这里请看margin使子元素居中。再看两种padding，margin两种居中的比较。

paddind不会撑开盒子的状况

如何盒子本身没有指定width属性, 则此时padding不会撑开盒子大小.

父元素和子元素都是块级元素

假设父元素和子元素都是块级元素元素，给子元素设置了padding值以后，父元素的宽高是肯定不会变化的，子元素的高度一定会被padding撑开，但是子元素宽度的情况不一样：

1.如果没有给子元素指定宽度或高度，子元素会继承父元素的宽度，但是不会继承高度。那么此处：

（1）对于子元素来说，子元素的padding值会影响到子元素的高度(此处的高度指的是视觉上盒子的高度)，子元素的高度为auto(子元素内文字或图片的高度)+padding值.。但是子元素的宽度不会改变（此处的宽度同样指的是子元素盒子的宽度）子元素的content部分的宽度变为原宽度-padding值。如下图：a盒子（此处已将a变为行内块）的高度变成了加上上下padding值的结果，但是a盒子的宽度没有变，而a盒子的content部分的宽度由200变为了200-60=140px。

2.如果给子元素设置了宽高，那么子元素的padding值会影响到子元素的宽度和高度(此处的宽度和高度指的是视觉上盒子的宽度和高度)，子元素的高度为原高度+padding值.。子元素的宽度为原宽度＋padding值。如下图，a盒子（此处已将a变为行内块）的高度变为了加上上下padding值后的结果，a盒子的宽度也变为了加上左右padding值后的结果。

父元素为块级元素，子元素为行内块元素

由前面的宽度的继承可得。行内块继承的宽度为auto，分两种情况讨论。

1.当行内块中只有文字

（1）当子元素的宽度+左右padding值<父元素的宽度时，子元素设置padding后的宽度（注意这里说的宽度指的是背景颜色能填充的部分）为子元素原本的宽度+padding值。（盒子模型变大，且能在背景色上体现出来）如下图：

（2）当子元素的宽度+左右padding值>父元素的宽度时，子元素设置padding后的宽度为父元素的宽度。如下图

当行内块中有图片时，子元素设置padding后盒子模型会变大。盒子模型的宽度会变为图片的宽度+padding的宽度。但是多出来的宽度不会有背景色，视觉效果是图片向内偏移了。如果图片的宽度＋padding值大于了父元素的宽度，图片会超出父元素。如下图：虽然设置了padding值（图中浅紫色区域），和文字相同的情况是，内容区域移动（对于文字来说，内容区域是放文字的地方，对于图片来说是放图片的地方），不同的情况是padding所在区域背景色不变。

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。和padding高度相似，margin也有四个属性，上外边距，下外边距，左外边距，由外边距：

margin的复合写法

注意：只有行内块和块元素有上下左右外边距，而对于行内元素来说，只有左右外边距。（这是考虑兼容性的说法，事实上，有些浏览器允许为行内元素设置上下外边距）

margin的复合写法和padding一模一样，请参考padding。

外边距让块级元素水平居中

设置上下外边距为auto不能使盒子垂直居中！！！！

外边距可以让块级盒子水平居中，但是必须满足两个条件：

（1）盒子必须指定了宽度（width）。

（2）盒子左右的外边距都设置为auto。

常见的写法如下，注意第二种把上下外边距也设置为auto了：

行内或行内块元素居中

即使设置左右边距为auto，行内或行内块元素也不能水平居中，给父元素设置text-align为center能使行内或行内块元素水平居中。

margin使子元素水平居中

可以利用margin属性实现子元素左右居中，且依照margin的大小改变子元素的内容宽度。

原理和padding相似，当不设置子元素的宽度，设置margin属性时，会有两种情况：

1.子元素的宽度+margin<父元素的宽度时，子元素的盒子模型变大，但是背景色填充的区域不变（注意margin是不会被背景色填充的），视觉上是子元素的宽度没有变化。但是子元素在父元素内偏移了。如下图：

2.子元素的宽度+margin>父元素的宽度时，子元素的盒子模型变大，且最大只能是父元素的宽度，因为margin属性所在区域不会被背景色填充。因此视觉效果就是子元素在父元素内水平居中了。如下图：

注意：父元素和子元素都必须是块级元素或行内块元素！！！！！！

看到这里请看paddind内边距撑开盒子的巧妙应用。再看两种padding，margin两种居中的比较。

插入图片和背景图片

1.插入图片我们用的最多，比如产品展示类，移动位置只能靠盒模型：padding margin

2.背景图片我们一般用于小图标背景，或者超大背景图片背景图片只能通过background-position。

margin不会撑开盒子

给子盒子设置父子盒子之间的margin值，不会撑开父盒子（但是如果是父元素里有两个子元素，设置两个子元素之间的margin会撑开父盒子），但是会使盒子跑出父元素。如下图，图中红框圈出来的地方是父盒子，紫色的是子盒子，由于margin（图中黄色区域），子盒子跑出了父盒子。

垂直外边距的合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。注意：水平的外边距，即左右外边距，是不会出现合并现象的。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距
margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是
margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：只给一个盒子设置margin值。

嵌套块元素垂直外边距的塌陷

子元素设置margin-top值后，子元素和父元素没有分开，margin-top值作用于父元素使父元素下移的现象称为父元素的塌陷。

对于两个嵌套关系（父子关系）的块元素，以下五种条件均满足时，父元素会塌陷：

1.父元素的上边距与子元素的上边距之间没有border。

2.父元素的上边距与子元素的上边距之间没有非空内容。

3.父元素的上边距与子元素的上边距之间没有padding。

4.父元素和子元素中没有设置定位属性（除static和relative）、overflow（除visible）和display:inline-block等。

5.父元素或者子元素都没有浮动。

简而言之，就是当父子元素未脱离文档流时，如果紧紧的挨在一起，就会造成外边距的合并。

塌陷特点

当父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。下图中内容区域指的是子盒子。

塌陷的解决方案

只需要破坏五个条件的一个即可：

1.可以为父元素定义上边框。

2.可以为父元素定义上内边距。

3.可以为父元素添加 overflow:hidden。

padding,margin两种居中的比较

使用的前提是，不设置子元素的宽度，且有以下两种情况：

1.父元素为块级元素，子元素为行内块元素，且子元素的宽度+padding/margin值之后大于父元素的宽度

2.父子元素都为块级元素，则对子元素的宽度没有约束。（因为块级子元素会继承父元素的宽度）

padding实现的文字居中，子元素的背景色还是会铺满父元素。如下图：

margin实现的文字居中，子元素的背景色只会在文字在的地方。如下图：

两者连用，能使子元素的背景色在父元素内居中，且子元素的文字离自己的背景色有一定距离

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

语法如下：

圆角属性

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius
属性用于设置元素的外边框圆角，这个属性是一个复合属性，可以跟四个值，分别是左上角、右上角、右下角、左下角。

border-radius可以分为上下左右四个属性：分别是border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。这四个属性可以分别设置。

注意：1. 参数值可以为数值或百分比的形式。注意百分比比的是宽度。

2. 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用。

原理

圆角属性的本质是拿一个半径为设定值的圆去截取对应的边角，这个圆的半径是有极限大小的，当圆的半径超过了宽度和高度的最小值，圆的半径就不会增加了。所以对于长宽为100px的div，设置圆角属性值>100px和圆角属性值=100px是一样的效果。原理图如下：

应用

画圆

将元素设为正方形，将四个角的圆角属性至少设置为宽度或高度的值，或100%；

半圆

将元素的高度设为宽度的一半，将左上角和右上角的圆角属性至少设置为元素的高度，

（大于元素高度的效果和等于元素高度的一样，具体原因请看圆角属性原理）。

圆角矩形

把元素的高度设置为宽度的一半，且四个角的圆角属性至少为宽度的一半，则能画出一个圆角矩形（大于元素高度的一半的效果和等于元素高度的一样，具体原因请看圆角属性原理）。

盒子阴影

CSS3中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

各属性的说明如下：

注意：

1.区分blur和spread属性，blur是阴影模糊的程度，spread是阴影的大小。

2. 第六个属性的默认值是外阴影(outset),
但是不可以写这个单词,如果要设置外阴影只需省略该属性即可。如果需要修改外阴影为内部阴影才需要为这个属性设定值为inset。

3.盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

各属性值的解释如下：

浮动

CSS
提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流），浮动，定位。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及父元素的边缘或其他浮动元素的边缘。

语法：

属性的具体值如下：

标准流

所谓的标准流: 就是标签按照规定好默认方式排列。规则如下：

1.块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em等

浮动

为什么需要浮动

如何让多个块级盒子(div)水平排列成一行

如果用inline-block实现，元素之间必有空隙。这个空隙不是margin，padding。无法消除。就算限定了父元素的宽度等于n个行内块元素的宽度也不能消除缝隙，且由于宽度不够，部分子行内块会掉落到下一排。如下图，子元素的宽度为100，父元素的宽度为300px，由于缝隙加上子元素的宽度>300，因此最后一个行内块会掉下去。

使用浮动则可以轻松做到。

如何实现两个盒子的左右对齐

使用浮动可以轻易做到，如下图，绿盒子float:left,蓝盒子float:right。

总结

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。
因为浮动可以改变元素标签默认的排列方式。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1. 浮动元素会脱离标准流(脱标)

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性.

浮动元素会脱离标准流

1.浮动会使原本的元素浮起来并移动到指定位置（想象元素向人的方向漂浮)

2.浮动的元素的原本位置会被其他元素占据。

如下图：因为粉色盒子浮动了，紫色盒子会上移占据原本粉色盒子的位置,但是粉色盒子float:left之后会在与三维方向轴的x轴（也就是屏幕指向人的方向）浮动，所以粉色盒子在紫色盒子的上面;

浮动的元素会一行内显示并且元素顶部对齐

1.多个浮动的元素之间没有空隙

2.当父元素宽度不够，子元素会掉到下一排。（如果是定义在body中的元素，拖动body的可视区直至可视区小于在body中浮动元素的总宽度时（只包括body的亲儿子元素），多出的浮动元素会掉到下一排。

如果多个盒子都设置了浮动，则它们会按照顶端对齐排列。如果父元素的高度小于子元素的高度，子元素会超出父元素但不会掉到下一排。

浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

1.如果不给块级元素加上宽度，一个块级元素浮动之后的宽度会变为auto（即内容的宽度），而不是继承父元素的宽度。这证明了浮动的元素不是块级元素

2.可以给浮动的元素加上高度属性，这证明浮动的元素不是行内元素。

如图，这个div没有设置宽度，本来应该继承body的宽度。但是加上浮动属性之后，宽度为auto（对于这个div就是文字的宽度)。

浮动布局注意点

1. 浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

清除浮动

为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度（比如说新浪网中的新闻页面，由于不同新闻的文字长度不同，因此不会给父盒子设定高度），但是子盒子浮动又不占有位置，最后导致父级盒子高度为0，就会影响后面的标准流盒子。

清除浮动

语句

清除浮动的语法如下，其中clear有三个值，left，right，both。对应会清除float:left,float:right,float:left+float:right。我们实际工作中，几乎只用
clear:
both。清除浮动的策略是闭合浮动：只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。

清除浮动的本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响，清除浮动的方法有：额外标签法也称为隔墙法，给父级添加
overflow
属性，给父级添加after伪元素，给父级添加双伪元素。其中额外标签法和伪元素法和双伪元素法实质上都是在子元素的右边或左右两边放上块级元素来将浮动的元素和其余元素隔开，通过闭合浮动来清除浮动对其余标准流元素的影响。

清除浮动的方法

额外标签法

就是在最后一个浮动的子元素后面添加一个额外块级元素标签,
在该标签上添加清除浮动样式。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。

由于用此法清除浮动会影响页面结构，因此在实际工作中不常用此法。

清除浮动 —— :after 伪元素法

:after
方式是额外标签法的升级版。也是给父元素添加如下语句，：after伪元素法的本质是利用伪元素给父元素的右边添加一个块级元素。

.clearfix:after {

/*伪元素必须要写content*/

content: “”;

/*必须是块级元素才能闭合标签*/

display: block;

/*不希望看到伪元素*/

height: 0;

/*清除浮动的影响的语法*/

clear: both;

/*不希望看到伪元素*/

visibility: hidden;

}

.clearfix { /* IE6、7 专有 */

*zoom: 1;

}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝网、网易等。

清除浮动 —— 双伪元素清除浮动

给父元素添加如下语句即可，双伪元素法的本质是利用双伪元素在父元素的左边和右边添加块级元素。

.clearfix:before,.clearfix:after {

/*伪元素必须要写content*/

content:"";

/*如果给两个伪元素都加上display:block；两个伪元素会各独占一行，在父元素的最前端（在父元素的最前端是因为父元素的内容区域浮动，不占有位置），起不到闭合父元素的作用（闭合父元素必须要闭合父元素的后端）。使用display：table可以让块级的伪元素居于一行，一个在前，一个在后*/

display:table;

}

.clearfix:after {

/*清除浮动的影响的语法*/

clear:both;

}

.clearfix {

/* IE6、7 专有 */

/*IE6,IE7*/

*zoom:1;

}

 优点：代码更简洁

 缺点：照顾低版本浏览器

 代表网站：小米、腾讯等

定位

为什么需要定位

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式（position）+边偏移（left，top，right等）。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

静态定位static

静态定位是元素的默认定位方式，无定位的意思。

语法：

静态定位按照标准流特性摆放位置，它没有边偏移。

静态定位在布局时很少用到。

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）（即是说，给相对定位的盒子加偏移，它会相对于自己原来的位置移动）。

相对定位的特点：

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。如下图：

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

如下图，粉色的盒子设置了相对定位，top100，left100。粉色盒子相对于原来的位置偏移，并且保留了自己原来的位子。因此紫色的盒子没有跑上去。

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

绝对定位的特点：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。（脱标）

子绝父相

子级是绝对定位的话，父级要用相对定位。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

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

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

1.left:50%;：让盒子的左侧移动到父级元素的水平中心位置。

2.margin-left:-100px;：让盒子向左移动自身宽度的一半。

固定定位fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：
可以在浏览器页面滚动时元素的位置不会改变。

语法：

固定定位的特点：（务必记住）

1.以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系。不随滚动条滚动。（意思是一直固定在可视窗口的固定位置）

2.固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

绝对定位的盒子居中

固定定位应用： 固定在版心右侧位置。

小算法：

1.让固定定位的盒子left: 50%.走到浏览器可视区（也可以看做版心）的一半位置。

2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置。

就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。粘性定位可以用于实现元素吸顶效果（当屏幕滑动超过一定距离，元素就贴着屏幕顶端）

语法：

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持。

元素吸顶效果的实现步骤：

1. 用margin-top设置屏幕离顶端的距离。

2. 设置position：sticky；top:0;

   由于粘性定位的兼容性太差，一般使用js实现这种效果。通过判断滚动居离来设置元素的定位方式即可。

边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right4个属性。

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)。

语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxJMND63-1618130722383)(media/96f57b306137dd8ef3913debb2453bc8.png)]
1.数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上

2.如果属性值相同，则按照书写顺序，后来居上

3.数字后面不能加单位

4.只有定位的盒子（absolute，relative，fixed）才有z-index属性

定位特殊特性

定位盒子具有行内块的特性

绝对定位和固定定位也和浮动类似。一旦给元素添加了绝对或者固定定位的元素，元素都会具有行内块的特性。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。（相当于行内块）

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。（相当于行内块）

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（在前面margin部分外边距塌陷有详细列出不会塌陷的情况）。

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。
文字会围绕浮动元素。具体如下图：

但是绝对定位（固定定位）会压住下面标准流所有的内容。如下图：

元素的显式与隐藏

操纵一个元素显式与隐藏，总共有三种方法。

1.display显示隐藏，隐藏后的元素不保留原来的位置。

2.visibility显示隐藏，隐藏后的元素保留原来的位置。

3.overflow溢出显示隐藏，仅隐藏超出的部分。

display 属性

display属性用于设置一个元素应如何显示。

display:none；隐藏对象

display：block；除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。

visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility：visible;元素可视

visibility：hidden;元素隐藏

visibility隐藏元素后，继续占有原来的位置。

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）
时，会发生什么。该属性的各个值如下：

精灵图

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS
Sprites、CSS
雪碧）。精灵图的核心原理就是将网页中的一些小背景图像整合到一张大图中，通过background-position来控制大图片显式的区域，这样服务器只需要一次请求就可以了。

精灵图（sprites）的使用

1.精确测量小图片的宽高，当做元素的宽高。

2.在background中引入图片，图片需要设置no-repeat。

3.把大图片的左顶点记为坐标0,0精确测量小图片的上边线和左边线相对于大图片的位置，上边线的距离记为Y，左边线的距离记为X。对应的background-position的值为负X和负Y.

字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。字体图标的本质是字体。可以自由变换颜色和任意放大大小（不会失真）。

如果遇到一些结构和样式比较简单的小图标，就用字体图标。

如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的使用

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

1.字体图标的下载

2.字体图标的引入（引入到我们html页面中）

3.字体图标的追加（以后添加新的小图标）

下载

以阿里为例。

1.选择自己喜欢的图标，添加入库。

2.在库中，将图标添加至项目（非常重要，方便一个网站中后续图标的更新）

3.点击进入相应的项目，点击下载至本地。

4.将下载下来的文件放入网页的根目录。

引入

打开demo_index.html，即可看到详细使用方法。

额外提一种转义字符的写法，这种写法会用在伪元素引用字体里面。如下图的icon，保留它的后四位,加上转义符引用，’\e697’即可引用该元素。在伪元素的content中，写&#xe697是没有办法引用的。

更新

按照下载步骤，将新图标添加到旧项目中，然后重新下载字体并引入即可。

css三角形

网页中常见一些三角形，使用 CSS
直接画出来就可以，不必做成图片或者字体图标。如果把一个元素的长宽都设置为0（一定要设置为0），然后将元素的边框设置成不同颜色，可以看出四个边的边框实际上是四个三角形。

因此只需要把想要设置成三角形的边框设置成目标颜色，其余的边框设置成透明色，就能出现一个三角形。

标准写法如下：其中字体大小和行高设置为0是为了兼容低版本的浏览器。

div {

width: 0;

height: 0;

//为了兼容低版本浏览器

line-height: 0;

font-size: 0;

border: 50px solid transparent;

border-left-color: pink;

}

步骤

1.先写一个标准的盒子，设置好盒子的宽高。

添加一个子元素作为三角形的载体，通过css设置好三角形后，利用绝对定位给三角形定位。

用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

更改用户的鼠标样式。

表单轮廓。

防止表单域拖拽。

鼠标样式 cursor

该属性用于设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值如下：

属性值	描述
default	默认白箭头
pointer	小手
move	十字移动箭头
text	文本
not-allowed	禁止

轮廓线outline

给表单添加 outline: 0; 或者 outline: none;
样式之后，就可以去掉选中状态默认的蓝色边框。

防止拖拽文本域 resize

实际开发过程中，是不允许用户对文本域进行放大缩小的，因此要禁止用户拖拽。语法如下：

vertical-align 属性应用

经常用于设置图片或者表单(行内块元素）和文字垂直对齐。该属性用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

该属性有下列值：

默认值下，同一元素内的图片和文字会相对基线对齐。因此，图片的下边对应的不是所有文字的最低端，而是大多数文字的最低端。

解决图片底部默认空白缝隙问题

当将图片放在一个盒子中，只为图片设置宽高时。按常理父元素的宽高应该和子元素相同，但是为父元素添加上边框时，发现图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加vertical-align:middle|top|bottom等。（提倡使用的）

2.把图片转换为块级元素display:block;

溢出的文字省略号显示

1.单行文本溢出显示省略号–必须满足三个条件

/*1.强制文本在一行显示，white-space的默认属性为normal，表示文本自动换行显式。*/

white-space:nowrap;（默认normal自动换行）

/*2.超出的部分隐藏*/

overflow:hidden;

/*3.文字用省略号替代超出的部分，text-overflow有三个值，默认值为clip，表示剪裁掉超出的部分。ellipsis表示用省略号代替被剪裁的部分。字符串（任意）表示用自己定义的字符串代替被剪裁的部分*/

text-overflow:ellipsis;

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，
适合于webKit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;

text-overflow: ellipsis;

/* 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 使用省略号的文本的行数，如果不是最后一行，需要控制元素的高度把后面的行裁掉
*/

-webkit-line-clamp: 3;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;

常见布局技巧

1.margin负值运用

margin负值可以应用于为多个没有间距的盒子设定边框的情形。原本相邻的两个盒子同时设置边框时，两条相邻的边框会合并变成两倍粗的边框。但如果给每个盒子的margin-left设置成-边框宽度，那么靠右边的盒子的左边框会压住靠左边的盒子的右边框，使相邻的边框视觉上变回一倍粗细。

这样做的原理是css是逐个元素设置样式的，当第一个元素向左移动边框长度的margin值之后。第二个盒子会首先float：left，紧紧挨着第一个盒子。接着在向左移动边框长度的margin值，刚好压住第一个盒子的右边框。

实现步骤：

1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可，要注意没有加定位的盒子（relative，absolute，fixed）无法读取z-index属性。（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index），否则对于中间的盒子来说，鼠标悬停的效果会变成三条边。

2.文字围绕浮动元素

如下图布局，只需要在左边放一个盒子，在右边放一个盒子，然后让左边的图片盒子左浮动即可。根据浮动的特性，右边盒子虽然会占据左盒子的位置，但是浮动的盒子（左盒子）不会压住标准流盒子（右盒子）中的文字，因此能实现下图中的效果。

1.需要给大盒子设置宽高。

2.需要给左侧盒子设置宽高。

3.不需要给右盒子设置宽度。

3.行内块巧妙运用

如下图的翻页效果可以均使用行内块来实现，将链接转化为行内块。这样做的好处是：

1.行内块元素自带间距。

2.给父盒子设置text-align:center,则所有的盒子均会居中。

4.CSS三角强化

如果想实现如下效果，需要注意两步：

1.用一个元素放置价格，设置成长方形

2.用伪类或者子元素做一个三角形，将伪类或子元素的宽高设置为0，top边的长度设置为长方形元素的高度，颜色设置为透明（transparent），将right边的长度设置为top边的一半，颜色设置为另外一边元素（写着原价的元素）的颜色。（在此图中为白色）

3.然后将这个三角形的定位设置成rigth:0,top:0（相对于长方形元素，即折扣价格元素定位），遮住长方形元素的右下角，以此来实现梯形元素的效果。

width: 0;

height: 0;

border-color: transparent \#fff transparent transparent;

border-style: solid;

border-width: 22px 8px 0 0;

5.css初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体\9ED1\4F53

宋体\5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1

水平垂直居中

单行文字和行内块的水平垂直居中

单行文本的水平垂直居中，或者行内块的水平垂直居中，直接用行高=高度+text-align：center实现即可。

核心语法：在父元素上加：

text-align: center; /*实现水平居中*/

line-height: 200px; /*实现垂直居中*/

如果img和文字居中后，文字不在img中间，那么给img加上vertical-align:middle即可。下图左图是加之前，右图是加之后。

多行文本水平垂直居中

元素中多行文本的水平垂直居中建议使用上下左右padding，但是一般如果文字填不满元素都是不用垂直居中的。设置了下padding之后，如果文字填不满元素，文字会靠上。若文字填满元素，就是上下左右居中的效果。

核心语法，给父元素添加：

padding:10px;（此处的数字和单位自己设置）

子元素在父元素内居中

定位+margin负

此法的优点是：兼容性好，此法的缺点是，一旦子元素宽度变化，margin值需要重新设置。由于margin使用百分比时，是相对于父元素的百分比，因此，此处必须用px。则子元素宽高一变，此处的margin值必须重新计算

核心语法：

给父元素添加：

position:relative;

给子元素添加：

positon:absolute;

top: 50%;

left: 50%;

margin-left: -元素宽度/2px;

margin-top: -元素高度/2px;

定位+translate

此法是css3
transform属性出来之后对定位＋margin负方法的改版，优点是子元素宽高改变以后，无需改变translate的值。缺点是无法兼容ie9以下浏览器。

核心语法：

给父元素添加：

position:relative;

给子元素添加：

positon:absolute;

top: 50%;

left: 50%;

transform:translate(-50%,-50%);

定位+margin：auto

将left和right设置为0，再加上margin:0 auto可以使元素水平居中。

将top和bottom设置为0，再加上margin:auto 0可以使元素垂直居中。

将left，right，top和bottom设置为0，在加上margin:auto可以使元素水平垂直居中。

注意：子元素必须要明确指定宽高，才能用auto实现居中。

核心语法：

给父元素添加：

position:relative;

给子元素添加：

positon:absolute;

top: 0;

bottom:0;

left: 0;

right:0;

margin:auto;

width:100px;

height:100px;

HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

HTML5新增的语义化标签

<header>：头部标签

<nav>：导航标签

<article>：内容标签（包含大量文字的文字可以用此标签）

<section>：定义文档某个区域（比如说，以前包裹多个li盒子的div可以替换成section）

<aside>：侧边栏标签

<footer>：尾部标签

注意：

1.这种语义化标准主要是针对搜索引擎的。

2.这些新标签页面中可以使用多次。

3.在IE9中，需要把这些元素转换为块级元素。

HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash
和其他浏览器插件。

1.音频：<audio>

2.视频：<video>

视频标签

HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，各个浏览器支持的视频格式是不同的。由下图可以得知，mp4格式是支持的最好的。

为了兼容早期的火狐浏览器和opera浏览器，有时需要为同一个视频准备MP4和ogg两个版本，并使用下面的兼容性写法：

<video controls=“controls” width=“300”>

<source src=“move.ogg” type=“video/ogg”>

<source src=“move.mp4” type=“video/mp4”>

您的浏览器暂不支持<video>标签播放视频

</video>

video的常见属性如下：

其中在google和firefox浏览器中，如果要使autoplay:autoplay属性生效，必须要添加muted:muted属性才行。和普通的组件一样，video标签可以在style中设置宽高，display等属性。但是下表中除了width和height属性之外，其他的所有属性都必须写在标签内。

HTML5
在不使用插件的情况下，也可以原生的支持音频格式文件的播放，各个浏览器能支持的音频格式是不同的，其中，mp3格式所有浏览器都支持，因此，尽量使用mp3格式的音频。

语法如下：

< audio controls=“controls” >

<source src=“happy.mp3” type=“audio/mpeg” >

<source src=“happy.ogg” type=“audio/ogg” >

您的浏览器暂不支持 <audio> 标签。

</ audio>

audio标签的属性值如下：

1.音频标签和视频标签使用方式基本一致

2.浏览器支持情况不同

3.谷歌浏览器把音频和视频自动播放禁止了

4.我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）

5.视频标签是重点，我们经常设置自动播放，设置循环和设置大小属性。一般来说不使用controls控件。

HTML5新增的input类型

要注意，这些检验必须要在有表单提交的情况下，才能进行校验（点一次提交按钮就对表单域内所有input型校验一次）。如果要一边填写一边校验，需要使用正则。

CSS3 新特性

选择器

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1.属性选择器。

2.结构伪类选择器。

3.伪元素选择器。

注意：类选择器、属性选择器、伪类选择器，权重为10。

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素。

nth-child(n)

区别：

1.E: nth-child 对父元素里面所有孩子排序选择（序号是固定的）
先找到第n个孩子，然后看看是否和E匹配

2. E:nth-of-type
对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素（行内元素），而不需要HTML标签，从而简化HTML结构。最常用的伪元素是：：before和：：after。

语法：

element：：before{}

element：：after{}

注意中间不能有空格！！”

注意：

1.before和after创建一个元素，但是属于行内元素。before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。

2.新创建的这个元素在文档树中是找不到的，所以们称为伪元素。

3.before和after必须有content属性，如果伪元素内有内容，就写在content中，不然就写content:’
’。

4.伪元素选择器和标签选择器一样，权重为1。

伪元素一般会和定位一起使用

伪元素清除浮动

具体请看浮动部分的清除浮动节，有详细解释。

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box。

可以分成两种情况：

1.box-sizing:content-box盒子大小为width+padding+border（以前默认的）

2.box-sizing:border-box盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了，我们也不必用设计原有的布局宽度-border和padding来计算盒子的width了。（前提padding和border不会超过width宽度）

css3其它特性

filter:blur()之元素变模糊

语法：

filter: 函数(); 例如：filter: blur(5px); blur模糊处理，数值越大越模糊。

calc函数:css计算宽度

calc()，此CSS函数让你在声明CSS属性值时执行一些计算。如，下面这种写法可以让子元素的宽度始终是父元素的宽度-80px，当父元素宽度变小，子元素宽度会相应变化，如下图中例子，当父元素宽度小于80，子元素宽度会为0，但是文字还是能显式出来。只是一行只显示一个文字（只针对中文，英文字母不会自动换行）。

括号里面可以使用±*/来进行计算。

注意：

运算符前后一定要有空格！！

CSS3过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。如果不考虑兼容性，不用在写匀速运动和缓冲运动框架就能实现元素的多个属性同时运动变化，元素的多个属性链式运动变化等效果，真是极好的。（当然为了兼容ie还是得老老实实写运动框架，眼泪）

我们现在经常和:hover一起搭配使用。

语法：

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

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都同时变化过渡，写一个all就可以。如果要让属性链式过渡，下面的写法是让元素宽度变化之后高度再变化。

transition：width 1s ease 1s,height 1s ease 1s;

2.花费时间：单位是秒（必须写单位）比如0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

小米55px*55px

京东对照着写

2D转换

2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

现在让一个元素移动的方法有3种：

1.margin

2.translate

3.absolute。

margin和absolute都会影响其余元素的排布。而translate移动后的元素不会影响其余元素的排布。

语法：

注意：上述提到的三种方法：margin，translate，absolute，都可以配合transition进行使用，有元素运动的效果。如果用relative对元素进行移动，虽然也能和translate一样，不影响其余元素的排布进行移动。但是并不能配合transition一起使用。

重点：

1.translate最大的优点：不会影响到其他元素的位置

2.translate中的百分比单位是相对于自身元素的translate:(50%,50%);这个特性可以配合top，left实现元素居中。代替原版的margin部分，由于margin的百分比是相对于父元素来说。因此，在居中写法中，margin必须使用px单位的数值。这样也导致一旦元素宽高改变，margin值必须重新设置才能让元素水平垂直居中。如果用translate则可以避免这样的问题。如下图：

3.对行内标签没有效果。

2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法：

transform:rotate(度数)//设置度数

transform-origin: x y;//设置旋转中心点

rotate注意：

1.rotate里面跟度数，单位是deg比如rotate(45deg)。

2.角度为正时，顺时针，负时，为逆时针。

3.默认旋转的中心点是元素的中心点。

transform-origin注意：

1.注意后面的参数x和y用空格隔开

2.xy默认转换的中心点是元素的中心点(50% 50%)。

3. xy可以是百分比（相对于自身），像素或者方位名词（top bottom left right
center）

2D转换之缩放scale

只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform:scale(x,y);

注意：

1.注意其中的x和y用逗号分隔，x,y有严格的顺序之分。transform:scale(1,1)
：宽和高都放大一倍，相当于没有放大。transform:scale(2,2) ：宽和高都放大了2倍

2.transform:scale(2)
：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)

3.scale中只能放数字，不跟单位，不能是负数。若scale中的数字小于1，相当于缩小。如transform:scale(0.5,0.5)：长宽都缩小到原来的一半。

4.sacle缩放最大的优势：相对于直接设置元素长宽来设置缩放，scale缩放有两大优势：

1.可以设置转换中心点缩放，默认以中心点缩放的。而宽高属性默认是参考上边界缩放的。但是如果给元素加上居中定位属性再扩大宽高，它扩大后仍然会相对于父元素居中。看起来就和scale的效果一样。

2.不影响其他盒子。

2D 转换综合写法

有时，我们需要用2D转换的综合写法。综合写法的好处是：

1.写起来更简单。

2.可以实现多个transform效果，单条写只会保留最后一行transform效果。

综合写法需要注意：

1.同时使用多个转换，其格式为：transform:translate()rotate()scale()…等，

2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向，这时再执行位移就会和预想中的位移方向完全相反）

3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

动画

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

定义动画

@keyframes 动画名称 {

0%{

width:100px;

}

20%{

width:110px;

}

100%{

width:200px;

}

}

注意：

1. 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

0%是动画的开始，100%是动画的完成。0%，100%也可以写成from，to。这样的规则就是动画序列。百分比是用来规定变化发生的时间的，若动画的持续时间为2s，25%代表在25%*2s=0.5s时需要达到的效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

调用动画

在需要调用该动画的元素中写下面两行语句：

/*调用动画*/

animation-name:动画名称;

/*持续时间*/

animation-duration:持续时间;

属性	描述
@keyframes	规定动画。
animation	动画属性的综合写法，除了animation-play-state属性其余属性均可以写在这里面。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”。常用的还有linear，匀速曲线。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal“,常用的还有alternate，逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards，默认是backwards。如果播放次数是无限次，该属性会失效。

动画常用属性

3D转换

3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform:translateX(100px)：仅仅是在x轴上移动。

translform:translateY(100px)：仅仅是在Y轴上移动。

translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）。往外是正值（往人的方向），往里是负值。

transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离。

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

透视 perspective

加上透视，才能看到近大远小的效果。两个相同大小的div如果设置了不同的translate（z）。加上透视后，div的大小不同。这就是近大远小的体现。在3d旋转的时候，加上透视后能看到明显的立体效果。

透视被写在被观察元素的父盒子上面。单位是像素。

注意，默认的视点是在盒子正中央，因此如果元素在盒子最左边，就会有一定角度的偏移。

解决方法：用一个外盒子刚好套住内盒子，然后把透视加到这个外盒子上。

perspective属性的值叫做视距。视距就是一个距离人的眼睛到屏幕的距离。视距越大，则被观察的物体越小。视距越小。则被观察的物体越大。视距和z轴的区别如下：

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。

3D旋转rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。

transform:rotateX(45deg)：沿着x轴正方向旋转45度。

transform:rotateY(45deg)：沿着y轴正方向旋转45deg。

transform:rotateZ(45deg)：沿着Z轴正方向旋转45deg。

transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可）。

例如:

transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg

transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg

左手准则

x轴左手准则

左手的手拇指指向x轴的正方向。

其余手指的弯曲方向就是该元素沿着x轴旋转的方向。

y轴左手准则

左手的手拇指指向y轴的正方向。

其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）。

z轴

z轴顺时针方向为正。

3d导航栏

如果移动bottom盒子的z轴，移动后中心点在front盒子的中线上，那么中心点不在立方体的中心点上，旋转后立方体会偏移原来的位置（从图中可推测正好在原来盒子的下方）

如果移动front盒子的z轴，移动后中心点还在原来front盒子所在位置的中线上，那么中心点正好在立方体的中心点上，旋转后立方体会保留原来的位置。

浏览器私有前缀

-moz-：代表firefox浏览器私有属性。

-ms-：代表ie浏览器私有属性。

-webkit-：代表safari、chrome私有属性。

-o-：代表Opera私有属性。