前端「HTML+CSS」零基础入门学习笔记

文档中心

HTML+CSS入门笔记目录

一、HTML 简介
- 1、HTML是什么？
- 2、什么是HTML标签？
二、HTML 文档结构
- 1、HTML基本结构
- 2、文档类型声明标签
- 3、lang语言属性
- 4、字符集与编码
三、HTML 基础标签
- 1、标题标签
- 2、段落标签
- 3、空格标签
- 4、注释标签
- 5、换行标签
- 6、盒子标签
- 7、水平线标签
- 8、预格式化文本标签
- 9、文本格式化标签
- 10、图像标签
- 11、超链接标签
- 12、列表标签
- 13、表格标签
- 14、表单标签
四、HTML 基础（理解）
- 15、文本框和文本域的区别
- - 一、文本框与密码框
  - 二、select下拉表单
  - 三、文件域和按钮
  - 四、单选框和复选框
- 16、常见属性解析
- 17、特殊字符
- 18、锚点定位
一、CSS简介
- 1、什么是CSS？
- 2、为什么使用CSS？
- 3、CSS的作用
二、CSS语法
- 1、CSS基础语法
- 2、CSS注释语法
- 3、CSS应用方法
三、CSS选择器
- 1、元素选择器
- 2、类选择器
- 3、ID选择器
- 4、组合选择器
- 5、后代选择器
- 6、子元素选择器
- 7、兄弟选择器
- 8、全局选择器
- 9、伪类选择器
- 10、选择器优先级
四、CSS常用属性
- 1、字体属性
- 2、文本属性
- 3、列表属性
- 4、表格属性
- 5、背景属性
- 6、对齐方式
- 7、盒子模型
五、CSS定位
- - 1、`static`定位
  - 2、`fixed` 定位
  - 3、`relative` 定位
  - 4、`absolute` 定位
  - 5、`sticky` 定位
  - 6、重叠的元素
六、CSS浮动
- 1、什么是 CSS Float（浮动）？
- 2、元素怎样浮动
- 3、彼此相邻的浮动元素
- 4、清除浮动 - 使用 clear
七、CSS网页布局
- 1、网页布局
- 2、头部区域
- 3、菜单导航区域
- 4、内容区域
- 5、底部区域
- 6、响应式网页布局

一、HTML 简介

1、HTML是什么？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2、什么是HTML标签？

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的，例如和
有些特殊的标签必须是单个标签，例如
标签对中的第一个标签是开始标签，第二个标签是结束标签

<html><head><title>前端开发</title></head><body><h1>HTML</h1><p> HTML超文本标记语言，是用来描述网页的一种标准语言。</p></body></html>

二、HTML 文档结构

1、HTML基本结构

标签名	定义	说明
	文档声明	声明这是一个HTML文档
	HTML标签	告诉网页浏览器，整个网页是从这里开始的，然后到结束
	文档的头部	在head标签中必须包含title标签
	文档的标题	显示在搜索引擎结果中的页面标题
	文档的主体	元素包含文档的所有内容

HTML 文档是用来描述网页的，包含 HTML 标签和纯文本。
HTML文档的后缀名必须是.html或.htm
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

2、文档类型声明标签

是文档类型声明标签
声明位于文档中的最前面的位置
作用：告诉浏览器使用哪种HTML版本来显示网页

3、lang语言属性

<html lang="en">

en定义语言为英语
zh-CN定义语言为中文
lang语言属性作用：定义当前文档显示的语言

4、字符集与编码

<meta charset="UTF-8">

标签：元数据
charset 属性：用来规定 HTML 文档应该使用哪种字符编码
常用的编码有GB2312、GBK 和 UTF-8，UTF-8基本包含了全世界所有国家需要用到的字符

三、HTML 基础标签

1、标题标签

<body>    <h1>一级标签</h1>    <h2>二级标签</h2>    <h3>三级标签</h3>    <h4>四级标签</h4>    <h5>五级标签</h5>    <h6>六级标签</h6></body>

标题标签 可使内容加粗
标签序号越小字号越大
每个标题独占一行

2、段落标签

<body><p>段落标签</p>    <p>段落1</p>    <p>段落2</p></body>

可以对HTML文档内容分为多个段落。

3、空格标签

在html代码中每输入一个，就表示一个空格

4、注释标签

注释的快捷键是： ctrl + / 或者 ctrl +shift + /
注释是给人看的，目的是为了更好的解释这部分代码是干啥的，程序是不执行这个代码的

5、换行标签

    <br>

单词缩写： break 打断 ,换行
在HTML中，如果希望某段文本强制换行显示，就需要使用换行标签

6、盒子标签

和

<div> 这是头部 </div>    <span>今日价格</span>

和是没有语义的 是我们网页布局主要的2个盒子
一行只能放一个
一行上可以放多个

7、水平线标签

<hr/>是单标签

单词缩写： horizontal 横线
就是创建横跨网页水平线的标签
水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

8、预格式化文本标签

<pre>  此例演示如何使用 pre 标签  对空行和 空格  进行控制</pre>

标签可定义预格式化的文本
预格式化文本就是按照我们预先写好的文字格式来显示页面，保留空格和换行

9、文本格式化标签

标签	显示效果
和	加粗
和	斜体
和	加删除线
和	加下划线

只是加粗。 除了可以加粗还有强调的意思,语义更强烈。

10、图像标签

语法如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名

属性属性值说明

src URL 图像的路径

alt 文本图像不能显示时的替换文本

title 文本鼠标悬停时显示的内容

width 像素设置图像的宽度

height 像素设置图像的高度

border 数字设置图像边框的宽度

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对的格式 key=“value” 的格式

下面为参考代码：

<body></body>

11、超链接标签

<body> <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a></body>

属性作用

href 指定链接目标的url地址

target 指定连接页面的打开方式，_self为默认值，_blank为在新窗口中打开

注意：

href="#"，表示该链接暂时为一个空链接

12、列表标签

标签名定义说明

有序列表包含
，有顺序，使用情况较少

无序列表包含
，无顺序，最常用的列表

自定义列表包含
和
,
和
里面可以放任何标签

<body> <ul> <li>无序标签</li> <li>无序标签</li> </ul> <ol> <li>有序标签</li> <li>有序标签</li> </ol> <dl> <dt>自定义标签</dt> <dd>自定义标签</dd> </dl></body>

13、表格标签

<body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>男</td> <td>22</td> </tr> <tr> <td>小红</td> <td>女</td> <td>21</td> </tr> </table></body>

用于定义一个表格标签。

用于定义表格中的行，必须嵌套在
标签中。

用于定义表格中的单元格，必须嵌套在
标签中。

14、表单标签

一个完整的表单通常由表单域，表单控件和提示信息三部分组成
1、表单域
标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>

属性属性值作用

action url地址用于指定接收并处理表单数据的服务器程序的url地址。

method get/post 用于设置表单数据的提交方式，其取值为get或post。

name 名称用于指定表单的名称，以区分同一个页面中的多个表单。

注意:

每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是如果后面学 ajax 后台交互的时候，必须需要 form表单域。

2、表单控件

① input 控件：

<input type="属性值" value="你好">

标签为单标签 input是输入的意思

type属性设置不同的属性值用来指定不同的控件类型

常用属性

② textarea 控件

<textarea col="列" row="行"> 文本内容</textarea>

通过textarea控件可以轻松创建多行文本输入框.

cols=“列数” rows=“行数”

③ 标签
1、第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>

适合单个表单选择

2、第二种用法 for 属性规定 label 与哪个表单元素绑定。

for的属性值应和id的属性值相同

<label for="sex">男</label><input type="radio" name="sex" id="sex">

用于绑定一个表单元素

当我们鼠标点击里面的文字时，光标会定位到指定的表单里面，用来增加用户体验

四、HTML 基础（理解）

15、文本框和文本域的区别

表单名称区别默认值显示应用场景

input type="text" 文本框只能显示一行文本单标签，通过value显示默认值用户名、昵称、密码等

textarea 文本域可以显示多行文本双标签，默认值写到标签中间留言板

以下为案例：

一、文本框与密码框

<body> <form> 账号：<input type="text"> 密码：<input type="password"> </form></body>

type 属性设置为text是文本框

type 属性设置为 password 是密码框

二、select下拉表单

<form> <select> <option selected="selected">地区</option> <option>北京</option> <option>上海</option> </select></form>

中至少包含一对

在中定义 selected=“selected” 时，当前项即为默认选中项

但是我们实际开发会用的比较少

三、文件域和按钮

<body> <form> <input type="button" value="浏览文件"> <br> 上传文件：<input type="file"> </form></body>

type 属性设置为file：是一个文件域，可以上传文件

type 属性设置为button：是一个按钮

四、单选框和复选框

<body> <form> 性别：男<input type="radio" name="sex"> 女 <input type="radio" name="sex"> 选课：政治<input type="checkbox" name="subject"> 历史<input type="checkbox"> 地理<input type="checkbox" name="subject"> </form></body>

type属性设置为 radio是单选框

type属性设置为 checkbox是复选框

name是表单元素的名字，单选框和复选框应有相同的name值

16、常见属性解析

1、type 属性

这个属性通过改变值，可以决定了你属于那种input表单。

比如 type = 'text' 就表示文本框可以做用户名，昵称等。

比如 type = 'password' 就是表示密码框用户输入的内容是不可见的。

用户名: <input type="text" /> 密码：<input type="password" />

2.、value属性

用户名:<input type="text" name="username" value="请输入用户名">

value 表示默认的文本值。

有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
3、 name属性

用户名:<input type="text" name=“username” />

name主要作用就是用于区别不同的表单

4、checked属性

性别:<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女

表示默认选中状态。较常见于 单选按钮和复选按钮。

5、input属性小结

17、特殊字符

一些特殊的符号，我们再html 里面很难或者不方便直接使用，我们此时可以使用下面的替代代码。

字符的代码是以运算符&开头,以分号运算符;结尾。

他们不是标签，而是符号

18、锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3 id="two">第2集</h3> 2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）（拉关系）我也有一个姓何的朋友。 <a href="#two">

快速记忆法：
好比找个人办事，首先找到他，然后拉关系，最后看效果

一、CSS简介

1、什么是CSS？

CSS 指的是层叠样式表 (Cascading Style Sheets)

CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素

2、为什么使用CSS？

层叠样式复用，便于后期维护和修改

可控制内容与样式的布局，让页面更精美

3、CSS的作用

对网页的布局、颜色、背景、宽度、高度、字体进行控制

用于布局和定位，设置页面的外观样式，让页面更精美

二、CSS语法

1、CSS基础语法

CSS由选择器和声明块组成：

语法如下：

<head><style>选择器{属性名：属性值;属性名：属性值;}</style></head>

实例：所有
元素都将居中对齐，并带有红色文本颜色：

p { color: red; text-align: center;}

color是属性，red 是属性值

text-align 是属性，center是属性值

p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：
）

2、CSS注释语法

CSS注释：/* 注释内容 */

实例：

/* body定义 */ body{ text-align:center; margin:0 auto;}

CSS注释：对代码进行解释说明，便于后期维护和修改

3、CSS应用方法

内嵌样式：
在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用

<html lang="en"><head><meta charset="UTF-8"><title>CSS语法</title><style>p{ font-size:12px; /*字号*/ color:blue; /*文字颜色*/ font-weight:bold; /*加粗*/}</style></head><body><p>天使投资指早期投资，尤其指个人早期投资。</p><p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p><p>PE, Private Equity,所谓私募资本、非公开市场资本，既是私募股权投资的统称，又特指相对靠后的股权投资。</p></body></html>

行内样式：
在HTML标签内定义style属性，只对设置style属性的标签起作用

<html><head> <meta charset="UTF-8"> <title>行内样式</title></head><body> <p style="font-size:12px;color:blue;font-weight:bold;"> 天使投资指早期投资，尤其指个人早期投资。 </p> <p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p></body></html>

外部样式
单独定义一个.CSS文件，然后在页面中使用 link标签 或 @import指令 导入html文件里面

使用link标签 链接外部样式

<link rel="stylesheet" href="CSS文件路径" type="text/css" />

使用@import 指令 导入外部样式

@import "CSS文件路径";@import url(CSS文件路径);

三、CSS选择器

1、元素选择器

使用HTML标签作为选择器的名称，也称为标签选择器

<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p { font-size: 16px; color: red; } h1 { font-size: 20px; color: blue; } </style></head><body> <h1>标题</h1> <p>正文的段落</p></body></html>

2、类选择器

使用自定义的名称，以 .号作为前缀，通过HTML标签的class属性调用类选择器

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .big { font-size: 40px; } .color { color: blue; } </style></head><body> <p class="big">HTML</p> <p>超文本标记语言</p> <p class="big color">CSS</p> <p>层叠样式表</p></body></html>

类选择器名称不能以 数字 开头

调用时不能添加.号

同时调用多个类选择器时，以空格 分隔

3、ID选择器

使用自定义名称，以#作为前缀，通过HTML标签的id属性进行名称匹配

<html lang="en"><head> <meta charset="UTF-8"> <title>id选择器</title> <style type="text/css"> #center { text-align: center; } #left { text-align: left; } </style></head><body> <div id="center"> <p>前端技术构成</p> </div> <div id="left"> <p>前端技术构成</p> </div></body></html>

4、组合选择器

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系

<html lang="en"><head><meta charset="UTF-8" /><title>派生选择器</title><style type="text/css">h1,p {color: blue;}</style></head><body><h1>Web前端技术</h1><p>HTML</p><p>CSS</p></body></html>

5、后代选择器

在某个选择器内部再设置选择器，通过空格隔开

下面为实例，当p和strong嵌套使用时起样式效果

<html lang="en"><head><meta charset="UTF-8"><title>后代选择器</title><style>p strong {color: blue;}</style></head><body><p><strong>天使投资</strong>是投资方式的一种</p><p><em>天使<strong>投资</strong></em>是投资方式的一种</p><em>em是定义强调文本的标签</em></body></html>

6、子元素选择器

注意：使用CSS3中新增的 > 时必须是父子关系

下面为实例，p的直接子元素strong被设置

<html lang="en"><head> <meta charset="UTF-8"> <title>子元素选择器</title> <style> /*子元素选择器：p的直接子元素strong被设置*/ p>strong { color: blue; } </style></head><body> <p><strong>天使投资</strong>是投资方式的一种</p> <p><em>天使<strong>投资</strong></em>是投资方式的一种</p></body></html>

7、兄弟选择器

元素1+元素2

下面为实例，当h2和p标签一起使用时起样式效果

<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> h2+p { font-weight: bold; } </style></head><body> <article> <h1>Web前端开发</h1> <h2>HTML</h2> <p>超文本标记语言</p> <p>用于构建网页结构，添加页面内容。</p> <h2>CSS</h2> <p>层叠样式表</p> <p>用于构建网页样式，美化页面。</p> <h2>JS</h2> <p>Javascript</p> <p> 用于构建网页行为，使用户获得更好的体验。</p> </article></body></html>

8、全局选择器

当以*作为选择器，对全局标签都起样式效果

<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">* {color:dodgerblue}</style></head><body><h1>前端技术构成</h1> <p>HTML</p> <p>CSS</p> </body></html>

9、伪类选择器

根据不同的状态显示不同的样式，常用于标签

状态说明

:link 选择所有未访问的链接

:visited 选择所有已访问的链接

:hover 把鼠标放在链接上的状态

:active 选择正在活动链接

<html lang="en"><head><meta charset="UTF-8"><title>伪类选择器</title><style>a:link,a:visited{color:#d82727;font-size: 13px;text-decoration: none;}a:hover,a:active{color:#ff7300;text-decoration: underline;}/*普通的标签也可以使用伪类选择器*/p:hover{color:red;}p:active{color:blue;}</style></head><body><a href="伪类选择器.html">伪类选择器.html</a><p>CSS从入门到精通！</p></body></html>

10、选择器优先级

1、行内样式 > ID选择器 > 类选择器 > 标签选择器
2、同一优先级时，后加载的会覆盖先加载的同名样式，所以离的越近
越优先
3、可以用 !important 定义最高优先级

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> .p1{ color:blue;/*1没加important 显示为红色 */ } .p2{ color:blue; color:red!important;/*2加上了important属性优先级高显示为红色 */ }</style></head><body><p class="p1">1没加important</p><p class="p2">2加了important属性</p></body></html>

四、CSS常用属性

1、字体属性

属性作用

font-size 设置文本的大小

font-weight 设置文本的粗细

font-family 设置文本的字体

font-style 指定文本的字体样式

font 在一个声明中设置所有的字体属性

<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{font-size: 30px;}p{/*font-size: 20px;*/font-size: 80%;}.hello{font-size: 2em;}body{font-size: 62.5%;}ul li{/*font-size: 30px;font-weight: bold;font-family: 华文行楷,宋体,黑体;font-style: italic;*/font: italic bold 30px 微软雅黑;}</style></head><body><p>CSS从入门到精通<span>CSS笔记</span></p><span>CSS笔记</span><hr><div>我的DIV<p>CSS从入门到精通<span>CSS笔记</span></p></div><hr><span class="hello">CSS笔记</span><hr><ul><li>前端笔记</li></ul></body></html>

2、文本属性

属性作用

color 设置文本颜色

direction 设置文本方向

letter-spacing 设置字符间距

line-height 设置行高

text-align 对齐元素中的文本

text-decoration 向文本添加修饰

text-indent 缩进元素中文本的首行

white-space 设置元素中空白的处理方式

word-spacing 设置字间距

<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p{color: red;/*background-color: #ccc;*//*background-color: rgba(0,255,0,0.5);*/background-color: rgba(197, 15, 234, 0.5);line-height: 50px;text-align: center;}img{vertical-align: middle;}div{text-indent: 30px;}span{font-size: 30px;text-decoration: underline;text-transform: capitalize;letter-spacing: 10px;world-spacing:;}h3{width: 300px;height: 200px;background-color:#ccc;white-space: nowrap;overflow:hidden;}</style></head><body><p>welcome to css!</p><p>welcome to css!</p><p>welcome to css!</p><hr><img src="css.png" alt="" width="15%">HTML和CSS笔记<hr><div> 这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</div><hr><div>这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</div><hr><span>hello world</span><hr><h3>这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</h3><hr></body></html>

3、列表属性

属性作用

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

list-style-image 将图像设置为列表项标志

list-style-position 设置列表中列表项标志的位置

list-style 简写

<html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title><style type="text/css">#othernews {text-align:left;font-size:14px;line-height:1.5em;list-style-image:url(images/bullet1.gif);}a:link {color: #09f;/*浅蓝*/text-decoration: none;}a:visited {text-decoration: none;color: #930;/*红*/}a:hover {text-decoration: underline;color: #03c;/*深蓝*/}a:active {text-decoration: none;color: #03c;/*深蓝*/}</style></head><body>
相关阅读:<ul> <li><a href="#" >迪拜华商财富缩水瞻望前景信心犹豫</a></li> <li><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></li> <li><a href="#" >华商基金胡宇权：行业不平衡将带来投资机会</a></li></ul></div></body></html>

4、表格属性

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

Width和height属性定义表格的宽度和高度

text-align属性设置水平对齐方式，向左，右，或中心

<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { font: 14px/2em "宋体"; } table { width: 300px; margin: 0 auto; /*表格在article里面居中*/ border-collapse: collapse; /*表格边框重合*/ font-size: 12px; border: 1px solid; } caption { letter-spacing: 3px; /*表格标题字符间距*/ } tbody tr:nth-child(odd) { /*表格主体的奇数行背景为浅蓝色*/ background-color: lightblue; } td, th { /* border: 1px solid; */ text-align: center; } </style></head><body> <table> <caption>名词解释</caption> <thead> <tr> <th> 名词 </th> <th> 解释 </th> </tr> </thead> <tbody> <tr> <td>HTML</td> <td>HyperText Markup Language超文本标记语言</td> </tr> <tr> <td>CSS</td> <td>Cascading Style Sheets层叠样式表</td> </tr> <tr> <td>JS</td> <td>JavaScript语言</td> </tr> </tbody> </table></body></html>

5、背景属性

属性作用

background 简写

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background-color 设置元素的背景颜色

background-image 把图像设置为背景

background-position 设置背景图像的起始位置

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

index.css文件

body{background-color: #E0E0E0;}h1{background-color: #33CC66;}p{background-color: #FFFFFF;}

html文件

<head> <meta charset="utf-8"> <title>CSS学习</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <h1>Web前端开发</h1> <p>段落背景为白色</p> <p>段落背景为白色</p> <p>段落背景为白色</p> </body></html>

两个文件在同一文件夹下效果如下：

6、对齐方式

1、text-align——文本对齐

规定元素中的文本的水平对齐方式

属性值描述

left 默认值，文本排列到左边

right 文本排列到右边

center 文本排列到中间

justify 文本两端对齐

实例：

<html><head><meta charset="utf-8"> <title>CSS</title> <style>.center { text-align: center; border: 3px solid green;}</style></head><body><h2>文本居中对齐</h2><div class="center"> <p>文本居中对齐。</p></div></body>

2、margin: auto; —— 元素居中对齐

<html><head><meta charset="utf-8"> <title>CSS</title> <style>.center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px;}</style></head><body><h2>元素居中对齐</h2><p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p><div class="center"> <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p></div></body></html>

3、position —— 左右对齐

<html><head><style>.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px;}</style></head><body><h2>右对齐</h2><p>以下实例演示了如何使用 position 来实现右对齐:</p><div class="right"> <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p></div></body></html>

4、float——左右对齐

<html><head><meta charset="utf-8"> <title>CSS</title> <style>.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px;}</style></head><body><h2>右对齐</h2><p>以下实例演示了使用 float 属性来实现右对齐:</p><div class="right"> <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p></div></body></html>

7、盒子模型

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width 宽度

height 高度

border 边框——围绕在内边距和内容外的边框

padding 内边距——清除内容周围的区域，内边距是透明的

margin 外边距——清除边框外的区域，外边距是透明的

content 内容——盒子的内容，显示文本和图像

<html><head><meta charset="utf-8"> <title>CSS入门</title><style>div { background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px;}</style></head><body><h2>盒子模型演示</h2><p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p><div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div></body></html>

五、CSS定位

position 属性指定了元素的定位类型。
position 属性的五个值：

static

relative

fixed

absolute

sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

1、static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象

静态定位的元素不会受到 top, bottom, left, right影响

<html><head><meta charset="utf-8"><title>title</title><style>div.static { position: static; border: 3px solid #73AD21;}</style></head><body><h2>position: static;</h2><p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p><div class="static">该元素使用了 position: static;</div>

2、fixed 定位

元素的位置相对于浏览器窗口是固定位置

即使窗口是滚动的它也不会移动：

<html><head><meta charset="utf-8"> <title>title</title> <style>p.pos_fixed{position:fixed;top:30px;right:5px;}</style></head><body><p class="pos_fixed">Some more text</p><p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p></body></html>

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

3、relative 定位

相对定位元素的定位是相对其正常位置

<html><head><meta charset="utf-8"> <title>css教程</title> <style>h2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p></body></html>

移动相对定位元素，但它原本所占的空间不会改变。

<html><head><meta charset="utf-8"> <title>css教程</title> <style>h2.pos_top{position:relative;top:-50px;}</style></head><body><h2>这是一个没有定位的标题</h2><h2 class="pos_top">这个标题是根据其正常位置向上移动</h2><p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p></body></html>

4、absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

<html><head><meta charset="utf-8"> <title>css教程</title> <style>h2{position:absolute;left:100px;top:150px;}</style></head><body><h2>这是一个绝对定位了的标题</h2><p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p></body></html>

absolute 定位使元素的位置与文档流无关，因此不占据空间

absolute 定位的元素和其他元素重叠

5、sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位

position: sticky; 基于用户的滚动位置来定位

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同

<html><head><meta charset="utf-8"> <title>CSS教程</title> <style>div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50;}</style></head><body><p>尝试滚动页面。</p><p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p></div></body></html>

6、重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

<html><head><meta charset="utf-8"> <title>CSS教程</title> <style>img{position:absolute;left:0px;top:0px;z-index:-1;}</style></head><body><h1>This is a heading</h1><img src="w3css.gif" width="100" height="140" /><p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p></body></html>

六、CSS浮动

1、什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

Float（浮动），往往是用于图像，但它在布局时一样非常有用

2、元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

<html><head><meta charset="utf-8"> <title>CSS教程</title><style>img {float:right;}</style></head><body><p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p><p><img src="logocss.gif" width="95" height="84" />这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p></body></html>

3、彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<html><head><meta charset="utf-8"> <title>CSS教程</title> <style>.thumbnail {float:left;width:110px;height:90px;margin:5px;}</style></head><body><h3>图片库</h3><p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"></body></html>

4、清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

<html><head><meta charset="utf-8"> <title>CSS教程</title> <style>.thumbnail {float:left;width:110px;height:90px;margin:5px;}.text_line{clear:both;margin-bottom:2px;}</style></head><body><h3>图片库</h3><p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><h3 class="text_line">第二行</h3><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"></body></html>

七、CSS网页布局

1、网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

2、头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

<html><head><meta charset="utf-8"><title>CSS 网页布局 </title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { margin: 0;}/* 头部样式 */.header { background-color: #f1f1f1; padding: 20px; text-align: center;}</style></head><body><div class="header"> <h1>头部区域</h1></div></body></html>

3、菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

<html><head><meta charset="utf-8"><title>CSS 网页布局 </title><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}body { margin: 0;}/* 头部样式 */.header { background-color: #f1f1f1; padding: 20px; text-align: center;}/* 导航条 */.topnav { overflow: hidden; background-color: #333;} /* 导航链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;} /* 链接 - 修改颜色 */.topnav a:hover { background-color: #ddd; color: black;}</style></head><body><div class="header"> <h1>头部区域</h1></div><div class="topnav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a></div></body></html>

4、内容区域

1 列：一般用于移动端

2 列：一般用于平板设备

3 列：一般用于 PC 桌面设备

我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：

<html><head><meta charset="utf-8"><title>CSS 网页布局 </title><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}body { margin: 0;}/* 头部样式 */.header { background-color: #f1f1f1; padding: 20px; text-align: center;}/* 导航条 */.topnav { overflow: hidden; background-color: #333;}/* 导航链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;}/* 链接 - 修改颜色 */.topnav a:hover { background-color: #ddd; color: black;}/* 创建三个相等的列 */.column { float: left; width: 33.33%;} /* 列后清除浮动 */.row:after { content: ""; display: table; clear: both;} /* 响应式布局 - 小于 600 px 时改为上下布局 */@media screen and (max-width: 600px) { .column { width: 100%; }}</style></head><body><div class="header"> <h1>头部区域</h1> <p>重置浏览器大小查看效果。</p></div><div class="topnav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a></div><div class="row"> <div class="column"> <h2>第一列</h2> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p> </div> <div class="column"> <h2>第二列</h2> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</div> <div class="column"> <h2>第三列</h2> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</div></div></body></html>

5、底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等

<html><head><meta charset="utf-8"><title>CSS 网页布局 </title><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}body { margin: 0;}/* 头部样式 */.header { background-color: #f1f1f1; padding: 20px; text-align: center;}/* 导航条 */.topnav { overflow: hidden; background-color: #333;}/* 导航链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;}/* 链接 - 修改颜色 */.topnav a:hover { background-color: #ddd; color: black;}/* 创建三个相等的列 */.column { float: left; padding: 10px;}/* 左右两侧宽度 */.column.side { width: 25%;}/* 中间区域宽度 */.column.middle { width: 50%;}/* 列后面清除浮动 */.row:after { content: ""; display: table; clear: both;}/* 响应式布局 - 宽度小于600px时设置上下布局 */@media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; }}/* 底部样式 */.footer { background-color: #f1f1f1; padding: 10px; text-align: center;}</style></head><body><div class="header"> <h1>头部区域</h1> <p>重置浏览器大小查看效果。</p></div><div class="topnav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a></div><div class="row"> <div class="column side"> <h2>左侧栏</h2> <p>学的不仅是技术，更是梦想！</p> </div> <div class="column middle"> <h2>主区域内容</h2> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p> </div> <div class="column side"> <h2>右侧栏</h2> <p>的不仅是技术，更是梦想！</p> </div></div><div class="footer"> <p>底部区域</p></div> </body></html>

6、响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

<html><head><meta charset="utf-8"><title>CSS 网页布局</title><style>* { box-sizing: border-box;} body { font-family: Arial; padding: 10px; background: #f1f1f1;} /* 头部标题 */.header { padding: 30px; text-align: center; background: white;} .header h1 { font-size: 50px;} /* 导航条 */.topnav { overflow: hidden; background-color: #333;} /* 导航条链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;} /* 链接颜色修改 */.topnav a:hover { background-color: #ddd; color: black;} /* 创建两列 *//* Left column */.leftcolumn { float: left; width: 75%;} /* 右侧栏 */.rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px;} /* 图像部分 */.fakeimg { background-color: #aaa; width: 100%; padding: 20px;} /* 文章卡片效果 */.card { background-color: white; padding: 20px; margin-top: 20px;} /* 列后面清除浮动 */.row:after { content: ""; display: table; clear: both;} /* 底部 */.footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px;} /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */@media screen and (max-width: 800px) { .leftcolumn, .rightcolumn {width: 100%; padding: 0; }} /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */@media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; }}</style></head><body><div class="header"> <h1>我的网页</h1> <p>重置浏览器大小查看效果。</p></div><div class="topnav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#" style="float:right">链接</a></div><div class="row"> <div class="leftcolumn"> <div class="card"> <h2>文章标题</h2> <h5>2019 年 4 月 17日</h5> <div class="fakeimg" style="height:200px;">图片</div> <p>一些文本...</p> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！ </p> </div> <div class="card"> <h2>文章标题</h2> <h5>2019 年 4 月 17日</h5> <div class="fakeimg" style="height:200px;">图片</div> <p>一些文本...</p> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p> </div> </div> <div class="rightcolumn"> <div class="card"> <h2>关于我</h2> <div class="fakeimg" style="height:100px;">图片</div> <p>关于我的一些信息..</p> </div> <div class="card"> <h3>热门文章</h3> <div class="fakeimg"><p>图片</p></div> <div class="fakeimg"><p>图片</p></div> <div class="fakeimg"><p>图片</p></div> </div> <div class="card"> <h3>关注我</h3> <p>一些文本...</p> </div> </div></div><div class="footer"> <h2>底部区域</h2></div></body></html>

属性	属性值	说明
`src`	URL	图像的路径
`alt`	文本	图像不能显示时的替换文本
`title`	文本	鼠标悬停时显示的内容
`width`	像素	设置图像的宽度
`height`	像素	设置图像的高度
`border`	数字	设置图像边框的宽度

属性	作用
`href`	指定链接目标的`url地址`
`target`	指定连接页面的打开方式，`_self`为默认值，`_blank`为在新窗口中打开

标签名	定义	说明
	有序列表	包含，有顺序，使用情况较少
	无序列表	包含，无顺序，最常用的列表
	自定义列表	包含和 , 和里面可以放任何标签

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

表单	名称	区别	默认值显示	应用场景
`input type="text"`	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
`textarea`	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

状态	说明
`:link`	选择所有未访问的链接
`:visited`	选择所有已访问的链接
`:hover`	把鼠标放在链接上的状态
`:active`	选择正在活动链接

属性	作用
`font-size`	设置文本的大小
`font-weight`	设置文本的粗细
`font-family`	设置文本的字体
`font-style`	指定文本的字体样式
`font`	在一个声明中设置所有的字体属性

属性	作用
`color`	设置文本颜色
`direction`	设置文本方向
`letter-spacing`	设置字符间距
`line-height`	设置行高
`text-align`	对齐元素中的文本
`text-decoration`	向文本添加修饰
`text-indent`	缩进元素中文本的首行
`white-space`	设置元素中空白的处理方式
`word-spacing`	设置字间距

属性	作用
`list-style-type`	设置列表项标志的类型
`list-style-image`	将图像设置为列表项标志
`list-style-position`	设置列表中列表项标志的位置
`list-style`	简写

属性	作用
`background`	简写
`background-attachment`	背景图像是否固定或者随着页面的其余部分滚动
`background-color`	设置元素的背景颜色
`background-image`	把图像设置为背景
`background-position`	设置背景图像的起始位置
`background-repeat`	设置背景图像是否及如何重复

属性值	描述
`left`	默认值，文本排列到左边
`right`	文本排列到右边
`center`	文本排列到中间
`justify`	文本两端对齐

网络标签：元素属性标签

上一篇
41 Hessenberg法求特征值

下一篇
LeetCode674. 最长连续递增序列

相关问题

Java高并发编程实战3，Java内存模型与Java对象结构

【27 的Java 云原生关键技术】 ThreadLocal进阶解析

后端技术

ST源码分析-Clion调试

【Web前端面试】葵花宝典（2022版本）——CSS篇

微信小程序游戏开发教程

从0学架构01--架构到底是什么？

程序员需要会什么

Windows 10系统下Android Studio安装与配置

单例模式介绍

前端「HTML+CSS」零基础入门学习笔记

HTML+CSS入门笔记目录

一、HTML 简介

1、HTML是什么？

2、什么是HTML标签？

二、HTML 文档结构

1、HTML基本结构

2、文档类型声明标签

3、lang语言属性

4、字符集与编码

三、HTML 基础标签

1、标题标签

2、段落标签

3、空格标签

4、注释标签

5、换行标签

6、盒子标签

7、水平线标签

8、预格式化文本标签

9、文本格式化标签

10、图像标签

11、超链接标签

12、列表标签

13、表格标签

14、表单标签

四、HTML 基础 （理解）

15、文本框和文本域的区别

一、文本框与密码框

二、select下拉表单

三、文件域和按钮

四、单选框和复选框

16、常见属性解析

17、特殊字符

18、锚点定位

一、CSS简介

1、什么是CSS？

2、为什么使用CSS？

3、CSS的作用

二、CSS语法

1、CSS基础语法

2、CSS注释语法

3、CSS应用方法

三、CSS选择器

1、元素选择器

2、类选择器

3、ID选择器

4、组合选择器

5、后代选择器

6、子元素选择器

7、兄弟选择器

8、全局选择器

9、伪类选择器

10、选择器优先级

四、CSS常用属性

1、字体属性

2、文本属性

3、列表属性

4、表格属性

5、背景属性

6、对齐方式

7、盒子模型

五、CSS定位

1、static定位

2、fixed 定位

3、relative 定位

4、absolute 定位

5、sticky 定位

6、重叠的元素

六、CSS浮动

1、什么是 CSS Float（浮动）？

2、元素怎样浮动

3、彼此相邻的浮动元素

4、清除浮动 - 使用 clear

七、CSS网页布局

1、网页布局

2、头部区域

3、菜单导航区域

4、内容区域

5、底部区域

6、响应式网页布局

四、HTML 基础（理解）

1、`static`定位

2、`fixed` 定位

3、`relative` 定位

4、`absolute` 定位

5、`sticky` 定位