HTML 与 CSS

主要内容

HTML

HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。

它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。

HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。

基础语法

整体结构

HTML的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。

通常一个HTML网页文件包含3个部分：标记头区…、内容区…和网页区…。

<html>
<head></head>
<body></body>
</html><html><head><meta charset="UTF-8"><title>HTML文档的基本结构</title><script></script><link rel="stylesheet" type="text/css" href=""/></head><body></body>
</html>

html

标志用于HTML文档的最前边，用来标识HTML文档的开始。而标志放在HTML文档的最后边，用来标识HTML文档的结束，两个标志必须一块使用。

head

和构成HTML文档的开头部分。和标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。

在此标志对之间可以使用、、、等标签。

：用来提供关于文档的信息，起始属性为：charset=“utf8”。表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文。

：用来引入css文件

title

定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

注意：标签位于标签内，是标签中唯一要求包含的东西。

body

一般情况下大部分浏览器上显示的内容，都放在body中。但也不排除其他标签可以不用body，比如frameset框架集标签。

和是HTML文档的主体部分，在此标志对之间可包含

、、

…

、

…

、

等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

常用属性

属性	值	描述
bgcolor	#xxxxxx：十六进制的数字，00-ff colorname：Red、Green… rgb(x,x,x)：red、green、blue，x:0-255	规定文档的背景颜色，以后可以用样式取代它
text	rgb(x,x,x) #xxxxxx colorname	规定文档中所有文本的颜色，以后可以用样式取代它

DOCTYPE

Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。

由于使用的场景或者版本的更替间，HTML使用的标准不同，所以需要浏览器按照不同的标准来解析HTML文本内容，这就需要告知浏览器我当前的HTML页面是按照那种方式进行编写的。没有该声明，将是你HTML噩梦的开始。

常用标签

HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。大致可分为如下几类：标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span等。

标题和水平线

标题

-

标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

这样的标签不产生错误，但是不具有标题的效果。

h1标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是一个页面最好只有一个h1标签，否则可能进入搜索引擎的黑名单。

<h1></h1>

水平线

标签在 HTML 页面中创建一条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML 中，

标签没有结束标签。

<hr />

常用属性

属性	值	描述
align	CenterLeftright	规定 hr 元素的对齐方式，以后可以用样式取代它
size	pixels	规定 hr 元素的高度（厚度），后可以用样式取代它
width	Pixels%	规定 hr 元素的宽度，后可以用样式取代它

段落和换行

段落

标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

理解：语文课本中各个段落之间会有大的空隙。

<p></p>

常用属性

属性	值	描述
align	left、right、center、justify	规定段落中文本的对齐方式，以后可以用样式取代它

换行

br标签为换行符号， 标签是空标签（意味着它没有结束标签，因此这是错误的： ）。

注意： 标签只是简单地开始新的一行，而当浏览器遇到

标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用 来输入空行，而不是分割段落。

<br/>

列表

无序列表

由<ul></ul>和<li></li>标签组成。

<ul><li></li><li></li>......
</ul><ul><li>好好学习</li><li>天天向上</li>
</ul>

常用属性

属性	值	描述
type	disc circle square	规定列表的项目符号类型。可以使用样式取代。 dise：实心圆（默认） circle：空心圆 square：方块

有序列表

由

和

标签组成。

<ol><li></li><li></li>......
</ol><ol><li>好好学习</li><li>天天向上</li>
</ol>

常用属性

属性	值	描述
type	1 a A i I	规定在列表中使用的标记类型。 1：用数字形式表示序号（默认） a：用小写字母表示序号 A：用大写字母表示序号 i：用小写罗马数字表示序号 I（大写i）：用大写罗马数字表示序号

div和span

div

是一个块级元素，通常与css配合使用，用于布局。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用额外的样式。

<div>content</div>

常用属性

属性	值	描述
align	left、right、center	规定div元素中的内容的对齐方式，以后可以用样式取代它

span

标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span>content</span>

格式化标签

font

规定文本的字体、字体尺寸、字体颜色

pre

定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

文本标签

**<b>**（粗文本）、**<i>**（斜体文本）、**<u>**（下划线文本）、

< del >（中划线文本）、（下标文本）、（上标文本）

a标签

标签定义超链接，用于从一张页面链接到另一张页面。

元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。

若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

<a href="http://www.baidu.com">百度</a>

常用属性

属性	值	描述
href	URL	连接所要跳转的位置，可能是其他或当前页面。
target	_blank _parent self top Framename作为锚点的a标签的name值	规定在何处打开链接文档。 _blank：开启新页面显示页面； _self：当前页面显示跳转到页面，默认值。 _top：用于有frameset布局的页面，想要覆盖整个页面显示。 Framename：这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。

锚点的实现

利用a标签的name属性：

<a name="top"></a>

一般标签的id属性：div id=""、a id="" 等：

<div id="top"></div>、<a id="top"></a>

锚点定位

<a href="#top">返回首部</a>

图片

img 元素向网页中嵌入一幅图像。

注意：从技术上讲，标签并不会在网页中插入图像，而是从网页上链接图像。标签创建的是被引用图像的占位空间。

<img src="" alt="" >

必须属性

属性	值	描述
alt	text	规定图像的替代文本，一般在图片无法正常显示占位的文字。
src	URL	规定显示图像的 URL。

常用属性

属性	值	描述
align	top、bottom、middle、left、right	规定如何根据周围的文本来排列图像
border	pixels	定义图像周围的边框
height	pixels、%	定义图像的高度。
width	pixels、%	定义图像的宽度。
title	文本	当鼠标在图片上时显示的文字

表格

标签定义 HTML表格。

标签定义表格的行。tr元素包含一个或多个th或td元素

标签定义 HTML 表格中的标准单元格。

定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。

理解：table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。

常用属性

属性	值	描述
align	right、center、left	表格对齐方式
border	px	规定表格边框的宽度
width	% 、px	规定表格的宽度

tr常用属性

属性	值	描述
align	right、left、center	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格行的背景颜色，以后可以用样式取代它
valign	top、middle、bottom	规定表格行中内容的垂直对齐方式，以后可以用样式取代它

的colspan和rowspan分别规定单元格横跨的列数和行数

表单

form

标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。

表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送 form-data 的 HTTP 方法
name	Form_name	规定表单的名称
target	_blank _self _ parent _top framename	规定在何处打开 action URL

method：表单提交方式：get、post

get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

input

标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。

常用属性

属性	值	描述
alt	text	定义图像输入的替代文本。
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
readonly	readonly	规定输入字段为只读。
maxlength	number	规定输入字段中的字符的最大长度。
value	value	规定 input 元素的值。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

若上传文件，请求方式为post，且表单添加一个属性:enctype="multipart/form-data"

注意：

1. 没有name属性的属性是无法提交到后台的！！！！

2. Radio单选按钮以name相同为一组。

3. Checkbox复选按钮以name相同为一组。

textarea

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content</textarea>

label

标签为input 元素定义标注（标记）。

label元素不会呈现任何的特殊效果。

label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>

button

<button>按钮</button>

常用属性

属性	值	描述
disabled	disabled	禁用该按钮。
type	button、submit、reset	规定按钮的类型。
value	text	规定按钮的初始值。
name	button_name	规定按钮的名称。

select

用于定义下拉列表

<select name="color" ><option value="red">红色</option><option value="green">绿色</option><option value="blue">蓝色</option>
</select>

select常用属性

属性	值	描述
disabled	disabled	禁用该下拉框。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
size	number	规定下拉列表中可见选项的数目。

option常用属性

属性	值	描述
disabled	disabled	禁用该下拉框。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

常用字符实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

实体名称对大小写敏感！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kTJzeofy-1606890041388)(/1579341520148.png)]

标签的分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素

元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素

和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素

和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

CSS

CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T1bfz3JL-1606890041392)(/图片1.png)]

CSS的基本使用

CSS基本语法

CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2ZMZ9D7-1606890041399)(/QQ截图20200205160701.png)]

选择器名 {属性 : 属性值;......
}

div {background-color : red;
}

注意：

css声明要以分号;结束，声明以**{}**括起来
建议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family: “agency fb”;

注释

多行注释：

/* 这里的内容就是注释 */

CSS的使用

1. 行内式

行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

<p style="color:red;font-size:50px;">这是一段文本</p>

在当前元素使用 style 属性的声明方式。

style 是行内样式属性；

color 是颜色属性；red 是颜色属性值；

font-size是字体大小属性；50px 是字体大小属性值

2. 嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套

<style type="text/css">p {color: blue;font-size: 40px;}</style>

3. 引入外联样式文件

在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

style.css

p {color: green;font-size: 30px;}

test.html

<link rel="stylesheet" type="text/css" href="style.css">

rel:rel 属性规定当前文档与被链接文档之间的关系。

stylesheet:文档的外部样式表。

很多时候，大量的 HTML 页面使用了同一个CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过元素去引入它。

注意：当有多重样式时，记住前提规则，越精确越优先。

CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

CSS选择器有很多，掌握常用的即可；

基本选择器

通用选择器

选择所有 *

* {......
}

* {color: orange;
}

元素选择器

选择指定标签

元素名称 {......
}

p {color: red;font-size: 20px;
}

ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {......
}

#p1 {font-weight: bold;
}

类选择器

选择设置过指定class属性值的元素 .

.class属性值 {......
}

.hidden {display: none;
}

分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2,... {......
}

h2 , #pre1 {color: orange;font-style: italic;
}

CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1

类选择器：10

id选择器：100

内联样式：1000

组合选择器

CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。

在 CSS 中包含了四种组合方式: 后代选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），普通兄弟选择器（以波浪线分隔）。

后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素，以空格分隔

选择器1 选择器2 {......
}

.food  li {border: 1px solid red;
}

<h1>食物</h1>
<ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li>
</ul>

子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号分隔

选择器1 + 选择器2 {......
}

#d + div {border: 1px solid red;
}

html代码同上

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

选择器1 + 选择器2 {......
}

#d + div {border: 1px solid red;
}

<div id="d">相邻兄弟选择器1<ul><li>开心麻花</li><li>贾玲</li><li>宋小宝</li></ul>
</div>
<div>相邻兄弟选择器2
</div>

普通兄弟选择器

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

选择器1 ~ 选择器2 {......
}

li ~ li {background-color : yellow;
}

<div>普通兄弟选择器1<ul><li>开心麻花</li><li>贾玲</li><li>宋小宝</li><li>沈腾</li><li>王宁</li></ul>
</div>

CSS常用属性设置

背景

CSS 背景属性用于定义HTML元素的背景效果

background-color

设置元素的背景颜色

body {background-color:#ff0000;
}

background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {background-image:url('paper.gif');
}

background-repeat

设置是否及如何重复背景图像

body {background-image: url(img/logo.jpg);   background-repeat: no-repeat;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWoGAyCC-1606890041406)(/QQ截图20200205171029.png)]

文本

color

body {color:blue;
}
h1 {color:#00ff00;
}
h2 {color:rgb(255,0,0);
}

text-align

设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

body {text-align:center;
}
h1 {text-align:right;
}
h2 {text-align:right;
}

text-decoration

规定添加到文本的修饰，属性值：none、underline、overline、line-through

1）underline

对文本添加下划线，与HTML的u元素相同。

2）overline

对文本添加上划线。

3）line-through

对文本添加中划线，与HTML中的s和 strike 元素相同。

4）none

关闭原本应用到元素上的所有装饰。

h3 {text-decoration:underline;
}

text-indent

设置文本首行缩进

p.ident2 {text-indent: 2em;
}

em一个相对值，例如页面的文本大小为17px,则2em就为17px*2

字体

font-family

文本字体，该属性设置文本的字体。

font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。

注意：

1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：

body {font-family: "arial black";
}

2）多个字体系列是用一个逗号分隔指明

/* 靠前的字体先生效 */
p{font-family: 微软雅黑,黑体,"agency fb";
}

font-size

文本大小

body {font-size: 50px;  /*字体大小50px*/
}
#span1 {font-size: 25px;  /*字体大小25px*/
}

font-style

字体风格，该属性最常用于规定斜体文本。属性值：normal、italic、oblique

1）normal：文本正常显示；

2）italic：文本斜体显示；

3）oblique：文本倾斜显示，oblique是将文字强制倾斜。

说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜。

font-weight

字体加粗，该属性设置文本的粗细。

bold：可以将文本设置为粗体。

100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

100 对应最细的字体变形；

900 对应最粗的字体变形；

400 等价于 normal；

700 等价于 bold。

对齐方式

text-align

规定元素中的文本的水平对齐方式。属性值如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DueOLrbp-1606890041410)(/QQ%E6%88%AA%E5%9B%BE20200205180655.png)]

注意：

值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。对最后一行不生效。

display属性

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCti0P8D-1606890041414)(/QQ%E6%88%AA%E5%9B%BE20200205181007.png)]

浮动

float的属性值有none、left、right。

只有横向浮动，并没有纵向浮动。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

盒子模型

border、padding、margin三个属性构成了盒子模型。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eokXYxqD-1606890041416)(/QQ截图20200205174125.png)]

border

设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜色

table, th, td { border: 1px solid black;
}
table { width:100%; height:50px;
}

2）使用border-width、border-style、border-color单独设置

table,td {border-width: 1px;border-style: dotted;border-color: green;
}

3）border-style的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NBZDIqU6-1606890041419)(/QQ截图20200205174509.png)]

4）border-collapse

设置是否将表格边框折叠为单一边框。

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

table { border-collapse : collapse;
}

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：

td { padding:15px;
}

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认按照上右下左的顺序设定

td .test1 {padding: 1.5cm
}
td .test2 {padding: 0.5cm 2.5cm
}

<table border="1"><tr><td class="test1">这个表格单元的每个边拥有相等的内边距。</td></tr>
</table>
<br />
<table border="1"><tr><td class="test2">这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。</td></tr>
</table>

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {margin: 2px 4px 3px 4px;
}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{margin-top:100px; margin-bottom:100px;margin-right:50px; margin-left:50px;
}
*{margin: auto auto;
}
*{margin: 100px auto;
}

说明：

auto：自动，可以理解为居中的意思。浏览器自动计算外边距。

margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。

但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态，效果如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GWVl6PH-1606890041422)(/图片3.png)]

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距，效果如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a2Rt0CxL-1606890041425)(/图片4.png)]

注意：此时使用margin-top不生效。了解

d">默认按照上右下左的顺序设定

td .test1 {padding: 1.5cm
}
td .test2 {padding: 0.5cm 2.5cm
}

<table border="1"><tr><td class="test1">这个表格单元的每个边拥有相等的内边距。</td></tr>
</table>
<br />
<table border="1"><tr><td class="test2">这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。</td></tr>
</table>

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {margin: 2px 4px 3px 4px;
}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{margin-top:100px; margin-bottom:100px;margin-right:50px; margin-left:50px;
}
*{margin: auto auto;
}
*{margin: 100px auto;
}

说明：

auto：自动，可以理解为居中的意思。浏览器自动计算外边距。

margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。

但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态，效果如下： [外链图片转存中…(img-9GWVl6PH-1606890041422)]

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距，效果如下： [外链图片转存中…(img-a2Rt0CxL-1606890041425)]

注意：此时使用margin-top不生效。了解

乐字节炫酷HTML 与 CSS相关推荐

HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
html顺序进场动画,十六种炫酷纯css加载动画（一）
一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...
button按钮的属性设置_web前端入门到实战：CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件 1.轮播图样式上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用文件的目录路径为: 需要轮播图插件的 ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
利用CSS变量实现炫酷的悬浮效果
最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感.这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变.这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意 ...
css初始化_利用CSS变量实现炫酷的悬浮效果
这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变.这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率. 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实 ...
java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...

乐字节炫酷HTML 与 CSS

HTML 与 CSS

主要内容

HTML

基础语法

标签

单标签

单标签属性

双标签

双标签属性

整体结构

html

head

title

body

…

DOCTYPE

常用标签

标题和水平线

标题

-

水平线

段落和换行

段落

换行

列表

无序列表

有序列表

div和span

div

span

格式化标签

font

pre

文本标签

a标签

图片

表格

表单

form

input

textarea

label

button

select

常用字符实体

标签的分类

块级元素

行内元素

行内块状元素

CSS

CSS的基本使用

CSS基本语法

注释

CSS的使用

CSS选择器

基本选择器

通用选择器

元素选择器

ID选择器

类选择器

分组选择器

组合选择器

后代选择器（派生选择器）

子元素选择器

相邻兄弟选择器

普通兄弟选择器

CSS常用属性设置

背景

background-color

background-image

background-repeat

文本

color

text-align

text-decoration

text-indent

字体

font-family

font-size