html&css

01_introduce

实体

需要在网页中书写特殊的符号时，就要使用html中的实体（转义字符）。实体的语法：&实体的名字;

•  ； 空格
• >； 大于号
• <； 小于号
• ©； 版权符号

meta

meta主要是用于设置网页中的一些元数据，元数据不是给用户看的。

charset：指定网页的字符集

name：指定的数据的名称

content：指定的数据的内容

• keywords：网站的关键字，可以指定很多个，关键字之间用,隔开。（比如在网页上 搜索“购物”，会出现京东的网页，就是说京东这个网页包含“购物”这个关键字）
• description：指定网站的描述
• title：这个标签的内容会作为搜索结果的超链接上的文字显示

这个表示该页面会在3秒后跳转到百度页面（用得少

    <meta http-equiv="refresh" content="3;url=http://www.baidu.com">
1

语义化标签

在网页中html专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。

• 标题标签：h1—h6，一共六级标题，重要性一次递减。h1在网页中的重要性仅次于title标签，一般情况下只有一个。
• 在页面中独占一行的元素称为块元素。标题元素、p都是块元素。
• p标签表示页面中的一个段落。
• hgroup标签用来为标题分组，可以将一组相关的标题同时放到hgroup中。
• 在页面中不会独占一行的元素叫行内元素。em标签用于表示语音语调的一个加重；strong表示强调，重要内容。都是行内元素。
• blockquote表示一个长引用，q表示一个短引用。
• br表示一个换行。

块元素：在网页中一般通过块元素对页面进行布局；行内元素：主要用来包裹文字。一般情况下，会在块元素中放行内元素，但不会在行内元素中放块元素。块元素基本上什么都能放，但p元素中不能放任何的块元素。（浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正）

布局标签（结构化标签）

• header：网页的头部
• main：网页的主体部分（一个页面只有一个main）
• footer：网页的底部
• nav：网页中的导航
• aside：和主体相关的其他内容（侧边栏
• section：表示一个独立的区块，上边的标签都不能表示时就使用section。
• div：没有语义，就用来表示一个区块，目前还是主要的布局元素。
• span：行内元素，没有任何语义，一般用于在网页中选中文字。

列表

共有三种列表形式：

• 无序列表：使用ul来创建无序列表，使用li来表示列表项。
• 有序列表：ol来创建。
• 定义列表：dl来创建，dt表示定义的内容，dd来对内容进行解释说明。
• 列表之间可以相互嵌套。

超链接

超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他位置。

使用a来定义超链接，超链接也是一个行内元素，在a标签中可以嵌套除它自身外的元素。

• href：指定跳转的目标路径。它的值可以是一个外部网站的地址，也可以写内部页面的地址。

  <a href="http://www.baidu.com">超链接a>
  1

  • 可以直接将href设置为#，这样点击超链接之后页面不会发生跳转，而是转到当前页面的顶部。
  • id：唯一不重复。id属性就是元素的唯一标识，同一个页面中不能出现重复的id。
  • 可以跳转到页面的指定位置，只需将href属性设置为#目标元素的id值。

• 当我们需要跳转一个服务器内部的页面时，一般都会使用相对路径。相对路径都会使用./或…/开头。

  • ./ 当前文件所在的目录。（前面什么都不写也默认是./
  • …/ 当前文件的上一级目录。

• target：用来指定超链接打开的位置。

  • _self：默认值，在当前页面打开超链接。
  • _blank：在一个新的页面打开。

• 在开发中可以将#作为超链接的路径的占位符使用，可以使用javascript:;来作为href的属性，点击什么都不会发生。

图片标签

图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签。img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

• src：指定的是外部图片的路径（路径规则一样）
• alt：图片的描述，描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片。
• width：宽度（单位是像素
• height：高度
  • 宽、高如果只修改一下，则另一个会等比例缩放
  • ps：一般在pc端，不建议修改图片的大小，需要多大的图片就裁多大。但是在移动端，经常需要对图片进行缩放（大图缩小）

图片的格式：

• jpg：支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
• gif：支持的颜色比较少，支持简单透明，支持动态。一般是颜色单一的图片、动图。
• png：支持的颜色丰富，支持复杂透明，不支持动态。一般是颜色丰富、复杂透明图片（专为网页而生）。
• webp：谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件特别小。缺点：兼容性不好。
• base64：将图片使用base64进行编码，可以直接将图片转换成字符，通过字符的形式来引入图片。一般都是一些需要和网页一起加载的图片才会使用base64。
• 效果一样用小的，效果不一样用效果好的。

内联框架

内联框架：用于向当前页面中引入一个其他的页面。

• src：指定要引入的网页的路径。
• frameborder：指定内联框架的边缘。

音视频

audio：用来向页面中引入一个外部的音频文件。

• 音视频文件引入时，默认情况下不允许用户自己控制播放停止。
• controls：是否允许用户控制播放。
• autoplay：音频文件是否自动播放。（如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来说大多数浏览器都不会自动播放）
• loop：是否循环播放。

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件。

video：用来向网页引入视频。使用方式基本与audio一样。

02_css

css简介

网页分为三个部分：结构（html）、表现（css）、行为（js）。

css：层叠样式表，用来设置网页中元素的样式。

使用css来修改元素的样式：

• 第一种方式（内联样式、行内样式）：在标签内通过style来设置元素的样式。缺点：样式只能对一个标签生效，如果希望影响到多个元素必须要在每个元素中复制一遍，并且当样式发生变化时，维护很麻烦。ps：开发时绝对不要使用内联样式。

      
  "color: green; font-size: 50px;">夏天结束了
  1

• 第二种（内部样式表）：将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式。好处：可以同时为多个标签设置样式，并且修改时很方便，也更加方便对样式进行复用。缺点：只能对一个网页起作用，不能跨页面进行复用。

  
  1
  2
  3
  4
  5
  6

• 第三种（外部样式表）：可以将css样式编写到一个外部的css中，在head里通过link标签来引入外部的css文件。想要使用就引用，使样式可以在不同页面之间进行复用。将央视编写到外部css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载机制，提高用户体验。（最佳实践）

      "stylesheet" href="style.css">
  1

css语法

ps：注意区分html和css的注释。html是，css是/**/。

css的基本语法：

• 选择器：通过选择器可以选中页面中的制定元素。
• 声明块：通过声明块来指定要为元素设置的样式。声明块由一个一个的声明构成，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以:连接，以;结尾。

选择器

常用选择器

元素选择器：

• 作用：根据标签名来选中指定的元素。
• 语法：标签名{}
• 例子：p{} h1{} div{}

id选择器：

• 作用：根据元素的id属性值选中一个元素。
• 语法：#id属性值{}
• 例子：#box{} #reader{}

class是一个标签的属性，它和id类似，不同的是class可以重复使用，就可以通过class属性来对元素分组，可以同时为一个元素指定多个class属性，多个class使用空格隔开。

class（类）选择器：

• 作用：根据元素的class属性值选中一组元素。
• 语法：.class属性值{}

通配选择器：

• 作用：选中页面的所有元素。
• 语法：*{}

复合选择器

交集选择器：

• 作用：选中同时复合多个条件的元素。
• 语法：选择器1选择器2…选择器n{}
• ps：如果有元素选择器，必须使用它开头。

选择器分组（并集选择器）：

• 作用：同时选择多个选择器对应的元素。
• 语法：选择器1, 选择器2, …{}

关系选择器

关系的分类：

• 父元素：直接包含子元素的元素。
• 子元素：直接被父元素包含的元素。
• 祖先元素：直接或间接包含后代元素。一个元素的父元素也是它的祖先元素。
• 后代元素：直接或间接被祖先元素包含的元素。子元素也是后代元素。
• 兄弟元素：拥有相同父元素的元素。

子元素选择器：

• 作用：选中指定父元素的指定子元素。
• 语法：父元素>子元素{}

后代元素选择器：

• 作用：选中指定元素内的指定后代元素。
• 语法：祖先 后代{}

兄弟选择器：

• 作用：选择下一个兄弟。语法：前一个 + 后一个{}
• 作用2：选择下边所有的兄弟。语法：前一个 ~ 后一个{}

属性选择器

• [属性名]：选择含有指定属性的元素。
• [属性名=属性值]：选择含有指定属性和属性值的元素。
• [属性名^=属性值]：选择属性值以指定值开头的元素。
• [属性名$=属性值]：选择属性值以指定值结尾的元素。
• [属性名*=属性值]：选择属性值中含有某值的元素。

伪类选择器

伪类（不存在的类，特殊的类）：用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素…

伪类一般情况下都是:开头

以下三个伪类都是根据所有的子元素进行排序。

• :first-child 第一个子元素
• :last-child 最后一个子元素
• :nth-child 选中第n个子元素
  • n：第n个 n的范围是0到正无穷
  • 2n或even：表示选中偶数位的元素
  • 2n+1或odd：奇数位

以下三个伪类的功能和上面三个相似，不同点：它们是在同类型元素中进行排序。

• :first-of-type

• :last-of-type

• :nth-of-type

否定伪类：将符合条件的元素从选择器中去除。

• :not()

超链接的伪类

超链接的状态：1.访问过；2.访问过。

这两个只能a使用。

• :link 用来表示没访问过的链接（正常的链接）
• :visited 用来表示访问过的链接
  • 隐私的原因，visited只能修改链接的颜色。

元素都可以用的：

• :hover 用来表示鼠标移入的状态
• :active 用来表示鼠标点击

伪元素

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊位置）

伪元素使用::开头

• ::first-letter 表示第一个字母
• ::first-line 表示第一行
• ::selection 表示选中的内容
• ::before 元素的开始
• ::after 元素的最后
  • before和after必须结合content属性来使用

样式的继承

样式的继承：为一个元素设置的样式同时也会应用到它的后代元素上。

继承是发生在祖先后代之间的。继承的设计是为了开发，利用继承可以将通用的样式设置到祖先元素，这样只需要设置一次即可让所有的元素都具有该样式。

ps：**并不是所有的样式都会被继承。**例如：背景相关的、布局相关等的这些样式都不会被继承。

选择器的权重

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

发生样式冲突，应用哪个样式由选择器的权重（优先级）决定。

选择器的权重：

• 内联样式（1,0,0,0）>id选择器（0,1,0,0）>类和伪类选择器（0,0,1,0）>元素选择器（0,0,0,1）>通配选择器（0,0,0,0）>继承的样式（没有优先级）。
• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示。（分组选择器是单独计算的）
• 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。
• 如果优先级计算后相同，此时则优先使用靠下的样式。

可以在某一个样式的后面添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式。ps：开发时慎用。

各种单位

长度单位：

• 像素：
  • 屏幕（显示器）实际上是由一个一个的小点点构成的。
  • 不同屏幕的像素大小是不同的。像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样。
• 百分比：
  • 也可以将属性值设置为相对于其父元素属性的百分比。
  • 设置百分比可以使子元素随父元素的改变而改变。
• em：
  • 相对于本身元素的字体大小来计算的，根据字体大小的改变而改变。
  • 1em=1font-size。
• rem：
  • 相对于根元素（html的）的字体大小来计算。

颜色单位：

• 在css可以直接使用颜色名来设置各种颜色，但是在css中直接使用颜色名不方便。
• RGB值：通过三种颜色的不同浓度来调配出不同的颜色。
  • Red、Green、Blue
  • 每一种颜色的范围在0-255（0%-100%）之间
  • 语法：RGB(red,green,blue)
• RGBA：在RGB的基础上增加了一个A表示不透明度。
  • A的1表示完全不透明，0表示完全透明。
• 十六进制的RGB值：
  • 语法：#红色绿色蓝色
  • 颜色浓度通过00-ff
  • 如果颜色两位两位重复可以进行简写，例如：#bbffaa可以简写成#bfa
• HSL值（了解）：
  • H：色相（0-360）
  • S：饱和度 颜色的浓度（0%-100%）
  • L：亮度 颜色的亮度（0%-100%）

03_layout

文档流

网页是一个多层的结构，通过css分别给每一层设置样式，用户只能看见最顶一层，在这些层中最底下的一层称为文档流。文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。对于元素主要有两个状态：在文档流中；不在文档流中（脱离）。

元素在文档流中的特点：

• 块元素
  • 块元素在页面中独占一行，自上向下垂直排列
  • 默认宽度是父元素的全部（会把父元素撑满）
  • 默认高度是被内容撑开（子元素）
• 行内元素
  • 行内元素不会独占一行，只占自身的大小，在页面中左向右水平排列，如果一行之中不会容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）
  • 默认的宽度和高度是被内容撑开的

盒模型

css将页面中的所有元素都设置成了一个矩形的盒子，将元素设置成盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。

每个盒子都由以下几个部分组成：

一个盒子的可见框的大小，由内容区、内边距、边框共同决定。

• content：元素中的所有的子元素和文本内容都是在内容区中排列。

  • 内容区的大小由width、height两个属性来设置。
  • width的值默认是auto。

• border：属于盒子的边缘，边框里边属于盒子内部，出了边框都是盒子的外部。边框的大小会影响整个盒子的大小。

  • border-width：可以不写，一般默认都是3个像素，但最好还是写
    • 四个值：上 右 下 左**（顺时针）**
    • 三个值：上 左右 下
    • 两个值：上下 左右
    • 一个值：上下左右
    • 除了border-width还有一组border-xxx-width，xxx可以是top、right、bottom、left，用来单独指定某一个边的宽度。（下面两个也类似
  • border-color：指定边框的颜色，可以分别指定四个边框的颜色，规则一样
    • 也可以省略不写，省略了就自动使用color的颜色。
  • border-style：边框的样式，默认值是none，表示没有边框
    • solid：实线
    • dotted：点状虚线
    • dashed：虚线
    • double：双线
  • border的简写属性：通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。例如：border:solid 10px green; border-xxx也适用，只设置某一边的样式。

• padding（内边距）：内容区和边框之间的距离

  • 内边距的设置会影响到盒子的大小
  • 背景颜色会延伸到内边距上
  • 内边距的简写属性，可以同时指定四个方向，规则一样

• margin（外边距）：不会影响可见框的大小，会影响盒子实际占用空间

  • 元素的页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边框则会移动元素自身，而设置下和右外边框会移动其他元素。
  • margin-top：设置一个正值，元素向下移动
  • marin-right：默认情况下设置它不会产生任何效果
  • margin-bottom：设置一个正值，其下边的元素会向下移动
  • margin-left：设置一个正值，元素会向右移动
  • margin也可以设置负值，如果设置负值元素会向相反的方向移动
  • 简写属性的规则一样

盒子的水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。一个元素在其父元素中，水平布局必须满足以下的等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度。如果相加结果使等式不成立，则称为过度约束，等式会自动调整。调整的情况：

• 如果七个值中没有auto的情况，浏览器会自动调整margin-right值使得等式成立。

• 如果七个值中有三个值（width、margin-left、margin-right）和设置为auto：

  • 如果某个值为auto，则会自动调整为auto的那个值使得等式成立。
  • 如果将width和一侧外边距设置成auto，则宽度会调整到最大，设置为auto的外边距自动为0。
  • 如果三个值都是auto，则外边距都是0，宽度最大。
  • 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值。我们可以利用这个特点使一个元素在其父元素中水平居中。
    • 示例：width：xxxpx； margin：0 auto；

盒子的垂直布局

默认情况下父元素的高度被元素撑开。

子元素是在父元素的内容区中排列的。如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用overflow属性来设置父元素如何处理溢出的子元素。（也有overflow-x，overflow-y，单独设置水平、垂直的滚动条

• visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示。
• hidden：溢出内容会被裁剪不会显示。
• scroll：生成两个滚动条，通过滚动条来查看完整的内容。
• auto：根据需要生成滚动条。

外边距的折叠

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

• 兄弟元素：
  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
  • 特殊情况：
    • 一正一负，则取两者的和。
    • 都是负值，则取绝对值较大的。
  • 兄弟元素之间的外边距重叠，对于开发是有利的，不需要处理。
• 父子元素：
  • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
  • 这种折叠会影响页面的布局，必须处理。

行内元素的盒模型

• 行内元素不支持设置width和height。

• 可以设置padding，垂直方向的padding不会影响页面的布局。

• 可以设置border，垂直方向的border不会影响布局。

• 可以设置margin，垂直方向的margin不会影响布局。

display：用来设置元素显示的类型。

• inline：将元素设置为行内元素。
• block：设置为块元素。
• inline-block：设置成行内块元素。
  • 行内块：既可以设置width和height，又不会独占一行。
• table：设置一个表格。
• none：元素不在页面中显示，可以隐藏元素。（不占页面的位置

visibility：用来设置元素的显示状态。

• visible：默认值，元素在页面中正常显示。
• hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置。

浏览器的默认样式

通常情况下，浏览器会为元素设置一些默认样式。默认样式的存在会影响到页面的布局，通常情况下，我们必须要去除浏览器的默认样式。（pc端的页面）

对于复杂页面一个一个去处理，对于简单的页面可以统一去除margin、padding。

*{
  margin:0;
  padding:0;
}
1
2
3
4

可以直接引入别人写的css。重置样式表：专门用来对浏览器的样式进行重置的。

• reset.css：直接去除了浏览器的默认模式
• normalize.css：对默认样式进行了统一

盒子的大小

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

box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）

• content-box：默认值，宽度和高度用来设置内容区的大小。
• border-box：宽度和高度用来设置整个盒子可见框的大小。

轮廓阴影和圆角

outline：用来设置元素的轮廓线，用法和border一样。与border不同的是：轮廓不会影响到可见框的大小。

box-shadow：用来设置元素的阴影效果，也不会影响到页面布局。

• 第一个值 水平偏移量：设置阴影的水平位置。正值向右移动，负值向左移动。
• 第二个值 垂直偏移量：设置阴影的水平位置。正值向下移动，负值向上移动。
• 第三个值 阴影的模糊半径
• 第四个值 阴影的颜色

border-radius：用来设置圆角。圆角设置的是圆的半径大小，半径越大弧度更大。

• 可以分别指定四个角的圆角：左上 右上 右下 左下
• 三个值：左上 右上右下 左下
• 两个值：左上右下 右上左下（对角
• 要在两个方向上设置不同的px，中间用/隔开。

border-radius: 50%; 将元素设置成一个圆形。

04_float

浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用float来设置元素的浮动。

• none：默认值，元素不浮动。
• left：元素向左浮动。
• right：元素向右浮动。

ps：

• 元素设置浮动（只要不是none）以后，水平布局的等式就不需要强制成立。
• 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。

浮动的特点：

• 浮动元素会完全脱离文档流，不再占据文档流中的位置。
• 设置浮动以后元素会向父元素的左侧或右侧移动。
• 浮动元素默认不会从父元素中移出。
• 浮动元素向左或向右移动，不会超过它前边的其他浮动元素。
• 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。
• 浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。

简单总结：浮动目前来讲它的主要作用是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

浮动的特点

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。

元素设置浮动以后会从文档流中脱离，从文档流脱离后元素的一些特点也会发生变化。脱离文档流的特点：

• 块元素：
  • 不会独占页面的一行。
  • 宽度和高度默认被内容撑开。
• 行内元素：
  • 行内元素脱离文档流以后就会变成块元素，特点和块元素一样。

高度塌陷和BFC

高度塌陷的问题：在浮动布局中，父元素的高度是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

BFC（块级格式化环境）：是一个css的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域。元素开启BFC后的特点：

• 开启BFC的元素不会被浮动元素所覆盖。
• 开启BFC的元素子元素和父元素外边距不会重叠。
• 开启BFC的元素可以包含浮动的子元素。

可以通过一些特殊方式来开启元素的BFC（多多少少都有副作用：

• 设置元素的浮动。（不推荐
• 将元素设置成行内块元素。（不推荐
• 将元素的overflow设置一个非visible的值
  • 常用的方式：为元素设置overflow:hidden 开启BFC，以其可以浮动。（副作用较小

clear

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响。

clear：清除浮动元素对当前元素所产生的影响。

• left：清除左侧浮动元素对当前元素所产生的影响。
• right：清除右侧浮动元素对当前元素所产生的影响。
• both：清除两侧中最大影响的那侧。

原理：设置清楚浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。

使用after伪类解决高度塌陷

/*在盒子后面添加一个伪元素来撑起父元素的高度*/
.bax::after{
    content:'';
    display:block;
    clear:both;
}
1
2
3
4
5
6

clearfix

解决外边距重叠和高度塌陷的问题：

.clearfix::before,
.clearfix::after{
     content:'';
     display:table; /*解决外边距重叠*/
     clear:both; /*解决高度塌陷*/
}
1
2
3
4
5
6

05_position

相对定位

定位：是一种更加高级的布局手段。通过定位可以将元素摆放到页面的任意位置，使用position来设置定位。

• static：默认值，元素是静止的没有开启定位。
• relative：开启相对定位。
• absolute：开启绝对定位。
• fixed：开启固定定位。
• sticky：开启粘滞定位。

相对定位：当元素的position设置成relative则表示开启了元素的相对定位。

相对定位的特点：

• 开启定位之后，如果没设置偏移量，元素不会发生变化。
• 相对定位是参照于元素在文档流中的位置进行定位的。
• 相对定位会提升元素的层级。
• 相对定位不会使元素脱离文档流，不会改变元素的性质（块还是块，行内还是行内）。

偏移量（offset）：当元素开启定位之后，可以通过偏移量来设置元素的位置。

• top：定位元素和定位位置上边的距离。
• bottom：定位元素和定位位置下边的距离。（定位元素垂直方向的位置由top、bottom两个属性来控制，通常情况下只使用其中一个。）
• left：定位元素和定位位置左边的距离。
• right：定位元素和定位位置右边的距离。（定位元素水平方向的位置由left、right两个属性来控制，通常情况下只使用其中一个。）

绝对定位

当元素的position设置为absolute时，则开启了元素的绝对定位。

绝对定位的特点：

• 如果不设置偏移量，元素的位置不会发生变化。
• 元素会从文档流中脱离。
• 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。
• 会使元素提高一个层级。
• 绝对定位是相对于其包含块进行定位的。

包含块：

• 正常情况下：是离当前元素最近的祖先块元素。
• 开启绝对定位情况下：离当前元素最近的开启了定位的祖先块元素。如果所有的祖先元素都没有开启定位，则根元素就是它的包含块。

当开启绝对定位之后：

水平方向的布局等式就需要添加left和right两个值，此时规则和之前一样只是多添加两个值。当发生过度约束：

• 如果9个值没有auto，则自动调整right使其等式成立。
• 如果有auto，则自动调整auto的值使其等式成立。
  • 可设置auto的值：margin、width、left、right。
  • left、right的默认值时auto，如果不知道left和right，则当等式不满足时，会自动调整这两个值。

垂直方向布局的等式也必须满足：top+margin-top/bottom+padding-top/bottom+border-top/bottom+height=包含块的高度。

固定定位

当元素的position设置为fixed时，则开启了元素的固定定位。固定定位也是一种绝对定位，所以大部分的特点和绝对定位一样。唯一不同的是固定定位永远参照浏览器的视口进行定位。固定定位的元素不会随网页的滚动而滚动。

粘滞定位

当元素的position设置为sticky时，则开启了元素的粘滞定位。

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

兼容性不好，老版本的一些浏览器不支持。

元素的层级

对于开启了定位元素，可以通过z-index属性来指定元素的层级。

• z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高就越优先显示。
• 如果元素的层级一样，就优先显示靠下的元素。
• 祖先的元素的层级再高也不会盖住后代元素。

06_font&background

行高

行高指的是文字占有的实际高度，可以通过line-height来设置行高。

• 行高可以直接指定一个大小。
• 可以直接为行高设置一个整数：
  • 如果是一个整数的话，行高将会是字体的指定的倍数。
• 还用来设置文字的行间距。行间距=行高-字体大小。

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。

行高会在字体框的上下平均分配，可以将行高设置成和高度一样的值，就可以使得单行文字在一个元素中垂直居中。

字体的简写属性

font可以设置字体相关的所有属性。语法：

• font: 字体大小/行高 字体族
• 行高可以省略不写，如果不写使用默认值。

font-weight：字重 字体的加粗

• nomal：默认值，不加粗。
• bold：加粗。
• 100-900 ：九个级别（没什么用）。

font-style：字体的风格。

• normal：默认值，正常的。
• italic：斜体的。

文本

text-align：文本的水平对齐。

• left：左侧对齐。
• right：右侧对齐。
• center：居中对齐。
• justify：两端对齐。

vertical-align：设置元素垂直对齐。

• baseline：默认值，基线对齐。
• top：顶部对齐。
• bottom：底部对齐。
• middle：居中对齐。

text-decoration：设置文本修饰。

• none
• underline：下划线
• line-through：删除线
• overline：上划线

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

• normal：正常
• nowrap：不换行
• pre：保留空白

07_HTML

表格的简介

在网页中我们需要使用表格来表示一些格式化数据，通过table标签来创建一个表格。在table中使用tr表示表格中的一行，有几个tr就有几行。在tr中使用td表示一个单元格，有几个td就有几个单元格。

colspan：横向的合并单元格。

rowspan：纵向的合并单元格。

可以将一个表格分为三个部分：thead、tbody、tfoot。th：表示头部的单元格。

表格的样式

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

border-collapse：设置边框的合并。

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中，tr不是table的子元素。

默认情况下，元素在td中是垂直居中的，可以通过vertical-align来设置。

将元素设置为单元格 td：display: table-cell;(可以用vertical-align: middle;来将元素放在中间)

表单

网页中的表单：用于将本地的数据提交给远程的服务器，使用form标签来创建一个表单。

<form action="">
        文本框<input type="text" name="username">
        <br><br>
        
        密码框<input type="password" name="password">
        <br><br>

        
        单选按钮<input type="radio" name="hello" value="a">
               <input type="radio" name="hello" value="b">   
        <br><br>

        
        多选框<input type="checkbox" name="test" value="1">
               <input type="checkbox" name="test" value="2">
               <input type="checkbox" name="test" value="3" checked>     
        <br><br>

        
        <select name="hi" id="">
            <option value="i">选项1option>
            <option selected value="ii">选项2option>
            <option value="iii">选项3option>
        select>
        <br><br>

        <input type="submit" value="注册">
    form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

• action：表单要提交的服务器地址。
• ps：数据要想提交到服务器中，必须要为元素指定一个name。

<form action="">
        <input type="submit">

        
        <input type="text" name="username" autocomplete="off">

        
        <input type="text" name="a" value="hi" readonly>

        
        <input type="reset">
        <input type="button" value="按钮">

        
        <button type="submit">提交button>
        <button type="reset">重置button>
        <button type="button">按钮button>

        
        <input type="email">
    form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24