(web前端最全笔记)(web前端知识梳理)

Html和css的关系：css是修饰HTML样是的，HTML+css是构成网页的基本页面结构及样式。

第一章：HTML5的介绍

1、标签是由英文状态下< >两个尖括号构成的。

2、html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

3、标签与标签之间是可以嵌套的，但是先后顺序必须保持一致。

4、HTML标签不区分大小写，一般采用小写。

5、head标签：head标签为双标签，通常嵌套<meta>、<title>、<style>标签使用。

6、body标签：网页中所展示的内容全部放在body标签中。

第二章：HTML5语义化标签

2-1语义化

明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。

语义化标签的好处：

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

2-2段落标签-p标签

语法：<p>段落文本</p>

注意：在网页上显示文章，就把文章放在p标签中。有多少个段落就放多少个p标签。

2-3 自定义文字样式-span标签

语法：<span>文本</span>

注意：这个标签是没有语义的，它的作用就是设置单独的样式。

2-4标题标签-hx标签

语法：<hx>标题文本</hx>（x为1-6）

注意：标题标签一共有6个，h1,h2,h3,h4,h5,h6,分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。

2-5 自定义块-div标签

语法：<div>......</div>

注意：在网页中独立的栏目板块就是一个典型的逻辑部分，每个逻辑部分可以单独放在div标签中，div标签相当于一个容器。

2-6在body中用<header>标签来定义头部；<footer>标签来定义底部；<section>标签用来定义正文的区域；<aside>标签，定义一个侧边栏区域。

第三章：HTML5效果标签

文本中需要换行的地方使用<br/>标签，<br />标签作用相当于word文档中的回车； 代表一个空格；<hr/>标签代表水平分割线。 <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

第四章：HTML5列表标签

4-1无序列表-ul-li标签

语法：<ul>

<li>信息</li>

<li>信息</li>

<li>信息</li>

....................

</ul>

注意：ul-li是无序列表标签，ul-li是没有前后顺序的，在网页中默认每项li前显示的是一个小圆点。

4-2 有序列表-ol-li标签

语法：<ol>

<li>信息</li>

<li>信息</li>

<li>信息</li>

....................

</ol>

注意：ol-li标签是有序列表标签，是用前后顺序的，在网页中默认每项li前从1开始显示。

第五章：HTML5图片，链接及表格标签

5-1 添加图片标签-img标签

语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

5-2添加超链接-a标签

语法：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

5-3 a标签target属性，可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

5-4制作表格标签-table标签

讲解：

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

第六章：HTML5表单标签，与浏览者交互。

6-1表单标签-form标签

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：<form method="传送方式" action="服务器文件">。

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3. method ： 数据传送的方式（get/post）。

注意：

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

6-2 用户名和密码-文本输入框、密码输入框

语法：

<form>

<input type="text/password" name="名称" value="文本" />

</form>

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)。

6-3 input标签的Placeholder属性。

当需要提示用户输入框需要输入框的内容，可以用到placeholder属性。

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

3、占位符内容不是输入框真正的内容。

6-4数字输入框

讲解：

1、input的type属性设置为number,则表示该输入框的类型为数字。

2、数字框只能输入数字，输入其他字符无效。

3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

6-5网址输入框

1、input的type属性设置为url,则表示该输入框的类型为网址。

2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

6-6邮箱输入框

1、Input的type属性设置为email,则表示该输入框的类型为邮箱。

2、数字框的值必须包含@。

3、数字框的值@之后必须有内容,否则会报错误提示。

6-7 创建文本域-textarea标签

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

<textarea rows="行数" cols="列数">文本</textarea>

这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

6-8 lable标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

6-9 单选框和复选框

两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

注意:同一组的单选按钮，name 取值一定要一致

6-10 创建下拉菜单-select、option标签

讲解：

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4、value：<option value=”提交值”>选项</option>

5、selected="selected"：设置selected="selected"属性，则该选项就被默认选中。

6-11 提交按钮-submit

当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：<input type="submit" value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

6-12 重置按钮-reset

当用户需要重置表单信息到初始时的状态时,可以设置reset按钮。

语法：<input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

第七章：CSS3介绍，为网页添加样式

7-1 认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

7-2 CSS代码语法

CSS样式由选择符和声明组成，而声明又由属性和值组成。

选择符：又称选择器，指明网页中要应用样式规则的元素。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

7-3 CSS注释代码

注释语句：就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来表明

7-4 内联式CSS样式

内联式：就是把css代码直接写在现有的HTML标签中，注意要写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

例：<p style="color:red">这里文字是红色。</p>

7-5 嵌入式CSS样式

嵌入式：就是可以把css样式代码写在<style type="text/css"></style>标签之间。嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

例：<style type="text/css">

span{

color:red;

}

</style>

7-6 外部式CSS样式

外部式：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内。

例：<link href="base.css" rel="stylesheet" type="text/css" />

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

7-7 三种连接方式的优先级

总结：他们的优先级：内联式 > 嵌入式 > 外部式。但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。采取就近原则，离被设置元素越近优先级别越高。

第八章：CSS3选择器

8-1 什么是选择器

css3每一条css样式声明（定义）由两部分组成

选择器{

样式;

}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

8-2标签选择器

如编辑器中的<html>、<body>、<h1>、<p>、<img>，就是HTML代码中的标签

8-3 类选择器

语法：.类选器名称{css样式代码;}

注意：

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

8-4 ID选择器

注意：

1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

3、id属性的值即为当前标签的id，尽量见名思意，语义化。

8-5 类选择器和ID选择器的区别

相同点：可以应用于任何元素；

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

8-6 的选择器

即大于符号(>),用于选择指定标签元素的第一代子元素。

8-7 后代选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

注意：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

8-8 通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素。

8-9 伪类选择器

它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：比较常用的还是 a:hover 的组合。

8-10 分组选择器

为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）。

第九章 CSS3的继承，优先级和重要性

9-1 样式的继承

样式的继承：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

9-2 选择器的优先级

讲解：

1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器。

9-3 权值计算-特殊性

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

9-4 选择器的最高层级!important

!important要写在分号前面。

当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页，浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，请记住!important优先级样式是个例外，权值高于用户自己设置的样式。

第十章 CSS3字体样式

10-1 字体的样式

font-family：设置字体的类型

例：body{font-family:"Microsoft Yahei";}

font-size:设置字体的大小

例：body{font-size:12px;}

font-weight:设置字体的粗细

例：p span{font-weight:bold;}

font-style：设置字体的斜体样式

1、font-style可以设置字体样式，并且有种3设置方式。

2、正常字体为normal,也是font-style的默认值。

3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。

4、oblique为设置倾斜的字体，强制将字体倾斜。

10-2 字体颜色

1、color属性可以设置字体颜色。

2、color的值有3种设置方式：

英文命令颜色

例：p{color:red;}

RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

例：p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。

例：p{color:rgb(20%,33%,25%);}

十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

例：p{color:#00ffff;}

第十一章 CSS3文本样式

11-1添加文本修饰-text-decoration

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline为定义文本下的一条线。

4、text-decoration的值为overline为定义文本上的一条线。

5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

11-2 文本添加首行缩进-text-indent

为文本添加首行缩进，2em的意思就是文字的2倍大小。

例：p{text-indent:2em;}

11-3 为文字设置行间间距-line-height

例：p{line-height:1.5em;}

11-4 增加或减少字符间的空白

letter-spacing:设置文字间隔或者字母间隔

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

word-spacing:设置单词与单词之间的距离。

11-5 设置对齐方式-text-align

例：h1{

text-align:center;

}

<h1>了不起的盖茨比</h1>

11-6 长度值

长度单位：常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

第十二章CSS3盒模型

12-1 元素分类

分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>....

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>.....

常用的内联块状元素有：

<img>、<input>.....

12-2 块级元素

display:block就是将元素显示为块级元素

例：将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

12-3 内联元素

display:inline将元素设置为内联元素

例： div{

display:inline;

}

......

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

12-4 内联块状元素

display:inline-block就是将元素设置为内联块状元素

内联块状元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

12-5盒模型的宽度和高度

css内定义的宽（width）和高（height），指的是填充以里的内容范围。

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

12-6盒模型的背景

网页中的标签不论是行内元素还是块状元素都可以给它设置一个背景色。

为标签设置背景颜色可以使background-color:颜色值来实现。

12-7盒模型的边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

讲解:

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用像素（px）。

12-8 设置圆角边框-border-radius

例：div{border-radius: 20px 10px 15px 30px;}

12-9 设置内边距-padding

元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。

填充也可分为上、右、下、左(顺时针)

12-10 设置外边距-margin

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

第十三章：CSS3布局模型

在网页中，元素有三种布局模型：

1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

13-1 流动模型

流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特征：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

2、在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）。

13-2 浮动模型

浮动模型：任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动

例：实现两个 div 元素一行显示。

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

<div id="div1"></div>

<div id="div2"></div>

例：同时设置两个元素右浮动也可以实现一行显示。

div{

width:200px;

height:200px;

border:2px red solid;

float:right;

}

例：设置两个元素一左一右可以实现一行显示

div{

width:200px;

height:200px;

border:2px red solid;

}

#div1{float:left;}

#div2{float:right;}

13-3 层模型

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

13-4 绝对定位：position:absolute

需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

例：实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

<div id="div1"></div>

13-5 相对定位：position:relative

需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

例：实现相对于以前位置向下移动50px，向右移动100px;

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

<div id="div1"></div>

13-6 固定定位：position:fixed

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

13-7 Relative与Absolute组合使用

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->

<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->

</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

第十四章：flex弹性盒模型

14-1弹性盒模型之flex属性

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

14-2使用justify-content属性设置横轴排列方式

本属性定义了项目在主轴上的对齐方式

属性值分别为：justify-content: flex-start（交叉轴的起点对齐） | flex-end（右对齐） | center（居中） | space-between（两端对齐，项目之间的间隔都相等。） | space-around（每个项目两侧的间隔相等）;

14-3 使用align-items属性设置纵轴排列方式

本属性定义了项目在交叉轴上的对齐方式

属性值分别为：

align-items: flex-start（左对齐） | flex-end（交叉轴的终点对齐） | center（交叉轴的中点对齐） | baseline（项目的第一行文字的基线对齐） | stretch（如果项目未设置高度或设为auto，将占满整个容器的高度。）;

14-4 给子元素设置flex占比

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

第十五章：CSS样式设置小技巧

15-1 水平居中行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

例：<body>

<div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

css代码

<style>

.txtCenter{

text-align:center;

}

</style>

15-2 水平居中设置-定宽块状元素

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。注意：元素的“上下 margin” 是可以随意设置的。

例：

html代码：

<body>

<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

css代码：

<style>

div{

border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

width:200px;/*定宽*/

margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

15-3 已知宽高实现盒子水平垂直居中

已知宽高实现盒子水平垂直居中。通常使用定位完成

例：

要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：

讲解：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

15-4 宽高不定实现盒子水平垂直居中

未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成

例： <div class="box">

<div class="box1">

慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网

</div>

</div>

添加样式：

.box {

border: 1px solid #00ee00;

height: 300px;

position: relative;

}

.box1 {

border: 1px solid red;

position: absolute;

top: 50%;

left: 50%;

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

}

效果图：

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。