整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序员web前端分享HTML基本结构和基本语法
HTML基本结构
HTML的基本语法
1、<常规标记>
<标记 属性=“属性值” 属性=“属性值”></标记>
标记也可叫标签或叫元素
例如：<head></head>
2.空标记
<标记 属性=“属性值” />
例如：<meta charset=”utf-8”>
说明：
1.写在<>中的第一个单词叫做标记，标签，元素。
2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
4.空标记没有结束标签，用“/”代替。
五、HTML常用标记
1、文本标题（h1-h6）
<h1>LOGO</h1>
<h2>二级标题</h2>
<h3>三级标题H3</h3>
<h4>四级标题H4</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
2、段落文本(p)
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
3、空格
所占位置没有一个确定的值,这与当前字体字号都有关系.
4、换行(br)
<br />
换行是一个空标记(强制换行)
5、水平线
<hr />空标记
6、加粗有两个标记
A、<b>加粗内容</b>只是显示加粗
B、<strong>强调的内容</strong>突出的文本
7、倾斜
<em>强调文本</em>
<i>倾斜文本</i>
8、 扩展
<u>文本</u>下划线
<del>文本</del>删除线
<s>文本</s>删除线
<sub></sub>下标
<sup></sup>上标
9、列表(ul,ol,dl)
HTML中有三种列表分别是：无序列表，有序列表，自定义列表
*无序列表
无序列表组成：
<ul>(unordered list)
<li></li>
<li></li>
．．．．．．
</ul>
*有序列表
有序列表组成：
<ol>(ordered list)
<li></li>
<li></li>
．．．．．．
</ol>
*自定义列表
<dl>(definition list)
<dt>名词</dt>
<dd>解释</dd>
(definition description)
．．．．．．
</dl>
知识扩展2----有序列表的属性
1)、type:规定列表中的列表项目的项目符号的类型
语法：<ol type="a"></ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（I, ii, iii, iv）。
2)、start 属性规定有序列表的开始点。
语法：<ol start="5"></ol>
10、插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" width="宽度" height="高度"/>
注:所要插入的图片必须放在站点下
title的作用:图片的标题； 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的
alt的作用:提示文本 必写；alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。（优化图片的）
*相对路径的写法：
1)当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名；<img src=”q12.jpg”/>
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；<img src=”images/q12.jpg”/>
3)当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下，写法如下：
../目标文件所处文件夹名/目标文件文件名+扩展名；
<img src=”../images/q12.jpg”/>
11、超链接的应用
语法：
<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>
<a href="#"></a>空链接
属性：target:页面打开方式，默认属性值_self。
属性值：_blank 新窗口打开
<a href="#" target="_blank">新页面打开</a>
12、数据表格的作用及组成
作用：显示数据
表格组成
<table width="value" height="value" border="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：一个tr表示一行;一个td表示一列(一个单元格)
<th></th>表格的列标题
*数据表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bgcolor="表格的背景色"
5）bordercolor="表格的边框颜色"
6）cellspacing="单元格与单元格之间的间距"
7）cellpadding="单元格与内容之间的空隙"
8）水平对齐方式：align="left左对齐/center居中/right右对齐";
9) 垂直对齐方式 ：valign="top顶对齐/middle居中/bottom底对齐/baseline(基线);
10)合并单元格属性：
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;
13、表单的作用及组成
表单的作用：用来收集用户的信息的;
表单组成：表单框（表单域form）
提示信息
表单控件/表单元素
1)、表单框
<form name="表单名称（英文字母开头的）" method（提交方式）="post/get" action="表单提交的地址"></form>
2）文本框
<input type="text" value="默认值" placeholder="提示文本" />
3)密码框
<input type="password" placeholder="密码"/>
4)提交按钮
<input type="submit" value="按钮内容" />
<input type="reset" value="按钮内容"/>重置按钮
5）单选框/单选按钮
<input type="radio" name="ral" value="radiovalue"/>
<input type="radio" name="ral" checked="checked" />
单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
6）复选框
<input type="checkbox" name="like" value="checkboxvalue" />
复选按钮里的name属性必须写，同一组复选按钮的name属性值必须一样。
checked="checked"表示默认被选中，可简写成checked
disabled="disabled"表示禁用，可简写成disabled
enabled:可用状态
7)下拉菜单
<select name="">
<option name="" value="表单被提交时被发送到服务器的值">菜单内容</option>
</select>
8）多行文本框（文本域）
<textarea name="textareal" cols="字符宽度" rows="行数">
</textarea>
9)跳转按钮
<input name="'" type="button" value=“按钮内容” />
<button></button>
button和submit的区别是：
submit是提交按钮起到提交信息的作用，type类型是button只起到跳转的作用，不进行提交。
提示信息标签(作用：将提示信息及相应的表单控件进行关联)
<label for="user">提示信息</label>
<input type="text" id="user"/>
扩展知识点3：对于不同的输入类型，value 属性的用法的意义
value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password" - 定义输入字段的初始值
type="checkbox", "radio" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 他name属性。
扩展知识点4：
<form name="表单名称" method="post/get" action=""></form>
Form中的获取数据的两个方式get和post的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
14、div和span的用法
<div ></div>
没有具体含义， 除了独占一行之外没有任何其它的默认属性，是页面布局中常用的标签；
<span> </span>
文本结点标签
可以是某一小段文本，或是某一个字。 它除了不换行外，没有任何其它的默认属性；
面小编为大家带来的是解决网页制作中的空格问题，这里详细的介绍了解决网页制作中的空格问题的相关知识，希望能对大家有所帮助。
Dreamweaver是一个非常简单易用但又功能强大的网页制作软件。但是，它却又一个令很多初学者很困惑的问题。那就是空格。在Dreamweaver中使用空格远远没有象word中一样方便。比如首行无法空格，句子中间空一格以上都是不行的。原因是什幺呢？这是因为在HTML语言中多于一个的空格都被忽略不计。这样就造成了空格困难的原因。如何很好地解决Dreamweaver的空格问题呢？解决的方案有很多：1、 制作一张很小的透明图片。嵌入到文本当中或者行首。这种方法实现起来比较麻烦。2、 使用全角空格。为什幺这种方案可行呢？因为全角空格实现起来比较简单。虽然也是空格但是对应的HTML代码却不是空格代码。而是另外的代码，因此Dreamweaver把他当字符处理而不是空格。所以可以相安无事。但是在不支持中文字符集的浏览器看来就是乱码了。3、 使用软空格。即在要插入空格的地方按Ctrl+shift+空格。这样的空格所有浏览器都能认识。但是缺点是在页面编辑的时候无法看见插入了多少空格，只能在浏览器预览的时候才能看清楚。不够直观。软空格其实使用的是代码。是不间断空距标记。他可以生成软空格。每按一下Ctrl+shift+空格就是增加一个代码。代码虽然简单，但是它的作用也很大。在做网页时候我们空出一行或者几行就要靠这个代码来帮忙。学过HTML语言的朋友都知;;标签是用来标记一个段落的。如果光写;;这段代码是不是就可以生成空行呢？这是无效的。必须在;标签中增加“；”代码才行。; ;这样的代码才会有空行效果。这里该标记也是起了占据位置的作用。另外如果用Dreamweaver生成一张表格，察看源代码的时候会发现。
、CSS简介
1.CSS是什么
CSS，指的是Cascading Style Sheet（层叠样式表），它是用来控制网页外观的一门技术。“HTML控制网页的结构，CSS控制网页的外观，JavaScript控制网页的行为”
2.CSS引入方式
外部样式表
内部样式表
行内样式表
3.外部样式表——指的是把CSS代码和HTML代码单独放在不同的文件中，然后在HTML文档中使用link标签来引用CSS样式表。
语法< link rel="stylesheet" type="text/css" href="文件路径" />
说明：rel的取值是固定的，即"stylesheet"，表示引入的是一个样式表文件（即CSS文件），type属性的取值也是固定的，即“text/css”，表示这是标准的CSS，href属性表示CSS文件的路径
注意：link标签是放在head标签内的
4.内部样式表——指的是把HTML代码和CSS代码放到同一个HTML文件中，其中，CSS代码放在style标签内，并且style标签是放在head标签内部的
语法
type=“text/css” 是必须添加的，表示这是标准的CSS
5.行内样式表——与内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件中。不同的是内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的
两段代码的实现效果是一样的，都是定义三个div元素的颜色为红色。
如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式表，每个元素则必须单独写一遍
行内样式表的缺点：代码冗余
二、CSS选择器
1.选择器是什么——用一种方式把你想要的那个元素选中
只有把它选中了，你才可以为这个元素添加CSS样式
2.最实用的五种选择器
CSS选择器的格式：
3.元素选择器——选择指定的相同的元素，而不会选择其他元素，然后给相同的元素定义同一个CSS样式
语法div { width:100px; height:100px; }
上面例子中的p元素和span元素没有被选中
4.id选择器——为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式。注意：在同一个页面中，不允许出现两个相同的id。
说明：对于id选择器，id名前面必须要加上前缀#，否则该选择器无法生效
5.class选择器——也就是“类选择器”，可以对相同或者不同的元素定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作
语法.box { width:100px; height:100px; }
class名前面必须要加上前缀.（英文点号），否则该选择器无法生效
上面的例子是为不同的元素定义相同的class，从而可以同时操作它们的CSS样式
6.后代选择器——选择元素内部中所有的某一元素，包括子元素和其他后代元素（如孙元素）
语法h3 p {width:100px; height:100px;}
说明：父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素
7.群组选择器——同时对几个选择器进行相同的操作（效率高）
语法h3,p {width:100px; height:100px;
说明：对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效
三、字体样式
1.字体样式
类似于Word软件中对于字体样式的设置，我们可以知道CSS字体样式的属性有以下五种：
font-family——字体类型
font-size——字体大小
font-weight——字体粗细
font-style——字体风格
color——字体颜色
2.字体类型（font-family）
语法：font-family：字体1，字体2，...，字体N；
说明：font-family可以指定多种字体。使用多种字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。浏览器默认的字体类型一般是“宋体”
举例：设置一种字体
举例：设置多种字体
为元素设置多种字体的原因是：在有些字体没有安装的情况下，可以使用下一个字体，优先使用左边的字体。
3.字体大小（font-size）——采用px为单位
语法font-size：像素值；
说明：实际上，font-size属性取值有两种，一种是“关键字”，如small，medium，large等。另外一种是“像素值”，如10px、16px、21px等。不过在实际开发中，关键字这种方式基本不会用
4.字体粗细（font-weight）
语法font-weight：取值;
font-weight属性取值有两种：一种是100~900的“数值”；另外一种是“关键字”。
其中关键字取值有：normal（正常）、lighter（较细）、bold（较粗）、bolder（很粗）。对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上。
在实际开发中，不建议使用数值作为font-weight的属性取值，一般使用关键字的bold属性值
5.字体风格（font-style）
语法font-style：取值；
font-style属性取值有：normal（正常）、italic（斜体）、oblique（斜体）
从预览效果可以看出，font-style属性值为italic或oblique时，页面效果是一样的
但其实它们的区别在于：italic是字体的一个属性，但并非所有的字体都有这个属性。因此对于有italic属性的字体，我们使用font-style：italic来实现斜体效果；对于没有italic属性的字体，我们使用font-style：oblique来实现。
6.字体颜色（color）
语法color：颜色值;
color属性取值有两种：关键字 & 16进制RGB值
关键字 如red、green、blue等
16进制RGB值——类似于#FBF9D0形式的值
单纯靠“关键字”，满足不了实际开发的需求。因此引入了“16进制RGB值”
记：#000000是黑色，#FFFFFF是白色
7.CSS注释
语法/* 注释的内容*/
注意：
小技巧：浏览器解析CSS是有一定顺序的，后面样式的会覆盖前面的样式。
四、文本样式
文本样式和字体样式的区别：字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。
文本样式属性
text-indent ——首行缩进
text-align ——水平对齐
text-decoration ——文本修饰
text-transform ——大小写
line-height ——行高
letter-spacing、word-spacing ——字母间距、词间距
1.首行缩进（text-indent）
p元素的首行是不会自动缩进的，在HTML中我们常常使用空格代码 来实现首行缩进，但是这种方式冗余代码很多；在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。
语法text-indent：像素值；
说明：初学CSS，建议使用像素（px）作为单位。
中文段落首行一般需要缩进两个字符，设置首行缩进的像素值是字体大小的两倍即可
2.水平对齐（text-align）——控制文本在水平方向上的对齐方式
语法 text-align：取值；
text-align属性取值有：
left——左对齐（默认值）
center——居中对齐
right——右对齐。
在实际开发中，我们只会用到center这一个，其他两个几乎用不上。另外，text-align属性不仅对文本有效，对图片（img元素）也有效
3.文本修饰（text-decoration）——定义文本的修饰效果（下划线、中划线、顶划线）
语法text-decoration：取值；
text-decoration属性取值：
none——去除所有的划线效果（默认值）
underline——下划线（一般用于强调文章中的重点）
line-through——中划线（一般用于促销）
overline——顶划线（极少用）
超链接（a元素）默认样式有下划线，可以使用text-decoration:none去除a元素的下划线
4.大小写（text-transform）——针对英文而言，中文不存在大小写之分
语法 text-transform：取值；
text-transform属性取值
none——无转换（默认值）
uppercase——转换为大写
lowercase——转换为小写
capitalize——将每个英文单词首字母转换为大写
5.行高（line-height）——控制每行文本的高度，与“行间距”是完全不一样的概念
语法line-height：像素值；
6.间距（letter-spacing & word-spacing）
字间距（letter-spacing）——调整两个字之间的距离
语法letter-spacing：像素值；
注意：每个中文汉字都被当成一个“字”，而每个英文字母也当做一个“字”
词间距（word-spacing）——定义两个单词之间的距离（只针对英文单词而言）
语法word-spacing：像素值；
在实际开发中，我们很少去定义中文网页中的字间距以及词间距，letter-spacing和word-spacing只会用于英文网页。这两个我们平时几乎用不上
五、边框样式
1.边框样式属性
边框宽度（border-width）：取值是一个像素值
边框外观（border-style）：none（无样式）、dashed（虚线）、solid（实线）
边框颜色（border-color）：关键字、16进制RGB值
想要为一个元素定义边框样式，必须要同时设置这三个属性才会有效果
简写形式：border：2px solid red；
2.局部样式
一个边框元素其实有四条边（上、下、左、右）前面我们学习的是四条边的整体样式，现在来学习对某一条边进行单独设置。
上边框（border-top）
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
下边框（border-bottom）
border-bottom-width: 2px;
border-buttomstyle: solid;
border-buttom-color: red;
左边框（border-left）
border-left-width: 2px;
border-left-style: solid;
border-left-color: red;
右边框（border-right）
border-right-width: 2px;
border-right-style: solid;
border-right-color: red;
简写形式：border-right：2px solid red;
去除下边框：（以下三个是等价的）
六、列表样式
1.列表项符号（list-style-type）
在HTML中，我们使用type属性来定义有序列表和无序列表的列表项符号，但是我们说过，结构和样式应该是分离的，所以在CSS中，我们将使用list-style-type属性来定义列表项符号
语法list-style-type：取值；
说明：list-style-type属性是针对ol或者ul元素的，而不是li元素。
list-style-type属性取值（有序列表）
decimal——阿拉伯数字：1，2，3…（默认值）
lower-roman——小写罗马数字：i、ii、iii…
upper-roman——大写罗马数字：I、II、III…
lower-alpha——小写英文字母：a、b、c…
upper-alpha——大写英文字母：A、B、C…
list-style-type属性取值（无序列表）
disc——实心圆●（默认值）
circle——空心圆○
square——正方形■
去除列表项符号
语法list-style-type：none；
2.列表项图片（list-style-image）——使用图片来代替列表项符号
语法list-style-image：url（图片路径）；
在实际开发中，我们会使用更为高级的字体图标（iconfont）技术来实现列表项图片
七、表格样式
1.表格标题位置（caption-side）
语法caption-side：取值；
caption-side属性取值：
top——标题在顶部（默认）
bottom——标题在底部
如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性
2.表格边框合并（border-collapse）——去除表格加入边框后单元格之间的空隙
语法border-collapse：取值；
border-collapse属性取值：
separate——边框分开，有空隙（默认值）
collapse——边框合并，无空隙
border-collapse属性也是在table元素中定义的table{border-collapse: collapse;}
3.表格边框间距（border-spacing）
语法border-spacing：像素值；
border-spacing属性也是在table元素中定义的table{border-spacing：8px;}
八、图片样式
1.图片大小——使用width和height这两个属性来定义图片的大小
语法
在实际开发中，需要使用多大的图片，就用Photoshop制作多大的图片。不建议使用一张大图片，然后再借助width和weight来改变大小。
2.图片边框
语法border：1px solid red；
在“边框样式”中我们已经详细介绍了border属性
3.图片对齐
水平对齐
语法text-align：取值（left、center、right）；
注意：图片的水平对齐不是在img元素中定义的，是在父元素中进行水平对齐的
text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐
垂直对齐
语法vertical-align：取值；
vertical-align属性取值
top（顶部对齐）
middle（中部对齐）
baseline（基线对齐）
bottom（底部对齐）
4.文字环绕——初识float
图文混排，指的是文字环绕着图片进行布局
语法img{float：取值；}
float属性取值
left——元素向左浮动
right——元素向右浮动
九、背景样式
1.背景颜色（background-color）
语法background-color：颜色值（关键字、16进制RGB值）；
两种颜色取值
color&background-color的区别：
color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”
2.背景图片（background-image）
语法background-image：url（图片路径）；
说明：跟引入图片（即image标签）一样，引入背景图片也需要给出图片路径才可以显示
注意：我们需要为div元素添加width和height，背景图片才会显示出来
3.背景图片重复（background-repeat）
语法background-repeat：取值；
background-repeat属性取值：
repeat——在水平方向和垂直方向同时平铺（默认值）
repeat-x——只在水平方向（x轴）上平铺
repeat-y——只在垂直方向（y轴）上平铺
no-repeat——不平铺
注意：元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果
4.背景图片的位置（background-position）
语法background-position：像素值/关键字；
像素值——要设置水平方向和垂直方向的值（像素值）
例如background-position：12px 24px;表示背景图片与该元素左上角的水平方向距离为12px，垂直方向距离为24px。水平距离和垂直距离这两个数值之间要用空格隔开
关键字——也要同时设置水平方向和垂直方向的值（关键字）
语法background-position：水平距离 垂直距离；
关键字取值
top left——左上
top center——靠上居中
top right——右上
left center——靠左居中
center center——正中
right center——靠右居中
bottom left——左下
bottom center——靠下居中
bottom right——右下
5.背景图片固定（background-attachment）——定义背景图片是随元素一起滚动还是固定不动
语法background-attachment：取值；
scroll——随元素一起滚动（默认值）
fixed——固定不动
十、超链接样式
1.超链接伪类
默认情况下：字体为蓝色，带有下划线。
鼠标点击时：字体为红色，带有下划线。
鼠标点击后：字体为紫色，带有下划线。
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。
语法
注意：定义这四个伪类，必须按上面的顺序进行，否则浏览器无法正常显示这四种样式
link样式表示的是a元素从未被访问过。
2.深入了解超链接伪类
我们没有必要定义四种状态下的样式，在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。而对于未访问状态，我们可以直接对a元素定义，没必要使用a:link。
语法
事实上，对于超链接伪类来说，我们只需要记住a:hover这一个就够了，因为在实际开发中也只会用到这一个。
3.深入了解：hover
hover伪类不只限用于a元素，hover伪类可以定义任何一个元素在鼠标经过时的样式！
语法元素：hover{...}
4.鼠标样式
浏览器鼠标样式——cursor（11种）
语法cursor：取值；
cursor属性取值（常用的三种）
default（默认值）——鼠标默认样式
pointer——鼠标手状样式
text——鼠标文本样式
自定义鼠标样式
语法cursor：url（图片地址），属性值；
说明：这个“图片里地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，可以使用Photoshop来制作。
十一、盒子模型
页面中，所有的元素都可以看成一个盒子
1.盒子模型的组成部分
内容区——CSS盒子模型的中心
内边距——内容区和边框之间的距离
外边距——两个盒子之间的距离
边框
2.宽和高（width和height）
元素的宽度和高度是针对内容区而言的。
只有块元素才可以设置width和height，行内元素是无法设置width和height的
3.边框（border）
简写形式（宽度、外观，颜色）
border：1px solid red；
4.内边距（padding）
内边距分为四个方向：上、右、下、左（顺时针方向）
padding-top：像素值；
padding-right：像素值；
padding-bottom：像素值；
padding-left：像素值；
padding简写形式
padding：像素值；表示四个方向的内边距
padding：像素值1 像素值2；表示上下、左右边距
padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（顺时针）
5.外边距（margin）
外边距分为四个方向：上、右、下、左（顺时针方向）
margin-top：像素值；
margin-right：像素值；
margin-bottom：像素值；
margin-left：像素值；
外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。只有当我们加入其它元素当参考对象时，才能看到效果。
当既有父元素，也有兄弟元素时，则这个方向的margin就是相对于兄弟元素而言，如果没有兄弟元素，则相对于父元素而言
margin简写形式与padding一样
二十二、浮动布局
1.正常文档流&脱离文档流
正常文档流——默认情况下的HTML文档结构
脱离文档流——脱离正常文档流，使用浮动和定位去改变
2.浮动——float
float属性取值
left——元素向左浮动
right——元素向右浮动
3.清除浮动——clear
clear属性取值
left——清除左浮动
right——清除右浮动
both——同时清除左浮动和有浮动（常用）
二十三、定位布局
浮动布局比较灵活，但是不容易控制
定位布局精准定位页面中的元素，但是缺乏灵活性
布局定位的四种方式：
固定定位（fixed）
相对定位（relative）
绝对定位（absolute）
静态定位（static）——默认情况下
这四种方式都是通过position属性来实现的
1.固定定位：fixed——指的是被固定的元素不会随着滚动条的拖动而改变位置
语法：
position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
这四个属性不一定全部都用到，一般只会用到其中两个，参考对象是浏览器的四条边
2.相对定位：relative——指的是该元素的位置是相对于它的原始位置计算而来的
语法：
position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
这四个属性不一定全部都用到，一般只会用到其中两个，参考对象是该元素的原始位置
3.绝对定位：absolute（使用最广泛）
语法：
position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
这四个属性不一定全部都用到，一般只会用到其中两个，参考对象是浏览器的四条边；
一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，即这个元素浮于其他元素上面，独立出来
总结：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。
————————————————
版权声明：本文为CSDN博主「MOSIMIN」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
*请认真填写需求信息，我们会在24小时内与您取得联系。
