Web 页面制作基础

关注

发布于: 2021 年 02 月 09 日

网站同步更新：http://www.dadaqianduan.cn/#/%E5%89%8D%E7%AB%AF%E5%A4%8D%E7%9B%98%E8%AF%BE/Web%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C%E5%9F%BA%E7%A1%80

前言

哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

Web 页面制作基础

说明：仅作为学习辅助

那么 Web 页面制作基础，能让你掌握什么呢？

第一节掌握 Web 基础知识。

第二节掌握 HTML 基础知识。

第三节掌握 CSS 基础知识。

web 开发背景

计算机语言的概念
解释和编译
Sublime 的介绍
开发者工具介绍
命名规范

命名规范

英文命名
数字不能打头
驼峰命名法

学习前端接触的 web 基础语言，HTML，CSS，JavaScript

Web 基础知识

每次 15 分钟朗读：

Internet，中文为因特网，国际互联网。
它是由所有使用公用语言互相通信的计算机连接而组成的全球网络。
WWW是World Wide Web的缩写，中文名万维网。
WWW是Internet的最核心部分。
它是Internet上那些支持WWW服务和HTTP协议的服务器集合。
WWW在使用上分为Web客户端和Web服务端。
用户可以使用Web客户端访问Web服务器上的页面。
Website，中文名为网站，是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。
URL，是Uniform Resource Locator的缩写，中文名为统一资源定位符，俗称网址，它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

URL的一般格式：

协议://主机地址（ip 地址)+目录路径+参数

常见的协议有：

a. ftp：File Transfer Protocol，文件传输协议，可以通过FTP访问服务器上的文件。通常使用时在主机地址前面加上“用户名：密码 @”。

示例：

url: ftp://admin:12345@113.129.xxx/html.pdf

b. file：主要访问本地计算机中的文件。

c. telent：允许用户通过一个协商过程与一个远程设备进行通信。

d. http：Hyper Text Transfer Protocol，超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传输协议。

Web Standard（Web标准)是Web应用开发需要遵守的标准。
网页主要由三部分组成：结构标准，表现标准，行为标准。

网站访问过程

url统一资源定位符

互联网上标准资源的地址，可以从互联网上得到的资源的位置和访问方法。

组成部分：协议，服务器地址，资源路径。

Web Browser，中文名为网页浏览器，是一个显示网页服务器或者档案系统内的 HTML 文件，并让用户与这些文件互动的软件。
Web Server，中文名为网页服务器，WEB服务器，主要是提供网上信息浏览服务。

Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，客户端就可以从服务器上获取网页html，包括css，js,视频，音频等。

web开发主要分前端和后端两部分。
前端是指直接与用户接触的网页，网页上通常有html,js,css等。
后端是指程序，数据库和服务器层面的

web系统开发过程

项目提出，需求分析，（设计，ui 设计，系统设计），（开发，前端开发，后台开发），系统测试，开发与维护。

HTML 基础知识

HTML 的历史：HTML，XHTML
HTML 的全局属性：全局标准属性，全局事件属性
HTML 的元素：

标记语言，是一种将文本以及与文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。
HTML，为超文本标记语言。
XHTML是可扩展超文本标记语言，是一种更纯洁，更严格，更规范的html代码。
html文件由文件头和文件体两部分组成。
标签的分类：双标签，单标签。

双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用，且必须合理嵌套。

单标签：在开始标签中进行关闭（以开始标签的结束而结束）。

HTML 的全局标准属性

在HTML中，规定了 8 个全局标准属性。

class用于定义元素的类名。
id用于指定元素的唯一id。
style用于指定元素的行内样式。
title用于指定元素的额外信息。
accesskey用于指定激活某个元素的快捷键。

支持accesskey属性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab键下的次序。

支持tabindex属性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中内容的文本方向。

dir的属性值只有ltr和rtl两种，分别是left to right和right to left。

lang用于指定元素内容的语言。

HTML 的全局事件属性

`Window`窗口事件

onload，在页面加载结束后触发。
onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。

`Form`表单事件

onblur，当元素失去焦点时触发。
onchange，在元素的元素值被改变时触发。
onfocus，在元素获得焦点时触发。
onreset，当表单中的重载按钮被点击时触发。
onselect，在元素中文本被选中后触发。
onsubmit，在提交表单时触发。

`Keyboard`键盘事件

onkeydown，在用户按下按键时触发。
onkeypress，在用户按下按键后，按着按键时触发。

该属性不会对所有按键生效，不生效按键如：alt，ctrl，shift，esc。

onkeyup，当用户释放按键时触发。

`Mouse`鼠标事件

onclick，当在元素上单击鼠标时触发。
ondblclick，当在元素上双击鼠标时触发。
onmousedown，当在元素上按下鼠标按钮时触发。
onmousemove，事件会在鼠标指针移动时发生。
onmouseout，当鼠标指针移出元素时触发。
onmouseover，事件会在鼠标指针移动到指定的元素上时发生。
onmouseup，当在元素上释放鼠标按钮时触发。

Media 媒体事件

onabort，当退出媒体播放器时触发。
onwaiting，当媒体已停止播放但打算继续播放时触发。

HTML 元素

一个 HTML 文档包含的标签

<!DOCTYPE>，声明文档类型。
<html>，HTML 元素真正的根元素。
<head>，定义html文档的文档头。

head中包含的元素
title，定义HTML文档的标题base，为页面上的所有链接规定默认地址或者默认目标link，用于定义文档与外部资源之间的关系meta，提供关于HTML的元数据style，用于为HTML文档定义样式信息script，用于定义客户端脚本

复制代码

body，定义html文档的文档体。
content-Type，用于设定网页的字符集，便于浏览器解析与渲染页面。

代码：

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">

复制代码

cache-control，用于告诉浏览器如何缓存某个响应及缓存多长时间。

参数：

no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存
no-store，允许缓存，每次都要去服务器上下载完整的响应
public，缓存所有响应
private，只为单个用户缓存
max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒
<meta http-equiv=cache-control" content="no-cache">

复制代码

expires，用于设定网页的到期时间，过期后重新到服务器上重新传输。
refresh，网页将在设定的时间内，自动刷新并转向设定的网址
Set-Cookie，用于设置网页过期。
无语义元素：<span>,<div>，<span>是内联标签，用在一行文本中，<div>是块级标签。

DIV+CSS

div用于存放需要显示的数据，css用于指定如何显示数据样式，做到结构与样式相互分离。

查看 div+css 样式 HTML:点击下方链接跳转，可查看源码：

div-css.html

格式化元素

普通文本

<b>，定义粗体文本
<big>，定义大号字
<em>，定义着重文字
<i>，定义斜体字
<small>，定义小号字
<strong>，定义加重语气
<sub>，定义下标字
<sup>，定义上标字
<ins>，定义插入字
<del>，定义删除字

计算机输出

<code>，定义计算机代码
<kbd>，定义键盘输出样式
<samp>，定义计算机代码样本
<tt>，定义打字机输入样式
<pre>，定义预格式文本

术语

<abbr>，定义缩写
<acronym>，定义首字母缩写
<address>，定义地址
<bdo>，定义文字方向
<blockquote>定义长的引用
<q>，定义短的引用语
<cite>，定义引用，引证
<dfn>，定义一个概念，项目

图片元素

<img src="图片的url" alt = "图像的替代文本">

复制代码

超链接元素

<a>标签的target属性，默认值为_self。

| 值 | 说明 |

|:---|:---|

|_self|在超链接所在框架或窗口中打开目标页面|

|_blank|在新浏览器窗口中打开目标页面|

|_parent|将目标页面载入含有该链接框架的父框架集或父窗口中|

|_top|在当前的整个浏览器窗口中打开目标页面，因此会删除所有框架|

文本链接是<a></a>标签之间的元素内容为文本内容。
锚点链接是用#+对应的锚点，锚点通常用唯一属性值id设定。

图像热区链接

图像热区链接，是什么呢？当你在看一些购物网页的时候，一张图片上，可以在不同的地方链接到不同的目标位置，点击不同的地方可以跳转到不同的网页，这也是做商城项目一般要用到的技术。

这个时候不是<a>标签元素了，而是<area>元素。

<area>元素的属性有两个shape，cords属性。

| shape 属性 | 说明 | cords 属性 | 说明 |

| :--- | :--- | :--- | :--- |

| circle | 圆形 | x,y,r | (x,y)为圆心坐标，r 为半径 |

<area>的坐标系，原点为图片的左上角,x 轴正方向向右，y 轴正方向向下

我画个图哈，反映<area>的坐标系：

图像热区链接的使用，<map>标签定义一个image-map，可以含一个以上的热区<area>，每个热区都有独立的链接。

要为<map>标签赋予name属性。

将<img>标签的usemap属性与<map>标签的name属性相关联。

为了证明我学会了，我写一个 html 页面。

map -> name="image_link"
img -> usemap="#image_link"

复制代码

点击跳转：imgmap.html

e-mail 链接

e-mail 链接主要是看到有很多官方网页需要做的一个打开一封新的电子邮件。

点击下方链接即可看到效果：

代码：

<a href="mailto:xxxxxx@qq.com">联系我们</a>

复制代码

javascript 链接

点击 JavaScript 链接：

代码：

<a href="javascript:alert('哈哈，你点击了！');">点击弹窗</a>

复制代码

空链接

空链接是指未指派目标地址的超链接。

空链接的代码：

javascript: void(0)
<a href=""></a>
<a href="#"></a>
<a href="javascript:void(0)"></a>

复制代码

列表元素

整合列表 html 网页，点击跳转：ul-ol.html

无序列表，<ul>定义无序列表，<li>定义列表项。

<ul>的type属性值：disc点，square方块，circle圆，none无.

有序列表，<ol>定义有序列表，<li>定义列表项。

<ol>的type属性值：数字，大写字母，大写罗马数字，小写字母，小写罗马数字。

start属性定义序号的开始位置。

定义列表<dl>，定义列表内部可以有多个列表项标题，每个列表项标题用<dt>标签定义，列表项标题内部又可以有多个列表项描述，用<dd>标签定义。

表格

整合表格 html 网页，点击跳转：table.html

<table>定义表格
<caption>定义表格标题
<tr>定义若干行
<td>定义若干单元格
<th>定义表头
表格分头部，主体，底部：<thead>,<tbody>,<tfoot>三个标签。

| 属性 | 说明 |

| :--- | :--- |

| border | 设置表格的边框宽度 |

| width | 设置表格的宽 |

| height | 设置表格的高 |

| cellpadding | 设置内边距 |

| cellspacing | 设置外边距 |

<td>的两个属性：colspan用于定义单元格跨行，rowspan用于定义单元格跨列
<tbody>,<thead>,<tfoot>标签通常用于对表格内容进行分组。
表单由<form>标签定义，action属性定义了表单提交的地址，method属性定义表单提交的方式。

代码：

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
<input type="image">
<input type="file">
<input type="hidden">

复制代码

<select>
<option>
size属性用来设置选择栏的高度，multiple属性用来决定是多选列表，还是单选
selected="selected"

复制代码

表单控件，用于输入更多的文本

<textarea>元素

<textarea>标签具有name,cols,rows3 个属性。

name用于提交参数
value用于输入文本内容
cols和rows分别用于文本框的列数和行数，宽度和高度。

效果：

自我评价：<br/>

</textarea>

<br/>

</form>

代码：

<form action="web" method="post"> 自我评价：<br/> <textarea rows="10" cols="50" name="introduce"> </textarea> <br/> <input type="submit" id="" name=""></form>

复制代码

frameset

<frameset>定义一个框架集，用于组织多个窗口，每个框架存有独立的 html 文档
<frameset>不能与<body>共同使用，除非有<noframe>元素
<frame>用于定义<frameset>中一个特定的窗口。空元素<frame/>

frame属性

| 属性 | 说明 |

|:---|:---|

|src|需要显示的html文档|

|frameborder|定义框架的外边框，属性值为 0 或者 1|

|scrolling|定义是否显示滚动条,有 3 个值：yes,no,auto|

|noresize="noresize"|定义该框架无法调整大小，默认是可以调整的|

|marginheight和marginwidth属性|定义上下左右的边距|

<noframe>，用于为那些不支持框架集的浏览器显示文本
<iframe>，与<frame>元素相同，iframe有frame的属性，还加了height和width

代码：

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">        <title>frameset</title>	</head>    <frameset cols="25%,50%,25%">        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>        <frame src="https://juejin.im/user/1451011081249175" ></frame>        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>    </frameset>    <noframes>        <body>您的浏览器无法处理框架，请更换浏览器打开</body>    </noframes></html>

复制代码

预留字符

HTML 中的预留字符必须被替换为字符实体。

| :--- | :--- | :--- | :--- |

| |空格|  |  |

|< |小于号| <| <|

|> |大于号| >| >|

|& |和号| &| &|

|" |引号| "| "|

|' |撇号| ' (IE 不支持)| '|

|￠ |分（cent）| ¢| ¢|

|£ |镑（pound）| £| £|

|¥ |元（yen）| ¥| ¥|

|€ |欧元（euro）| €| €|

|§ |小节| §| §|

|© |版权（copyright）| ©| ©|

|® |注册商标| ®| ®|

|™ |商标| ™| ™|

|× |乘号| ×| ×|

|÷ |除号| ÷| ÷|

CSS 基础知识

css，英文Cascading Style Sheets，中文名：级联样式表。层叠样式表。
css是一种表现语言，是对网页语言的补充。
css用于网页的风格设计，包括字体，颜色，位置等。
css使用的 4 中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。

引入外部样式文件：

<link type="text/css" rel="stylesheet" href="css样式文件的url"/>

复制代码

导入外部样式文件:

<style type="text/css"> @import "css样式文件的url";</style>

复制代码

使用内部样式定义：

<style type="text/css"> div {     background-color: #ffffff;     width: 300px;     height: 300px; }</style>

复制代码

使用内联样式定义：

<div style="background-color: #ffffff; width: 100px; height: 100px;"></div>

复制代码

css 的两个特性：层叠，继承

层叠：层叠样式生效的优先级：

内联样式->内部样式->外部样式->浏览器默认效果。

继承，就是 css 属性可以从父元素向下传递到子元素。

`css`的选择器

元素选择器，是最简单的选择器。
通配符选择器，用"*"表示，表示对任意元素都有效。
属性选择器

格式：

E[attribute]{property1:value1; property2:value2;...}

复制代码

| 语法 | 说明 |

| :--- | :--- |

| E[attribute] | 用于选取带有指定属性的元素 |

| E[attribute=value] | 用于选取带有指定属性和指定值的元素 |

| E[attribute~=value] | 用于选取属性值包含指定值的元素，该值必须是整个单词，可以前后有空格 |

| E[attribute\|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-” |

派生选择器

派生选择器根据元素在其位置的上下文关系定义样式
派生选择器分 3 种：后代选择器，子元素选择器，相邻兄弟选择器
后代选择器是某元素后代的所有元素。
子元素选择器是相对于父元素的第一级子元素符合条件。
相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。

id选择器，以特定id值的 HTML 元素指定样式。
类选择器，以指定class的 HTML 元素指定样式。
伪类选择器

伪类选择器：伪类选择器和伪元素选择器

伪类以冒号(:)开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。

css中常用的伪类如下表所示：

| 伪类名 | 说明 |

| :--- | :--- |

| :active | 向被激活的元素添加样式 |

| :focus | 向拥有输入焦点的元素添加样式 |

| :hover | 向鼠标悬停在上方的元素添加样式 |

| :link | 向未被访问的链接添加样式 |

| :visited | 向已被访问的链接添加样式 |

| :first-child | 向元素添加样式，且该元素是它的父元素的第一个子元素 |

| :lang | 向带有指定lang属性的元素添加样式 |

伪元素选择器

css中常用的伪元素如下表所示：

| 伪元素名 | 说明 |

| :--- | :--- |

| :first-letter | 向文本的第一个字母添加样式 |

| :first-line | 向文本的第一行添加样式 |

| :after | 在元素之后添加内容 |

| :before | 在元素之前添加内容 |

css 背景

css背景属性如下：

| 属性 | 说明 |

| :--- | :--- |

| background-color | 定义背景颜色 |

| background-image | 定义背景图片 |

| background-repeat | 定义背景图片是否重复以及其重复方式 |

| background-attachment | 定义背景图片是否跟随内容滚动 |

| background-position | 定义背景图片的水平位置和垂直位置 |

| background | 可以用一条样式定义各种背景属性 |

background

background-color用于设置背景颜色，初始值为transparent透明色。
颜色取值 3 种如：颜色名，十六进制颜色，rgb 函数。
background-image用于设置元素的背景图片，默认值为none。
background-repeat控制图像的平铺。

background-repeat默认值为repeat，即图像沿着 x 轴和 y 轴平铺，还可以指定沿着 x 轴平铺rpeat-x，沿着 y 轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit。

background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为：scroll，表示可以随着页面其余部分的滚动而滚动。设置fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置inherit，继承父元素。
background-position用于设置背景图像圆点的位置。

background可以将background-color，background-position，background-attachment，background-repeat，background-image全部设置。

css 字体属性

css常用字体属性表：

| 属性 | 说明 |

| :--- | :--- |

| font-family | 定义文本的字体系列 |

| font-size | 定义文本的字体尺寸 |

| font-variant | 定义是否以小型大写字母的字体显示文本 |

| font-style | 定义文本的字体是否是斜体 |

| font-weight | 定义字体的粗细 |

| font | 可以一条样式定义各种字体属性 |

font-family用于设置元素的字体，该元素属性值一般可以设置多个字体。
font-size用于设置字体的尺寸。
font-style用于设置字体是否是斜体，默认值为normal，当设置为italic，显示为一个斜体的样式，当设置为oblique，显示为一个倾斜的样式。
font-variant用于设置字体使用小写字体，默认为normal，一旦设置为small-caps，将所有小写字母变为大写。
font-weight用于设置字体的粗细，normal值等于 400，bold的值等于 700。
font，可以设置font-family,font-size,font-style,font-variant,font-weight。

css文本属性表：

| 属性 | 说明 |

| :--- | :--- |

| color | 文本颜色 |

| direction | 文本方向或者书写方向 |

| letter-spacing | 字符的间距 |

| line-height | 文本的行高 |

| text-align | 文本的水平对齐方式属性,设置元素中文本的水平方式，值有left，right，center，inherit。 |

| text-decoration | 给文本添加修饰效果，值有underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit。 |

| text-indent | 定义文本的首行缩进方式，默认值为 0 |

| text-shadow | 为文本添加阴影效果 |

| text-transform | 切换文本的大小写 |

| white-space | 设置如何处理元素内的空白 |

| word-spacing | 定义单词之间的距离 |

css尺寸属性表：

| 属性 | 说明 |

| :--- | :--- |

| width | 设置元素的宽度 |

| min-width | 设置元素的最小宽度 |

| max-width | 设置元素的最大宽度 |

| height | 设置元素的高度 |

| min-height | 设置元素的最小高度 |

| max-height | 设置元素的最大高度 |

css列表属性表：

| 属性 | 说明 |

| :--- | :--- |

| list-style-image | 设置列表项标记样式为图像，none/inherit/url |

| list-style-position | 设置列表项标记的位置，inside/outside/inherit |

| list-style-type | 设置列表项标记的类型 |

| list-style | 可以用一条样式定义各种列表属性 |

list-style-type

| 值 | 说明 |

| :--- | :--- |

| disc | 实心圆 |

| circle | 空心圆 |

| square | 方块 |

| decimal | 数字 |

| low-roman | 小写罗马数字 |

| upper-roman | 大写罗马数字 |

| low-alpha | 小写字母 |

| upper-alpha | 大写字母 |

| none | 无标记 |

| inherit | 继承父元素的该设置 |

css表格属性表：

| 属性 | 说明 |

| :--- | :--- |

| border-collapse | 设置是否合并表格边框 |

| border-spacing | 设置相邻单元格边框之间的距离 |

| caption-side | 设置表格标题的位置 |

| empty-cells | 设置是否显示表格中空单元格上的边框和背景 |

| table-layout | 设置用于表格单元格列宽的设置方式 |

盒模型

css盒模型，包含元素内容content，内边距padding，边框border，外部距margin。

css内边距属性，元素的内边距在边框和内容之间。

css内边距的属性：

| 属性 | 说明 |

| :--- | :--- |

| padding-top | 元素的上内边距 |

| padding-right | 元素的右内边距 |

| padding-bottom | 元素的下内边距 |

| padding-left | 元素的左内边距 |

| padding | 用一个声明定义所有内边距属性 |

设置顺序为上右下左依次进行。

padding: 10px 10px 10px 10px;

复制代码

css外边距的属性：

| 属性 | 说明 |

| :--- | :--- |

| margin-top | 定义元素的上外边距 |

| margin-right | 定义元素的右外边距 |

| margin-bottom | 定义元素的下外边距 |

| margin-left | 定义元素的左外边距 |

| margin | 用一个声明定义所有外边距属性 |

css边框的属性：

| 属性 | 说明 |

| :--- | :--- |

| border-top-style | 上边框的样式属性 |

| border-right-style | 右边框的样式属性 |

| border-bottom-style | 下边框的样式属性 |

| border-left-style | 左边框的样式属性 |

| border-style | 设置 4 条边框的样式属性 |

| border-top-width | 设置上边框的宽度属性 |

| border-right-width | 设置右边框的宽度属性 |

| border-bottom-width | 设置下边框的宽度属性 |

| border-left-width | 设置下边框的宽度属性 |

| border-width | 设置 4 条边框的宽度属性 |

| border-top-color | 设置上边框的颜色属性 |

| border-right-color | 设置右边框的颜色属性 |

| border-bottom-color | 设置下边框的颜色属性 |

| border-left-color | 设置左边框的颜色属性 |

| border-color | 设置 4 条边框的颜色属性 |

| border-top | 用一条声明定义所有上边框的属性 |

| border-right | 用一条声明定义所有右边框的属性 |

| border-bottom | 用一条声明定义所有下边框的属性 |

| border-left | 用一条声明定义所有左边框的属性 |

| border | 用一条声明定义所有边框的属性 |

| border-width | 一次定义 4 条边框的宽度 |

| border-color | 一次定义 4 条边框的颜色 |

边框的样式

none，无边框效果
hidden，与none相同
dotted，点线边框效果
dashed，虚线边框效果
double，双线边框效果
solid，实线边框效果
groove，3D 凹槽边框效果
ridge，3D 凸槽边框效果

css轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

| 属性 | 说明 |

| :--- | :--- |

| outline-style | 定义轮廓的样式属性 |

| outline-color | 定义轮廓的颜色属性 |

| outline-width | 定义轮廓的宽度属性 |

| outline | 同一个声明中定义所有的轮廓属性 |

布局属性

布局属性是文档中元素排列显示的规则
布局方式 3 种：普通文档流，浮动，定位

css浮动涉及到的属性

| 属性 | 说明 |

| :--- | :--- |

| float | 设置框是否需要浮动以及浮动方向 |

| clear | 设置元素的哪一侧不允许出现其他浮动元素 |

| clip | 裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则 |

| overflow | 设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll |

| display | 设置元素如何显示，值none,block,inline,inline-block,inherit |

| visibility | 定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden |

css定位的属性

| 属性 | 说明 |

| :--- | :--- |

| position | 元素的定位类型，值static,absolute绝对，relative相对 |

| top | 元素上外边距 |

| right | 元素右外边距 |

| bottom | 元素下外边距 |

| left | 元素的左外边距 |

| z-index | 元素的堆叠顺序 |

z-index用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在position:absolute时有效。

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

点赞、收藏和评论

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily

发布于: 2021 年 02 月 09 日阅读数: 114

原文链接:【http://xie.infoq.cn/article/5ad8ecc0bc9ef9ac2790f77c8】。未经作者许可，禁止转载。

魔王哪吒

关注

微信搜：程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供：Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。博客首发：http://www.dadaqianduan.cn/#/

发布

暂无评论

创作场景

Web 页面制作基础

前言

Web 页面制作基础

web 开发背景

Web 基础知识

HTML 基础知识

HTML 的全局标准属性

HTML 的全局事件属性

`Window`窗口事件

`Form`表单事件

`Keyboard`键盘事件

`Mouse`鼠标事件

Media 媒体事件

HTML 元素

格式化元素

图片元素

超链接元素

图像热区链接

e-mail 链接

javascript 链接

空链接

列表元素

表格

frameset

预留字符

CSS 基础知识

css 的两个特性：层叠，继承

`css`的选择器

派生选择器

css 背景

background

css 字体属性

盒模型

布局属性

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

点赞、收藏和评论

我们下期见！

魔王哪吒

评论