1.html

实体

网页中需要些特殊符号，使用html中的实体，语法为:    &实体名字；

例如：

     >    <

meta标签：

description：用于指定网站的描述，显示在结果页面

http-equiv：用于重定向，时间+网址

语义化标签

<strong></strong>

<blockquote></blockquote>长引用，<q></q>短引用

块元素和行内元素

块元素中可以放任何东西（<p>内什么都不能放）

行内元素是不可以使用width和height来设置

我们可以使用display来设置元素显示的类型：

inline表示将元素设置为行内元素

block表示将元素设置为块元素

inline-block（尽量不用）表示将元素设置为行内块元素，可以设置宽高但是不会独占一行

none元素不在页面中显示

visiblity用来设置元素的显示状态

visible默认值，元素在页面中正常显示

hidden元素在页面中隐藏，不显示，但是依旧占据位置

列表

无序列表<ul>

有序列表<ol>

自定义列表<dl>

list-style:设置样式

超链接

<a>是一个行内元素，其中可以嵌套任何元素（除自身）

其中的href属性为跳转路径，如果设置为#，返回顶部。href="#"

如果设置了id属性，那么我们可以在href中设置：#目标元素id值，进行跳转

动href="javascript:;"表示一个空的跳转，也就是什么都不懂

target属性：打开超链接的方式，_self在当前页面打开,_blank新页面打开

路径：

./当前文件所在目录    ../表示上级目录

图片标签<img>

这是一个替换元素。

src：路径，alt：显示不出来就显示alt中文字，并且搜索引擎根据alt中的内容来识别图片

内联框架<iframe></iframe>

用于向当前页面中引入一个其他页面,网页中嵌套网页

src：指定要引入的网页的路径

frameborder：边框

音视频

音视频文件引入时，默认情况下不允许用户控制

<audio></audio>替换元素，src，source都是指明地址，source可以指定失败时的文字，可以多版本文件选择，兼容性更好。

controls：允许用户控制，autoplay：设置自动播放，loop：循环播放

<video></video>替换元素，src

表格table

tr表示一行

td表示单元格

td，可以使用vertical-align和text-align修改td中内容的位置

colspan：横向合并单元格，例如

rowspan：纵向合并单元格

表格同样可以分为三个部分：thead，tbody，tfoot

如果表格中没哟砽tbody而是直接使用了tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中

tr不是table的子元素，而是tbody的子元素。

border-spacing：指定边框之间的距离

border-collapse：设置边框的合并

表单form

属性：action：需要提交的地址

input：text文本框，submit提交按钮，password密码框

提交必须要有一个name

单选按钮type=“radio”，必须是相同的name属性，checked默认选中

多选框type=“checkbox”，

下拉选项：select，option

自动补全：autocomplate=“off”

只读数据会提交：readonly 禁止数据不会提交  disabled

自动获取焦点：autofocus

CSS

设置样式：

0.通常情况下我们需要去除浏览器的默认样式，

*{margin：0；padding：0；}

1.通过标签内style属性来设置元素样式---内联样式表

例如：style="color:red;font-size:60px"

2.写到head中的<style></style>中的标签---内部样式表

div{内容}

3.样式编写到css文件中---外部样式表

在head中连接到外部样式表

例如：<link rel="stylesheet" href="./style.css">

编写到外部文件，可以使用浏览器的缓存机制，加快网页的加载速度，提高用户体验。

语法：

注释：/**/

选择器  声明块（名：值；）

选择器：

单个选择器：

元素选择器：直接把元素名写下来即可

id选择器：语法：#id属性值 { }

class选择器：语法：.class属性值{ }，多个class可以使用空格隔开

通配选择器：* { }

复合选择器：

交集选择器：语法：选择器1选择器2选择器3 { }

如果有元素选择器，必须使用其开头

并集选择器：选多个选择器

语法：选择器1，选择器2，选择器3 { }

父子兄弟选择器：

子元素选择器：语法：父元素>子元素

注意只能隔一代，孙子元素不行

后代元素选择器：语法：祖先 （空格）后代

既可以隔一代也可以多代，选择的是全部

兄弟元素选择器

选下一个兄弟 语法：前一个+后一个

选下边所有的兄弟 语法：前一个~后面所有

属性选择器

语法：【属性名】选择含有指定属性的元素

  【属性名=属性值】选择含有指定属性和属性值的元素

  【属性名^=属性值】选择属性值和指定值开头的元素

  【属性名$=属性值】选择属性值和指定值开头的结尾

  【属性名*=属性值】选择属性值中含有指定值的

伪类选择器：

不固定的元素可以使用伪类标签添加样式

开头第一个元素：    ：first-child      例如：ul>li:first-child{}

最后一个元素：        ：last-child

第n个子元素：          ：nth-child(n)  如果写n表示全选，2n表示选中偶数，2n+1为基数

    odd表示奇数，even表示偶数

以上这些伪类都是根据所有的子元素排序，如下例子第一个为span，所以如果我们设置ul>li:first-child{}就无效。因为没有第一个li

如果需要在相同类型元素中排序我们可以使用,用下述伪类选择器就可以忽略掉上栗中的span。

:first-of-type    :last-of -type      :nth-of-type

否定伪类：

：not（）将符合条件的元素从选择器中去除，如下例子：除了第三个元素都设置为绿色

超链接伪类：

：link用来表示正常的链接（不论是否访问过）

：visited用来表示访问过的链接，由于隐私的问题，所以visited伪类只能修改链接的颜色

：hover用来表示鼠标移入的状态，悬停状态

：active用来表示鼠标点击，正在点击

伪元素选择器：

表示页面中特殊的位置。使用：：例如选择第一个字母：p：：first-letter{}

：：first-letter    第一个字母

：：first-line      第一行

：：selection      表示选中的内容（鼠标选中内容）

：：before          元素的开始

：：after            元素的结束，这两个必须结合content属性使用，并且鼠标无法选中

例如：

权重

继承

单位

字体：

px：像素

em：相对于当前字体大小

rem：相对于当前html字体大小

颜色：

文档流

网页是多层结构，通过css为每个层设置样式，用户只看得到最上面一层，最下层称之为文档流，是网页的基础。我们所创建的元素都在默认在文档流中排列的

对我们来说元素共有两种状态：在文档流中，不在文档流中

元素在文档流中的特点：

块元素：独占一行，默认宽度是父元素的全部（会把父元素撑满），默认高度被内容撑开

行内元素：不会独占一行，只占自身大小，行内元素在页面中从左向右排列，如果一行中没法容纳所有元素，换到第二行自左向右排列。

盒子模型

可见框：content+padding+border

content：内容区 ，使用height，width设置长宽

padding：内边距，会影响到盒子大小，背景颜色会延伸到内边距上

border：边框：要设置边框，需要至少设置三个样式

border-width:其中还有border-xxx-width可以设定上下左右，缺省3px

border-color:同上，缺省黑色

border-style:缺省为none

margin：外边距，可以写负值，影响到盒子的实际占地大小

水平方向布局

width,,margin-left,margin-right可以设置为auto，auto的值会自动调整auto使等式成立

如果没有设置auto就自动调整margin-right来使等式满足

如果将一个宽度和一个外面距设置为auto，则宽度会调整到最大

如果三个值都设置为auto，则外边距都是0，宽度最大

如果将两个外边距设置为auto，跨度固定那么居中

垂直方向布局

如果子元素大小超过了父元素，那么子元素会从父元素中移除

我们可以使用overflow属性来设置父元素如何处理溢出的子元素

overflow：visible，缺省，hidden，scroll，auto

同时还有overflow-x,overflow-y

同时这个还可以用来设置BFC

外边距的折叠问题

相邻的垂直方向外边距会发生重叠现象

兄弟元素：兄弟元素之间的响铃外边距会取两者之间绝对值较大的

父子元素：父子之间的相邻外边距，子元素的会传递给父元素（上外边距）

  会影响到布局，需要处理

行内元素的盒模型

行内元素不支持设置宽度和高度

行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

行内元素可以设置border，垂直方向不影响

行内元素可以设置margin，垂直方向不会影响布局

这里说的不影响是指不会把其他垂直方向的元素挤到其他位置，而是会覆盖

盒子的大小

默认情况下，盒子可见框的大小由内容区决定，内边距和边框共同决定的

我们可以通过设置box-sizeing来设置盒子尺寸的计算方式（设置width和height的作用）

当我们设置为content-box时：缺省，宽高设置内容区

当我们设置为border-box时：宽高设置整个盒子可见框

border样式

border：会影响格式

outline：不会影响布局，设置轮廓线

我们可以设置阴影：不会影响布局使用box-shadow

box-shadow：左偏移量 右偏移量 模糊半径 颜色；

我们可以设置圆角，使用border-radius,参数是设置半径大小

同样可以设置椭圆，设置两个参数，第一个为x轴，第二个为y轴

这个时候需要使用/来设置椭圆

设置圆形：border-radius：50%；

浮动

通过浮动可以使一个元素向父元素的左右移动使用float设置

none：缺省，元素不浮动

left：元素向左移动

right：右浮动

这个时候我们的元素已经脱离了文档流，我们之前的等式不需要绝对成立。

浮动元素不会覆盖文字，文字会自动环绕在浮动元素周围，可以用作文字环绕图片的效果 。

元素脱离文档流之后元素的特点会发生变化。

元素脱离文档流之后元素的特点会发生变化。

块元素：

1.块元素不再独占一行

2.脱离文档流之后，块元素的宽高和高度默认都被内容撑开

行内元素：

1.行内元素脱离文档流之后变成块元素，特点同上

高度塌陷：

父元素的高度默认被子元素撑开，当子元素浮动之后，脱离文档流，无法撑起父元素的高度，导致父元素高度丢失。

解决方法（BFC）：Block Formatting Context 块级格式化环境

是css中的一个隐含属性，可以为一个元素开启BFC,开启BFC钙元素会变成一个独立的布局区域。和其他块不同。

开启后特点：1.元素不会被浮动元素覆盖

      2.元素子元素和父元素外边距不会重叠

      3. 元素可以包含浮动的子元素

开启BFC方式：设置浮动（不推荐），

将元素设置为行内块元素（不推荐）

将元素的overflow设置为非visible的值（常用）

overflow：hidden

方法2：after伪类选择器

原理：在结尾使用一个div，并且设置clear：both来消除浮动元素的影响。例如

但是这样不好。因为我们使用html来修改了我们的样式，增加了耦合，不符合理念。但是我们有伪类选择器，我们可以选择到这个元素的最后也就是box1：：after

可是这样并不能解决问题，因为：：after是一个行内元素，所以清除浮动没有任何影响，我们需要把它设置为一个块元素，所以最终方案就是：

类似的我们可以用来解决外边距重叠问题

父元素共享了子元素的margin，如果子元素设置了margin我们父元素同样会跟着子元素漂移，所以我们可以按照上述思想来解决问题，外边距重叠如下所示：

我们在box1和box2中设置一个东西撑开接口实现我们想要的效果，这个时候我们需要使用到的就是before伪类选择器，我们display设置为table可以避免出现设置为inline-block（直接当成一个字）时会出现的跳出一段距离的问题。

clearfix

直接在需要的地方添加上clearfix类即可，直接设置为table可以同时解决两个问题

Clear

用过clear属性来去除浮动元素对当前元素的影响，left：清除左边浮动元素对当前元素的一下昂，right：清除右边的影响，both：清除两侧中最大影响的那侧。设置需要清除影响的元素，而不是浮动的元素。

原理：设置清除之后，浏览器会自动为元素设置一个上外边距，一遍其位置不受其他元素影响

定位

是一种更高级的布局方式，可以把元素摆到任意位置，使用position属性来定位

可选值：  static缺省，元素是静止的没有开启定位

relative相对定位

absolute绝对定位

fixed固定定位

sticky粘滞定位

偏移量（只有开启定位了才可以使用偏移量）：

top：定位元素和定位位置上边的距离

bottom：定位元素和定位位置下边的距离

left：定位元素距离定位位置左侧的距离

right：定位元素距离定位位置右侧的距离

相对定位

开启相对定位之后如果不设置偏移量，元素不会发生任何变化。

相对定位是参照于文档流中元素本身的位置，这个操作不会使元素脱离文档流，同样也不会改变元素性质，块开始块，行内还是行内。

相对定位会提升元素的层级

绝对定位

开启绝对定位之后，如果不设置偏移量元素位置不会改变。

元素会从文档流中脱离，绝对定位会改变元素的性质。行内编程块，块的宽高被内容撑开。

绝对定位会提高元素层级。

绝对定位元素是相对于其包含块进行定位的。也就是最近的开启了定位的祖先元素。

水平方向上的布局等式需要添加left和right两个值规则和之前一样。

当出现了过度约束，如果没有auto则自动调整right，如果有auto则自动调整auto元素。left和right默认值是auto。

垂直方向上的布局等式同样要满足。

所以我们可以通过绝对定位设置正中心

包含块（containing clock）

正常情况下：就是当前元素的最近的祖先元素，没有脱离文档流的情况下

开启绝对定位情况下：包含块就是离他最近的开启了定位的祖先元素。

html，根元素，初始包含块。

固定定位

也是一种绝对定位。

唯一不同的是，固定定位永远参考与浏览器的视口（不论浏览器是否有滚动都不动）

粘滞定位（兼容性差）

和相对定位特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

当到0的位置的时候就固定不动。

元素层级

只要是定位层级就是一样的。

祖先元素的层级再高也不会盖住后代。

对于开启了定位的元素，可以只用z-index来设置元素层级，z-index需要一个整数作为参数，越大层级越高。有限显示靠下的。

字体族

color：用来设置字体颜色

font-size：字体大小

font-family：字体族（字体格式）可选值：serif衬线字体 sans-serif非衬线字体 monospace等宽字体

可以指定多个字体，使用逗号隔开，优先前面的字体生效。

图标字体（iconfont）

网页中经常需要使用一些图标，但是使用图片来引用图标，不灵活而且图片本身就较大。所以我们可以在使用图标的时候，将图标直接设置为字体，然后通过font-face来引入。

国外图标字体：font awesome

注意css和webfonts需要在同一级目录下

通过伪元素设置图标字体，在content中设置字体编码，

行高（line-height）

行高指的是文字战友的实际高度，可以通过line-height来指定行高，行高可以指定一个大小（px，em）也可以指定一个整数。如果是整数，意味着行高是字体的指定倍数。默认行高1.33。行高还经常用来设置文字行间距。

字体框

字体框就是字体的格子，设置font-size就是设置字体框的大小

解决图片底部有空白问题

默认情况下会有空白

解决方法：vertical-align

文本

text-align：文本的水平对齐

left，right，center，justify两端对齐

vertical-align：文本的垂直对齐

baseline，top，bottom，middle，直接设置值

text-decoration：设置文本修饰

none，underline，line-through，overline

white-space：设置网页如何处理空白

normal，nowrap不换行，pre保留空白，就是保留格式

案例：如何设置多余内容使用省略号展示？

案例：下拉框显示案例：p86

背景

background-image：url("");

background-repeat：repeat，repeat-x，repeat-y，no-repeat

background-position：top，left，right，bottom，center，需要指定两个值，不然第二个值默认center

同样可以通过偏移量设定背景图片，水平方向，垂直方向

background-clip：border-box：默认值，背景会出现在边框下面

padding-box：背景不会出现在边框，只出现在内容区和内边距

content-box：只出现在内容区

background-origin：边距图片的偏移量计算的原点

padding-box：默认值，background-position从内边距开始计算

ventent-box：背景图片的偏移量从内容区处计算

border-box：偏移量从边框处开始计算

background-size：向这样写可以设置原来尺寸的缩小，如果只写一个，第二个默认值是auto

cover:图片比例不变，将元素铺满

contain：图片比例不变，将图片在元素中完整显示

background-attachment：背景图片是否跟随元素移动

scroll：默认值，背景元素会跟随元素移动

fixed：背景会固定在页面中，将元素在元素中完整显示

background：背景相关的间歇，没有顺序要求，使用/隔开，background-position/background-size

注意，background-origin background-clip，origin要写在clip前面

解决图片闪烁问题（雪碧图）

下图就是一个雪碧图：特点是一次性将多个图片记载到页面中，降低了请求的次数，加快了访问速度，提升了用户体验。

渐变

渐变是图片，需要通过background-image实现

linear-gradient（）线性渐变，颜色沿着一条直线发生变化

可以指定渐变方向： to left,to right, to bottom,to top

也可以使用度数来渐变：XXXdeg

用圈来渐变：Xturn

渐变如果是定多个颜色，多个颜色默认情况下是平均分布，也可以手动指定渐变情况，数字指的是从哪开始渐变。

repeating-linear-gradient（）平铺的线性渐变，这个时候指定渐变情况表示的是一个渐变的范围（如下如所示）

radial-gradient（）径向渐变（放射性效果）

默认情况下，圆心是根据元素形状来计算，同样可以指定径向渐变大小

circle圆，ellipse椭圆，同样可以指定渐变位置（使用at）

过渡transition

通过过渡我们可以指定一个属性发生变化时的切换方式。

transition-preperty：指定要执行的过渡的属性，width，height，颜色，all等大部分都支持过渡。只要值可以计算就可以过渡。注意过渡的时候过渡前后的数值必须要有效。

transition-duration：指定过渡效果的持续时间，s，ms。注意可以分别指定时间。

transition-timing-function：过渡的时序函数，也就是动画的过渡方式

ease：缺省，慢速开始，先加速，后减速

linear：匀速运动

ease-in：加速，ease-out：减速

ase-in-out：先加速后减速

cubic-bezier：贝塞尔曲线，参数是两个点坐标，使用工具

steps：分步执行过渡效果，steps（n），表示分n步执行。

end，start表示在某个时间点的开始还是结束启动。

transition-delay：过渡效果的延迟，就是等待一段时间后执行

动画

自动触发动态效果，设置动画效果，必须要设置一个关键帧，关键帧设置了动画的每一个执行步骤。

animation-name：要对当前元素生效的关键帧名字

animation-duration：动画的执行时间

animation-delay：动画延时

animation-iteration-count：动画执行次数。infinite无限执行

animation-direction：指定动画运行的方向

normal：默认从from到to

reverse：从to到from

alternate：从frome到to，重复执行动画时反向

alternate-reverse：和上面相反

animation-play-state：设置动画的执行状态

running：默认值，执行动画

paused：动画暂停

animation--fill-mode动画的填充方式

none：动画播放完毕，回到原来位置

forwards：动画播放完毕，停止在结束位置

backwards：动画延时等待的时候，元素就会处于from的开始位置

both：结合forwards和backwards

变形 transform

变形的原点

transform-origin

通过css来改变元素的形状和位置，变形不会影响到页面的布局,,不会导致偏离文档流

平移：    translateX（）translateY （）translateZ （）

元素居中

z轴平移 translateZ

调整元素在z轴的位置，正常情况下就是调整元素到人眼之间的距离，距离越大，元素离人越近。默认情况不支持透视。如果需要看见效果，必须设置网页的视距才能看到效果。

设置视距举例：perspective：800px；

旋转

通过旋转可以使元素沿着x，y，z旋转指定的角度

rotateX（），rotateY（），rotateZ（）需要指定角度例如45deg

注意如果我们设置了视距，那么就会出现远近的透视效果，如果没设置视距就是简单旋转。

backface-visibility背面是否可见

visible：可见

hidden：不可见

设置3D变形效果

transform-style：preserve-3d

缩放scale

scaleX（），scaleY（），scale（）双方向

弹性盒flex

是css中的另一种布局手段，主要用来替代浮动完成页面的布局

可以使元素具有弹性，让元素随着页面大小改变而改变

弹性容器：

要使用弹性盒，必须要先将一个元素设置为弹性容器

通过display设置

display：flex 设置为块级弹性容器

display：inline-flex 设置为行内弹性容器

弹性容器样式：

flex-direction：指定容器中弹性元素的排列方式

row：缺省，水平排列，同时确定主轴方向，自左向右

row-reverse：反向排列，同时确定主轴方向， 自右向左

column：纵向排列，同时确定主轴方向，自上向下

column-reverse：反向纵向排列，同时确定主轴方向，自下向上

主轴：弹性元素的排列方向成为主轴

侧轴：和主轴垂直方向的成为

flex-wrap：设置弹性元素是否在弹性容器中自动换行

nowrap：缺省，不会自动换行

wrap：沿着侧轴自动换行

wrap-reverse：元素沿着侧轴反向换行

flex-flow：是flex-direction和flex-wrap的简写属性

justify-content：如何分配主轴上的空白空间，就是主轴上的元素如何排列。

flex-start：元素沿着主轴起边排列

flex-end：元素沿着主轴终边排列

center：居中

space-around：空白分布在所有元素的两侧

space-between：空白均匀分布到元素间

space-evenly：空白分布到元素的单侧

元素双方向居中

align-items：元素在侧轴上如何对齐

stretch：缺省，将元素长度设置为相同值。指的是同一行的元素长度相同，如果是不同行会有不同

flex-start：元素不会拉伸，而是侧轴起边对齐

flex-end：沿着福州的终边对齐

center：居中对齐

align-centent：侧轴空白空间分布

center：空白在两边

flex-start：空白在下边

flex-end：空白在上边

space-around：元素两边都有空白

space-between：空白在中间

align-self：用来覆盖当前弹性元素上的align-items

弹性元素：

弹性容器的直接子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素。

弹性元素样式

flex-basis：元素的基础长度

如果主轴是横向的，该值指定的是元素的宽度

如果主轴是纵向的，该值指定的是元素的高度

flex-grow：指定弹性元素的伸展系数，当父元素有多余空间时，子元素的分配方式。默认值是0，父元素的剩余空间，会按照比例分配。

flex-shrink：当父元素中的空间不足以容纳所有元素的时候，对子元素进行收缩。0表示不允许收缩，同样的值越大收缩越多。

flex：综合上述三个样式，顺序要求：flex 增长 缩减 基础

order：决定弹性元素的排列顺序，越大越后

less是css的预处理语言

less是css的增强版，通过less编写更少的代码实现更强大的功能。

less本身是无法直接执行的，需要转换成css才能执行到浏览器中

变量重名时，后面的覆盖前面的