前端(通常指的是用户能够看到)网页通常是由三部分组成:
1.html:也是前端网页基本框架结构,类似于骨架一样的作用
2.CSS: 也叫层叠样式表,就是为美化界面而存在
3.Javascript: 使页面具有动态的效果(包括与用户的一个交互)
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。
所谓超文本Hypertext
,是指连接单个或者多个网站间的网页的链接。我们通过链接,就能访问互联网中的内容。
所谓标记Markup
,是用来注明文本,图片等内容,以便于在浏览器中显示,例如,
等。
HTML页面由一系列的元素(elements) 组成,而元素是使用标签创建的。
一对标签( tags)可以设置一段文字样式,添加一张图片或者添加超链接等等。 例如:
<h1>今天是个好日子h1>
在HTML中,标签表示标题,那么,我们可以使用开始标签和结束标签包围文本内容,这样其中的内容就以标题的形式显示了。
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中,加入属性。通常以名称=值
成对的形式出现,比如:name=‘value’。例如:
<h1 align="center">今天是个好日子!!!h1>
在HTML标签中,align
属性表示水平对齐方式,我们可以赋值为 center
表示 居中 。
属性也可当做是html原始一种修饰界面的方式之一
: 声明文档类型。规定了HTML页面必须遵从的良好规则,从HTML5后,
是最短的有效的文档声明。
:这个标签包裹了整个完整的页面,是一个根元素(顶级元素)。其他所有元素必须是此元素的后代,每篇HTML文档只有一个根元素。
:这个标签是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。关于
元素的内容。目前主要了解两个标签:
:包含了文档内容,你访问页面时所有显示在页面上的文本,图片,音频,游戏等等。body也是代码主体部分,也是希望显示的界面内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个HTML页面title>
head>
<body>
body>
html>
整个html界面包含head和body两部分组成,学习html时主要学习的东西便是body中一些标签的使用,以及标签中附带的一些属性。
标签的构成:
<标签名 属性名=属性值>文本内容标签名>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个HTML页面title>
head>
<body>
<p>这是一个段落标签!p>
<p>这是第二段标签p>
<br>
这是其他内容
body>
html>
使用文本内容标签设置文字基本样式。
标签名 | 作用 |
---|---|
p | 表示文本的一个段落 |
h | 表示文档标题, ,呈现了六个不同的级别的标题, 级别最高,而 级别最低 |
hr | 表示段落级元素之间的主题转换,一般显示为水平线 |
li | 表示列表里的条目。 |
ul | 表示一个无序列表,可含多个元素,无编号显示。 |
ol | 表示一个有序列表,通常渲染为有带编号的列表 |
em | 表示文本着重,一般用斜体显示 |
strong | 表示文本重要,一般用粗体显示 |
font | 表示字体,可以设置样式(已过时) |
i | 表示斜体 |
b | 表示加粗文本 |
1.3.2标签嵌套:
<p><b>这是第三段,也是强调内容!b>p>
顾名思义就是在一个标签中去镶嵌另一个标签,这种在html中用得也是蛮多的
块级元素:
前后独占一行。块级元素(block)在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。比如 效果 行内元素 不用换行,行内元素通常会出现在块级元素中,进行一些文本的显示。 两个常用的块级和行内标签: div和span标签在布局中有着举足轻重的作用 属性是html中一大重要的组成,强调属性的格式和作用 **概述:**标签属性,主要用于拓展标签。属性包含元素的额外信息,这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据,属性总是以 属性名:同一个标签中,属性名不得重复。 大小写:属性和属性值对大小写不敏感。不过W3C标准中,推荐使用小写的属性/属性值。 引号:双引号是最常用的,不过使用单引号也没有问题。 常用属性: 实现效果: 基本布局分析: 文本由几部分构成,我们可以使用div将页面分割布局。先来了解一下,使用div如何进行简单的布局。 在head标签中,通过style标签加入样式。 基本格式: 多个属性名格式: div的多样式: 一个属性名可以含有多个值,同时设置多样式。 格式: tips: 为了布局方便,我们通常可以先设置边框的样式,进行布局。结束后,再去掉边框,直观展示完整界面,也就是通常会把显示的基本骨架描绘出来,再慢慢去增添内容。 发现通过div设置的样式都是一致的,无法个性化布局。如何区分不同的div呢? 使用class(类)的值,格式: 所以,使用class属性值,可以帮助我们区分div,更加精确的设置标签的样式。 主体部分分为三部分,但每个div又独占一行,想要使用div布局,就还需要加入浮动属性 float: 指定一个元素可沿其左侧或右侧放置,使用了该属性的元素(通常放在左侧或右侧),允许文本环绕该属性流动,且该元素移除,其他部分元素依然正常使用。 当超出返回时,其浮动在其周围的块级元素会进行自动换行操作。在设计整体框架浮动时,需要把边框线所占的比例也考虑进行才能成功浮动。 注意style中进行注释时需要前后进行双向闭合 使用图片标签时路径尽量选用相对路径,避免造成不显示问题 其他属性: 去掉下划线 根据某些样式的布局需求,去除下划线更为美观。 使用图片img标签的src属性时,尽量采用相对路径,避免无法显示问题。还有就是使用时反斜线的朝向(向右)! hr下滑线标签属于块级div内部的一个标签 HTML代码 样式代码 效果如下: HTML代码 样式代码 效果如下: HTML代码 效果如下 其余部分便是也类似 hr下滑线标签属于块级div内部的一个标签 总结: 写一个前端页面,就像修房子一样。想把基本框架搭建出来,再在框架的基础上继续搭建,而网页基本框架就是布局区域。 之所以把表单单独列出来,是因为后续进行数据交互时经常使用表单相关的 form标签 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eccK4RDh-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\9.产生效果.png)] 表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。 label标签:表单的说明。 input标签:输入控件。 type属性:表示输入类型,text值为普通文本框 text:普通文本 password:密码框 email: 以@结尾的邮箱框 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FJlIIMI-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\10.邮箱效果.png)] radio:单选框 checkbox:复选框 HTML5新增的type值 id属性:表示标签唯一标识 name属性:表示标签名称 value属性:表示标签数据值 placeholder:默认提示信息 required: 加上此属性则需要必填 代码实现: label在于说明元素,实际作用并不大,且要与后续input标签id对应才行。 fieldset+legend效果 textarea效果,col(行)近似相当于宽,row(行)近似相当于高(列宽行高) 总结: html标签的整体总结就是得多用,用多了自然便也就熟了。 概述: CSS也称作层叠样式表,其作用便是对于html的一个美观,算是对html的一种美观。 Css的基本构成:选择器+声明 之前的html页面中已经进行了常规的使用,这里就不做过多赘述。 在外面单独定义一个”.css“的文件,再在head标签中通过link标签指定路径进行连接应用。 作用概述: 选定html中指定元素进行修饰,而学习选择器的目的便是为了更好的选择想要修饰元素,然后告诉浏览器那些是自己选择的元素。 选择器的分类: 页面元素: 选择器: 页面元素: 选择器: 页面元素: 选择器: 效果如图: 页面元素: 选择器: 页面元素: 选择器和效果图,示例1 选择器和效果图,示例2 选择器和效果图,示例3 伪类选择器指的是元素处于特定效果时,所要显示出效果。如:一些元素被鼠标悬停时所要显示的效果。 格式: 伪类的顺序: 1.link 2.visited :指的是当前已访问的界面。 3.hover 4.active:点开新界面后原始界面该元素的反应 一般按照这个顺序否则可能失效 HTML 代码 : 页面元素: 选择器: 选择器: 选择器: 选择器: 由行和列组成的数据称之为表格。 实际进行设计时,当table标签镶嵌在块中时,宽度属性尽量调成100%,能够避免很多问题。 通常tr与td搭配使用才能产出表格样式,不然不行 需要注意的便是关于跨行以及跨列的操作,即colspan和rowspan一般来说在设置th时采用。 盒子模型只针对块级元素起作用,像img这种非块级元素在使用盒子模型相关属性时需要转换为块级。 display:block 盒子模型算是元素的一种布局方式,由内边距 +外边距+元素+边框组成 进行边距设置时,通常采用的方向为:上 右 下 左 外边距 单独设置边框的外边距,设置上、右、下、左方向: 值含义: 一个值时 两个值时 三个值时 四个值时 内边距 与外边距类似,单独设置边框的内边距,设置上、右、下、左方向: ,
, ,
<li>这是一个标签li>
<li>这还是一个块级标签li>
<li>这也是一个块级标签li>
<span>这是一个行内span>
<span>这是第二个行内元素!span>
1.5 标签属性
name = value
的格式展现。
属性名
作用
class
定义元素类名,用来选择和访问特定的元素
id
定义元素唯一标识符,在整个文档中必须是唯一的
name
定义元素名称,可以用于提交服务器的表单字段
value
定义在元素内显示的默认值
style
定义CSS样式,这些样式会覆盖之前设置的样式
1.6新闻案例分析
1.6.2 实现方法
div样式布局
格式:
<style>
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
style>
<style>
标签名{
属性名:属性值1 属性值2 属性值3;
}
style>
1.先把基本布局框调出
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新闻案列title>
<style>
li{
display: inline; //内联样式无宽高
display: inline-block; //内联样式,有宽高
}
div{
border: 1px solid blue;
}
style>
head>
<body>
<div>leftdiv>
<div>centerdiv>
<div>rightdiv>
body>
html>
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
2.浮动布局和清除
.left{
font-family: 楷体;
font-size: 20px;
width: 20%;
float: left;
height: 600px;
}
.center{
font-family: 楷体;
font-size: 20px;
width: 60%;
float: left;
height: 600px;
}
.right{
font-family: 楷体;
font-size: 20px;
width: 19%;
float: left;
height: 600px;
}
li{
display: inline; /*内联样式无宽高*/
display: inline-block; /*内联样式,有宽高*/
}
1.7.3 图片标签&&超链接标签
标签名
作用
备注
img
可以显示一张图片(本地或网络)
src属性,这是一个必需的属性,表示图片的地址。
属性名
作用
备注
title
鼠标悬停(hover)时显示文本。
alt
图形不显示时的替换文本。
height
图像的高度。
width
图像的宽度。
标签名
作用
备注
a
表示超链接。
href属性,表示超链接指向的URL地址。
属性名
作用
target
页面的打开方式(_self当前页 _blank新标签页)。
a {
text-decoration:none; // none 表示不显示
}
跳转
a:hover{ /*鼠标悬浮时的样式控制*/
color: red;
}
"demo01.html" target="_blank">跳转
"../Code_images/ad1.jpg" alt="图片找不到了" title="可点击">
具体实现
1.8 顶部实现
1.8.1 使用标签
1.8.2 实现步骤
1.8.3 实现顶部条
<div class="top_bar">
<img src="../img/j1.png">
div>
img{
width: 100%;
}
1.8.4 实现导航条
<div class="nav_bar">
<img src="../img/j2.png" width="100%">
div>
<hr size="1"/>
hr {
color: lightgrey;
size: 1px;
}
1.8.5 实现左部分享
<div class="left">
<img src="../img/j3.png" />
div>
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新闻案列title>
<style>
/* div{
border: 1px solid blue;
}*/
/*左侧分享*/
.left{
font-family: 楷体;
font-size: 20px;
width: 20%;
float: left;
height: 600px;
}
/*中间文本*/
.center{
font-family: 楷体;
font-size: 20px;
width: 60%;
float: left;
/*height: 600px;*/
}
/*右侧广告*/
.right{
font-family: 楷体;
font-size: 20px;
width: 19%;
float: left;
height: 600px;
}
.footer{
font-family: 楷体;
font-size: 20px;
/*border: blue solid 5px;*/
clear: both;/*清除浮动避免受之前元素影响*/
text-align: center;
background-color: cornflowerblue;
}
a{
text-decoration: none;
color: black;
}
a:hover{ /*鼠标悬浮时的样式控制*/
color: red;
}
hr{
color: black;
size: 1px;
}
style>
head>
<body>
<div class="top">
<img src="../Code_images/j1.png" alt="图片未找到" width="100%">
div>
<hr size="1">
<div class="nvibar">
<img src="../Code_images/j2.png" alt="图片未找到" width="100%" title="导航栏">
<hr>
div>
<div class="left">
<img src="../Code_images/j3.png" alt="" title="左侧导航">
div>
<div class="center">
<h1>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?h1>
<hr>
<div>
<font color="gray" size="3">
<em>作者 2019-11-11 11:11:11em>
font>
div>
<div>
<ol>
<li>蚂蚁借呗,芝麻分600并且受到邀请开通福利,这个就是支付宝贷款,直接秒杀了银行贷款和线下金融公司,是现在支付宝用户使用最多的。li>
<li>微粒贷:于2015年上线,主要面向QQ和微信征信极好的用户而推出,受到邀请才能申请开通,额度最高有30万,难度较大li>
<li>蚂蚁巴士:这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等,目前非常火爆li>
ol>
div>
<p>
<strong> 三、芝麻分600以上福利之国际驾照。strong>我们经常听说的可能只是中国驾照,但现在芝麻分已经应用到了国际领域,只要你的芝麻分够550就可以免费办理国际驾照,也有不少人非常佩服马云,一个简单的芝麻分居然有如此大的功能,也从侧面反应出来马云在国际上的地位,这个国际驾照是由新西兰、德国、澳大利亚联合认证,可以在全球200多个国家通行,相信大家一定都有一个自驾全球的梦想吧,而现在支付宝就给了你一把钥匙,剩下的就你自己搞定了!有没有想带着你的女神来一次浪漫之旅呢?
p>
<p>
随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢?
p>
<img src="../Code_images/1.jpg" width="80%" alt="芝麻信用">
div>
<div class="right">
<img src="../Code_images/ad1.jpg" alt="美女" width="75%">
<img src="../Code_images/ad2.jpg" alt="" width="75%">
div>
<div class="footer">
<hr>
<a href="demo01.html" target="_blank">跳转
<a href="#">关于黑马 a>
<a href="#">帮助中心 a>
<a href="#">开放平台 a>
<a href="#">诚聘英才 a>
<a href="#">联系我们 a>
<a href="#">法律声明 a>
<a href="#">隐私政策 a>
<a href="#">知识产权 a>
<a href="#">廉正举报 a>
a>
div>
body>
html>
二.表单及盒子模型
2.1 表单
属性名
作用
备注
action
处理此表单信息的Web服务器的URL地址
method
提交此表单信息到Web服务器的方式
可能的值有get和post,默认为get
autocomplete
自动补全之前input中写过的一些内容
HTML5
<form action="#" method="post" autocomplete="on">
用户名:<input type="text" name="username">
<button type="submit" >提交button>
form>
2.2 表单元素入门
标签名
作用
备注
**label **
表单元素的说明,配合表单元素使用
for属性值为相关表单元素的id属性值
input
表单中输入控件,多种输入类型,用于接受来自用户数据
type属性值决定输入类型
button
页面中可点击的按钮,可以配合表单进行提交
type属性值决定按钮类型
1)简单的文本输入框
属性值
作用
备注
date
HTML5 用于输入日期的控件
年,月,日,不包括时间
time
HTML5 用于输入时间的控件
不含时区
datetime-local
HTML5 用于输入日期时间的控件
不包含时区
number
HTML5 用于输入浮点数的控件
range
HTML5 用于输入不精确值控件
max-规定最大值
min-规定最小值
step-规定步进值
value-规定默认值
search
HTML5 用于输入搜索字符串的单行文本字段
可以点击
x
清除内容
tel
HTML5 用于输入电话号码的控件
url
HTML5 用于编辑URL的字段
可以校验URL地址格式
<label for="username">用户名:label>
:<input type="text" name="username" id="username">
<button type="submit" >提交button>
HTML5新增属性
属性名
作用
备注
placeholder
提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。
仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required
这个属性指定用户在提交表单之前必须为该元素填充值
1. 布尔属性,可省略属性值表示true
2. 当type属性是hidden,image或者button类型时不可使用
autocomplete
自动补全,规定表单或输入字段是否应该自动完成。当自动完成开启,浏览器会基于用户之前的输入值自动填写值。
1. 开启为on,关闭为off
2. 可以设置指定的字段为off,关闭自动补全2.3 更多表单元素
标签名
作用
备注
select
表单的控件,下拉选项菜单
与option配合实用
optgroup
option的分组标签
与option配合实用
option
select的子标签,表示一个选项
textarea
表示多行纯文本编辑控件
rows表示行高度, cols表示列宽度
fieldset
用来对表单中的控制元素进行分组(也包括 label 元素)
legend
用于表示它的fieldset内容的标题。
fieldset 的子元素
<fieldset>
<legend>性别选择legend>
<input type="radio" value="man" name="Sex">男
<input type="radio" value="woman" name="Sex">女
<select name="choice" id="2">
<option value="重庆">重庆option>
<option value="北京">北京option>
<option value="上海">上海option>
select>
<button type="submit" >提交button>
fieldset>
<div>
<label for="Desc">个性宣言: label>
<textarea name="Desc_self" id="Desc" cols="30" rows="5" placeholder="写下你的个性签名">textarea>
div>
二.CSS
1.CSS的基本构成
选择器{
属性名:属性值;
属性名2:属性值2;
}
2. 使用方法
2.1 内联样式
2.2 外联样式
<head>
<meta charset="UTF-8">
<title>Css基本教学title>
<style>
h3{
background-color:orange;
}
style>
<link rel="stylesheet" href="Style.css">
head>
<body>
<h1 style="color: blue; font-family: 楷体; background-color: yellow; border: 1px solid black;">
标签内联
h1>
<textarea name="u2" id="u2" cols="20" rows="5">
这是外联样式!
textarea>
<h3>
这是内联样式。
h3>
body>
2.3选择器(!!!)
分类
名称
符号
作用
示例
基本选择器
元素选择器
标签名
基于标签名匹配元素
div{ }
用得较多
类选择器
.
基于class属性值匹配元素
.center{ }
ID选择器
#
基于id属性值匹配元素
#username{ }
属性选择器
属性选择器
[]
基于某属性匹配元素
[type]{ }
伪类选择器
伪类选择器
:
用于向某些选择器添加特殊的效果,通常用于动态效果展示
a : hover{ }
组合选择器
后代选择器
空格
使用
空格符号
结合两个选择器,基于第一个选择器,匹配第二个选择器的所有后代元素.top li{ }
子级选择器
>
使用
>
结合两个选择器,基于第一个选择器,匹配第二个选择器的直接子级元素.top > li{ }
同级选择器
~
使用
~
结合两个选择器,基于第一个选择器,匹配第二个选择器的所有兄弟元素.l1 ~ li{ }
相邻选择器
+
使用
+
结合两个选择器,基于第一个选择器,匹配第二个选择器的相邻兄弟元素.l1 + li{ }
通用选择器
*
匹配文档中的所有内容
*{ }
1)元素选择器
<div>
<ul>
<li>List item 1li>
<li>List item 2li>
<li>List item 3li>
ul>
<ol>
<li>List item 1li>
<li>List item 2li>
<li>List item 3li>
ol>
div>
选择所有li标签,背景变成蓝色
li{
background-color: aqua;
}
2)类选择器
<div>
<ul>
<li class="ulist l1">List item 1li>
<li class="l2">List item 2li>
<li class="l3">List item 3li>
ul>
<ol>
<li class="olist l1">List item 1li>
<li class="olist l2">List item 2li>
<li class="olist l3">List item 3li>
ol>
div>
选择class属性值为l2的,背景变成蓝色
.l2{
background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
color: wheat;
}
3)ID选择器
<div>
<ul>
<li class="l1" id="one">List item 1li>
<li class="l2" id="two">List item 2li>
<li class="l3" id="three">List item 3li>
ul>
<ol>
<li class="l1" id="four">List item 1li>
<li class="l2" id="five">List item 2li>
<li class="l3" id="six">List item 3li>
ol>
div>
#tow{
background-color: aqua;
}
4)通用选择器
<div>
<ul>
<li class="l1" id="one">List item 1li>
<li class="l2" id="two">List item 2li>
<li class="l3" id="three">List item 3li>
ul>
<ol>
<li class="l1" id="four">List item 1li>
<li class="l2" id="five">List item 2li>
<li class="l3" id="six">List item 3li>
ol>
div>
所有标签
*{
background-color: aqua;
}
2.2.2 属性选择器
<ul class="l1">
<li >List item 1li>
<li >List item 2li>
<li >List item 3li>
ul>
<ul class="l2">
<li id="four">List item 1li>
<li id="five">List item 2li>
<li id="six">List item 3li>
ul>
<p class="">
p item
p>
[属性名]{ }
标签名[属性名]{ }
标签名[属性名='属性值']{ }
2.2.3 伪类选择器
标签名:伪类名{}
CSS 代码 :
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
color: red;
}
2.2.4 组合选择器
<div>
<ul class="l1">
<li>List item 1li>
<li>List item 2li>
<li>List item 3li>
<ul class="l2">
<li id="four">List item 1li>
<li id="five">List item 2li>
<li id="six">List item 3li>
ul>
ul>
div>
1)后代选择器
.l1 li{
background-color: aqua;
}
2)子级选择器
.l1 > li{
background-color: aqua;
}
3)同级选择器
.l1 ~ li{
background-color: aqua;
}
4)相邻选择器
.l1 + li{
background-color: aqua;
}
2.4 总结
3.表格Table
2)表格标签
标签名
作用
备注
table
表示表格,是数据单元的行和列的两维表
容器,默认无样式
tr
table row,表示表中单元的行
td
table data,表示表中一个单元格
th
table header,表格单元格的表头,通常字体样式加粗居中
<table border="1px solid black;">
<tr>
<th rowspan="3">Groupth>
<th>FirstNameth>
<th>LastNameth>
tr>
<tr>
<td>Jacktd>
<td>Joctd>
tr>
<tr>
<td>Miketd>
<td>Chentd>
tr>
table>
4.盒子模型
.top > img{
display: block;
margin: 0px auto;
border: 1px solid red;
}
- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边。
margin-top
margin-right
margin-bottom
margin-left
/* 所有 4 个外边距都是 10px */
margin:10px;
/* 上外边距和下外边距是 10px
右外边距和左外边距是 5px */
margin:10px 5px;
margin:10px auto;
auto 浏览器自动计算外边距,具有居中效果。
/* 上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/
margin:10px 5px 15px;
/*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/
margin:10px 5px 15px 20px;
padding-top
padding-right
padding-bottom
padding-left