HTML CSS

千千梦丶琪 · 2025-3-19 09:44:27

前端

前端，通常指的是用户界面部分，主要负责与用户直接交互。简单点说，你在PC端，移动端利用浏览器打开的网页，就是前端。
小贴士：‌在CS架构中，C（客户端）并不属于前端。‌
  CS架构中的客户端虽然也涉及用户交互，但其功能更为广泛，包括数据请求、处理和结果呈现等‌。因此，CS架构中的C（客户端）不属于前端，而是客户端/服务端架构的一部分。
  随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页筹划可以或许适应各种屏幕分辨率，合适的动效筹划，给用户带来极高的用户体验。
前端开发，就是开发者创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的期间特征。在互联网的演化进程中，网页制作是Web1.0期间的产物，早期网站主要内容都是静态，以图片和文字为主，用户利用网站的举动也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，当代网页更加美观，交互效果明显，功能更加强盛。前端开发跟随移动互联网发展带来了大量高性能的移动终端装备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提拔。
前端开发Front-end Development焦点技术HTML、CSS、JavaScript、Jquery等主流框架Vue.js、AngularJS、React等应用领域网站、小步伐、WebApp开发等 HTML

HTML，全称叫超文本标记语言，英文名是Hyper Text Markup Language，是一种标记语言。它包含了一系列具有描述性标记的标签(Tag，也可叫标记)，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑团体，形成一个可供用户进行浏览、交互的优美页面。比如有可以描述段落，图片，文字，音频，视频，表格，链接等的标签。
总之一句话，HTML是用来筹划前端网页的布局布局的。
html的编辑
这些标签，我们必要写在扩展名为.html的文本文档中，如许的文本文档，我们就称之为HTML文本。至于编辑HTML文本的编辑器，可以利用微软自带的功能简单的记事本，当然也可以利用编辑功能强盛的Sublime Text、Notepad++、Atom、Webstome、Dreamwear、HBuidler等。
  微软开发的Visual Studio Code，简称VSCode。它是一款功能强盛，主题悦目，并支持丰富的编程语言(C++,C#,java,PHP,Python,go等)的开发，该软件的生态系统比较精良，支持大量的精良插件。
   HTML的运行与调试
HTML文本必要利用浏览器来运行，浏览器内置的剖析器可以剖析HTML的各种标签。一样平常浏览器也都带有HTML的调试工具。比较主流的浏览器有以下几种：

Chrome 浏览器（谷歌）
Edge 浏览器（win10/11自带）
Firefox 浏览器（火狐）
Safari浏览器（苹果浏览器）
IE 浏览器

HTML版本阐明

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML 4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：2014年10月28日，W3C推荐标准。HTML5是公认的下一代Web语言，极大地提拔了Web在富媒体、富内容和富应用等方面的本事，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及从前的版本不支持。

HTML根本布局

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

  <!DOCTYPE html> : 声明该文档是HTML5文档，固定写法。必须放在首行
  <html>:HTML的根标记(根元素)，该标记在文档中只能有且只有一个。根标记中通常有两个子标记，分别是：
  <head>标签：进行网页meta的设置（规定字符集等），界说标题，引入css文件，js文件，或者编写style和javascript代码等，可以添加在头部地区的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript> 和 <base>。
  <body>标签：用来界说网页的可见内容。

  注意: 编辑工具的字符集要和网页体现时字符集同等。
  HTML语法介绍

HTML元素

HTML文档由各种HTML元向来组成，而HTML元素指的就是一个个书写完备的标签(标记)。
元素开始标签元素内容竣事标签<p>这是段落</p><p>这是段落</p><h1>这是标题1</h1><h1>这是标题1</h1><a href="default.html">跳转</a><a href="default.html">跳转</a>换行元素<br/>元数据元素<meta/>

从上面的案例可以看出，HTML元素分两类：
第一类：双标签元素

双标签元素以开始标签起始、以竣事标签停止，标签之间的内容，被称为标签内容体，标签内容区，或者标签体，参考上面的表。
双标签元素可以进行嵌套

<div>
<h1>标题</h1>
<p>这是一个段落，<strong>张三</strong>这个名字必要加粗</p>
</div>
第二类：单标签元素

单标标元素只有开始标签，而且在开始标签的名字后面有斜杠。也叫自竣事标签。没有标签体。
虽然有的时候忘记写斜杠，浏览器依然能剖析出来。但是尽量别忘记。

虽然标签名大小写字母不敏感，但是建议利用小写字母。
由于XHTML(未来版本)强制利用小写。
HTML属性

属性是HTML元素的附加信息

属性一样平常位于开始标签中、总是以名/值对的形式出现，格式：name=“value” ，即，属性名=“属性值”
属性的值始终被包括在引号中，常用双引号，单引号也没有标题。示例： <span id='msg'> xxx </span>
如果属性的值本身带有双引号，那么您必须利用单引号。比方 <span name ='my name is "Michael" and' > xxx <span>
属性名和属性值尽量利用小写字母。而新版本的 (X)HTML 要求利用小写属性。

下面列出了实用于大多数 HTML 元素的属性：
属性描述备注class为html元素界说一个或多个类名（classname）(类名从样式文件引入)该属性的值可以有多个，在双引号里利用空格分开id界说元素的唯一idid作为唯一标识符，只能填写一个，具有唯一性style规定元素的行内样式（inline style）title描述了元素的额外信息 (作为工具条利用) HTML解释


  可以将解释插入 HTML 代码中，如允许以进步其可读性，使代码更易被人理解。浏览器会忽略解释，也不会体现它们。
快捷键： ctrl+斜杠可以去设置里修改或查询快捷键有点快捷键是ctrl+k ctrl+c
HTML字符实体

HTML and XHTML 预留了一些字符，您不能利用包含这些字符的文本，由于浏览器可能会误以为是 HTML 标签。比如在文字中不能利用小于号（<）和大于号（>），这是由于浏览器会误以为它们是标签。
如果希望正确地体现预留字符，我们必须在HTML源代码中利用字符实体（character entities）。
字符实体类似如许：
&entity_name; <---注意，分号不能丢
或
&#entity_number; <---注意，分号不能丢
如需体现小于号，我们必须如许写：（新版本似乎已经不必要了可以直接打出来<）
  < 或
< 或
<
   注意：利用实体名而不是数字的好处是，名称易于影象。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
再比如空格，浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在体现该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您必要利用字符实体。
常用实体如下：

体现结果描述实体名称实体编号空格  <小于号<<>大于号>>&和号&&"引号""'撇号' (IE不支持)'￠分¢¢£镑££¥人民币/日元¥¥€欧元€€§末节§§©版权©©®注册商标®®™商标™™×乘号××÷除号÷÷ 注意：实体字符对大小写敏感。
HTML常用标签

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部地区的元素标签为: <title>, <base>, <meta>, <style>, <link>, <script> 和 <noscript> 。
<title>元素

<title> 在 HTML/XHTML 文档中是必须的，该标签署义了不同文档的标题：

即浏览器工具栏(标签页)的标题
当网页添加到收藏夹时，体现在收藏夹中的标题
体现在搜索引擎结果页面的标题

<base>元素

<base> 标签规定文档中所有相对 URL 的基准 URL(即父路径)。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元向来填写相对 URL 中的空缺。
利用 <base> 标签可以改变这一点。浏览器随后将不再利用当前文档的 URL，而利用指定的根本 URL 来剖析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
一个HTML文档中只能有一个 <base> 元素

标题（Heading）是通过 <h1> - <h6> 标签进行界说的。
<h1>界说最大的标题。 <h6> 界说最小的标题。
浏览器会自动地在标题的前后添加空行，属于块级元素。
请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而利用标题。
搜索引擎利用标题为您的网页的布局和内容体例索引。
将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
段落标签

HTML 可以将文档分割为若干段落。
段落是通过<p>标签署义的。
浏览器会自动地在段落的前后添加空行。属于块级元素

<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
换行标签

如果您希望在不产生一个新段落的情况下进行换行（新行），请利用 <br> 标签
<br>标签对于写地点或诗歌非常有用。
<br/> 元素是一个空的 HTML 元素，也就是自竣事标签。在XHTML中，强制写斜杠的。
请利用 <br/> 标签来插入换行符，而不是用它来增加段落之间的空缺。

<p>如需在文本中强制<br>换行<br>，请利用 <br>br<br> 元素。</p>
<h1>《赋得古原草送别》</h1>
  <p>
离离原上草，<br>
一岁一枯荣。<br>
野火烧不尽，<br>
春风吹又生。<br>
远芳侵古道，<br>
晴翠接荒城。<br>
又送王孙去，<br>
萋萋满别情。<br>
</p>
  <p><em>- 唐白居易</em></p>
   水平线

<hr> 标签在 HTML 页面中创建水平线，可用于分隔内容。
<body>
   <p>hr 标签署义水平线：</p>
   <hr />
   <p>这是段落。</p>
   <hr />
   <p>这是段落。</p>
   <hr />
   <p>这是段落。</p>
</body>
   图像标签

利用<img/>标签可以在网页上插入图片
从技术上讲，现实上并没有将图像插入到网页中，而是将图像链接到了网页。
<img/>标签是一个单标记，自竣事标记, 名字后面带有斜杠
<img/>标签的常用属性如下：

属性作用src用于书写图片的引用路径，可以是当地路径，也可以是网络路径alt如果由于某种原因无法体现图像，则指定图像的替代文本。该属性主要用于搜索引擎width图片的宽height图片的高 <body>
<h2>引用网络上的一张图片</h2>
    <img src="https://img.tukuppt.com/ad_preview/00/04/15/5c98b99bce3ad.jpg" alt="黑板报" width="500px">
    <h2>引入当地上的一张图片</h2>

相对路径写法：<img src="./img/fcz/1.jpg" alt="黑寡妇">
<hr>
绝对路径写法：<img src="D:/front/img/fcz/2.jpg" alt="雷神">
</body>

图片未指定宽度和高度，则在加载图像时页面可能会闪烁。
图片的宽与高只设置其中一个，图片会等比例缩放。
图片的格式:
jpeg/jpg 支持的颜色丰富，不支持透明，不支持动图，一样平常用来体现照片
gif 支持的颜色少，支持简单透明，支持动图颜色单一，动图
png 支持的颜色丰富，支持复杂透明，不支持动图 -专为网页而生
webp 谷歌推出的专门为网页中的图片的一种格式具有所有优点，文件特别小，兼容性欠好
base64 将图片利用base64进行编码，如允许以将图片转换为字符，通过字符的形式来引入图片，一样平常都是一些必要和网页一起加载的图片才会利用base64
总结：效果一样，选小的；效果不一样，选效果好的

超链接标签

超链接，就是在一个网页上点击后，可以跳转到另一个网页，或者是本网页的其他位置。

超链接的标签是<a>
<a>是一个双标记，标签内容体可以是文本，也可以是图像
<a> 的属性如下：

属性重要性描述href必须指令链接目标的URL。可以是另一个页面，也可以是本页面的其他位置title可选鼠标悬停在超链接上时体现的内容target可选指定链接怎样在浏览器中打开，常用值如下： _blank：在新标签页打开链接 _self：在当前标签页打开链接rel可选规定当前文档和被链接文档之间的关系。超链接默认样式

一个未访问过的链接体现为蓝色字体并带有下划线。
访问过的链接体现为紫色并带有下划线。
点击链接时，链接体现为红色并带有下划线。

按钮标签

<button> 标签署义一个按钮。
在 <button>元素内部，您可以放置内容，比如文本或图像。这是该元素与利用 <input> 元素创建的按钮之间的不同之处。
提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性利用不同的默认值。
<body>
<button type="button" οnclick="alert('你好，世界!')">点我!</button>
</body>
文本格式化标签

以下是一些常用的文本格式化标签：

<strong>加重语气的的文本
<b>加粗,bold的意思
<em>斜体效果，强调作用
<i>斜体效果itatic
<pre>预格式化文本
<small>更小的文本
<code>用于存放计算机代码
<bdo>文字体现的方向
<blockquote> 引用标签
<q> 双引号==标签==
<del> 删除文本
<ins>插入文本
<sub>下标文本
<sup>上标文本

列表标签

HTML 支持有序、无序和自界说列表。
无序列表

无序列表是一个项目的列表，列表项利用粗体圆点（范例的小黑圆圈）进行标记。
无序列表利用<ul>标签，列表项利用<li>标签
<h4>无序列表：默认样式</h4>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
<h4>利用css自界说样式</h4>
<ul style="list-style-type: square;">
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>

有序列表

同样，有序列表也是一列项目，列表项利用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
<h4>有序列表：默认样式</h4>
<ol>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ol>
<h4>利用css自界说样式</h4>
<ol style="list-style-type:lower-alpha;">
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ol>

自界说列表

自界说列表不仅仅是一列项目，而是项目及其解释的组合。
自界说列表以<dl>标签开始。每个自界说列表项以 <dt> 开始。每个自界说列表项的界说以 <dd> 开始。
<h4>一个自界说列表：</h4>
<dl>
<dt>长春</dt>
<dd>-- 吉林省的省会城市</dd>
<dt>哈尔滨</dt>
<dd>-- 黑龙江省的省会城市</dd>
</dl>

注意事项：列表项内部可以利用段落、换行符、图片、链接以及其他列表等等。
<h4>嵌套列表：</h4>
<ul>
<li>咖啡
<ul>
<li>卡布奇诺</li>
<li>雀巢</li>
</ul>
</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>江南茶区</li>
<li>华北茶区</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
表格标签

表格是一种用于展示布局化数据的标记语言元素。每个表格均有若干行，每行被分割为若干单元格，表格可以包含标题行(俗称表头)，用于界说列的标题。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
在过去也应用于页面的布局上，但是现在一样平常都利用<div>标签做页面的布局了。
HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满意各种需求。
我们也可以利用 CSS 来进一步自界说表格的样式和外观。
<table> 元素表示整个表格，在团体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>

<caption> 为整个表格界说主题
<thead> 表格头部部分(也称表格页眉)。
- <th> 在<thead>中利用<th>元素界说每一列的标题，有加粗效果，与普通单元格区分开来。（table header）
<tbody> 表格主体部分
- <tr> 在<tbody>中利用<tr>元素界说行（table row 的缩写）
- <td> 在<tr>中利用<td>元素界说单元格数据（ table data 的缩写）
<tfoot> 可用于在表格的底部界说摘要、统计信息等内容
1. <body>
2. <table border="10px" cellspacing="0" cellpadding="10px" width="50%">
3. <caption>学生信息表</caption>
4. <thead>
5. <tr>
6. <th>序号</th>
7. <th>姓名</th>
8. <th>年龄</th>
9. <th>性别</th>
10. </tr>
11. </thead>
12. <tbody>
13. <tr>
14. <td rowspan="2">1</td>
15. <td>张三</td>
16. <td>18</td>
17. <td>男</td>
18. </tr>
19. <tr>
20. <td>李四</td>
21. <td>19</td>
22. <td>女</td>
23. </tr>
24. </tbody>
25. <tfoot>
26. <tr>
27. <td colspan="4">统计</td>
28. </tr>
29. </tfoot>
30. </table>
31. </body>
复制代码
border: 表的外边框 10像素宽
cellspacing: 单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格团体的位置 center left right
width: 表格团体的宽度可以是具体像素，也可以是屏幕的百分比
rowspan: 跨行属性，跨几行就写数字几
colspan: 跨列属性，跨几列就写数字几

表单标签

HTML 表单用于网络用户的输入信息。
HTML 表单表示文档中的一个地区，此地区包含交互控件，将用户网络到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。这些元素也都被称为控件元素

<form> 元素用于创建表单，action 属性界说了表单数据提交的目标 URL，method 属性界说了提交数据的 HTTP 方法（这里利用的是 "post"）。
<label> 元素用于为表单元素添加标签，进步可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性界说了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于界说下拉列表中的选项。
<textarea>元素用于创建文本域（多行文本输入控件），可写入字符的字数不受限制。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/" method="post">
<fieldset>
<legend>用户信息采集</legend>
<br>
<label for="name">用户名:</label>
<input type="text" id="name" name="username" required maxlength="10">
<label for="password">密   码:</label>
<input type="password" id="password" name="password" required size="10">
<br>
<br>
<hr>
<br>
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<label>爱好</label>
<input type="checkbox" id="book" name="hobbys" value="book">
<label for="book">读书</label>
<input type="checkbox" id="movie" name="hobbys" checked value="movie">
<label for="movie">电影</label>
<input type="checkbox" id="music" name="hobbys" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="dance" name="hobbys" checked value="dance">
<label for="dance">跳舞</label>
<br>
<br>
<hr>
<br>
<label for="range">范围</label>
0<input type="range" id="range" name="range" value="50">100
<br>
<br>
<hr>
<br>
<label for="number">数字</label>
<input type="number" id="number" name="number" value="4" max="10" min="1" readonly>
<br>
<br>
<hr>
<br>
<label>日期时间</label>
<input type="time" value="12:12">
<input type="date">
<input type="datetime-local">
<input type="week">
<input type="month">
<br>
<br>
<hr>
<br>
<label for="color">颜色</label>
<input type="color">
<br>
<br>
<hr>
<br>
<label for="file">文件上传</label>
<input type="file">
<br>
<br>
<hr>
<br>
<label for="province">省份:</label>
<select id="province" name="province">
<option value="hlj">黑龙江省</option>
<option value="jl">吉林省</option>
<option value="ln">辽宁省</option>
</select>
<label for="city">城市:</label>
<select id="city" name="city">
<option value="harbin">哈尔滨</option>
<option value="cc">长春</option>
<option value="sy">沈阳</option>
<option value="" selected></option>
</select>
<br>
<br>
<hr>
<br>
<label for="">hidden: 但是会被提交</label>
<input type="hidden" name="renming" value="zhangsan">
<br>
<br>
<hr>
<br>
<label for="">文本域</label>
<textarea name="" id="" cols="20" rows="2"></textarea>
<br>
<br>
<hr>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</fieldset>
</form>
</body>
</html>

复制代码

注意：以下这些属性是HTML5支持的新类型。并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中利用它们了。即使不被支持，仍然可以体现为常规的文本域。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
网页布局与相关元素

在从前的版本中，我们常用table元向来筹划网页的布局。随着版本的更新，在HTML4.0和现在的HTML5.0版本中我们已经不再利用table元向来筹划网页的布局了。
我们现在利用div+css来筹划页面布局。常用的网页的布局大致也就是如下图所示的如许的，当然也可以根据现实需求来筹划网页的布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container" style="border: 1px red solid;">
<div class="header" style="border: 1px blue solid; height: 100px;">logo区</div>
<div class="nav" style="border: 1px yellowgreen solid; height: 100px;">导航区</div>
<div class="body" style="border: 1px red solid; height: 400px;">
<div class="left" style="border: 5px pink dotted; width: 500px; height: 390px;float:left">侧边导航区</div>
<div class="center" style="border: 5px solid red;width: 850px; height: 390px;float:left">
<div class="article" style="border: 5px solid green; height: 190px;">文章部分</div>
<div>
<div style="border: 1px solid grey; height: 95px; width: 420px; float: left;">左上</div>
<div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">右上</div>
<div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">左下</div>
<div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">右下</div>
</div>
</div>
<div class="right" style="border: 5px pink dotted; width: 500px; height: 390px;float: left;">广告区</div>
</div>
<div class="footer" style="border: 1px greenyellow solid; height: 100px;">页面底部</div>
</div>
</body>
</html>

复制代码

容器元素<div>

HTML <div> 元素是块级元素，可以以为他是其他 HTML 元素的容器。
<div> 元素没有特定的含义。
它属于块级元素，浏览器会在其前后体现折行。
<div> 元素最常见的用途就是页面布局了。它代替了利用表格界说布局的老式方法。
<div>元素共同CSS，可以对大的内容块设置样式属性

容器元素<span>

HTML <span> 元素是内联元素，可用作文本的容器，也就是用来包括
<span>元素也没有特定的含义。
当与 CSS 一同利用时，<span> 元素可用于为部分文本设置样式属性。

为了让这些块及元素在所有版本的浏览器中生效，你必要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
header, section, footer, aside, nav, article, figure{
   display: block;
}
  IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能利用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.可以利用HTML5 Shiv来解决这个标题：

  布局元素不具有任何样式，只是使页面元素的的语义更加明确。
HTML5其他新元素

HTML5版本在HTML4.x版本底子之上新增了许多元素或属性，比如
1、表单元素<input>中新增了一些属性：email、color、number、range、search、tel、url、date等。这些属性自带简单的验证功能。
2、新增的布局元素：header, section, footer, aside, nav, article等
3、新增的多媒体元素：audio、video等
音频标签

<audio> 标签署义声音，比如音乐或其他音频流。
现在，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
浏览器MP3WavOggInternet ExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESYESNOOperaYESYESYES <audio>的属性如下：
属性值描述srcURL规定音频文件的 URL。autoplayautoplay如果出现该属性，则音频在停当后马上播放。controlscontrols如果出现该属性，则向用户体现音频控件（比如播放/停息按钮）。looploop如果出现该属性，则每当音频竣事时重新开始播放。mutedmuted如果出现该属性，则音频输出为静音。preloadauto metadata none规定当网页加载时，音频是否默认被加载以及怎样被加载。 <body>
<audio src="./音视频/audio.mp3" type="audio/mp3" controls="controls" autoplay loop></audio>
<br>

<audio controls>
<source src="./音视频/audio.mp3">
<source src="./音视频/audio.ogg">
您的浏览器不支持 audio 元素。
</audio>

<embed src="./音视频/audio.mp3" type="audio/mp3" width="300px" height="60px">
</body>
  可以在 <audio> 和 </audio>之间放置文本内容，这些文本信息将会被体现在那些不支持 <audio> 标签的浏览器中。
视频标签

<video> 标签署义视频，比如影戏片断或其他视频流。现在，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
浏览器MP4WebMOggInternet ExplorerYESNONOChromeYESYESYESFirefoxYES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始YESYESSafariYESNONOOperaYES 从 Opera 25 版本开始YESYES

MP4 = MPEG 4文件利用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件利用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件利用 Theora 视频编解码器和 Vorbis音频编解码器

视频格式的 MIME 类型:

格式MIME-typeMP4video/mp4WebMvideo/webmOggvideo/ogg <video>的属性：
属性值描述srcURL要播放的视频的URLautoplayautoplay如果出现该属性，则视频在停当后马上播放。controlscontrols如果出现该属性，则向用户体现控件，比如播放按钮。heightpixels设置视频播放器的高度。widthpixels设置视频播放器的宽度。looploop如果出现该属性，则当前言文件完成播放后再次开始播放。mutedmuted如果出现该属性，视频的音频输出为静音。posterURL规定视频正在下载时体现的图像，直到用户点击播放按钮。preloadauto metadata none如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果利用 "autoplay"，则忽略该属性。 <body>
<video src="./音视频/flower.mp4" controls preload="metadata" width="500px"></video>
    
<video width="320" height="240" controls>
<source src="./音视频/flower.webm">
<source src="./音视频/flower.mp4">
您的浏览器不支持 video 标签。
</video>
</body>

内联标签

<iframe> 标签规定一个内联标签。
一个内联标签被用来在当前 HTML 文档中嵌入另一个文档。
所有主流浏览器都支持 <iframe> 标签。
提示：您可以把必要的文本放置在 <iframe> 和 </iframe> 之间，如许就可以应对不支持 <iframe> 的浏览器。
提示：利用 CSS 为 <iframe> （包括滚动条）界说样式。
<body>

<iframe src="https://www.runoob.com" frameborder="1" height="300" width="500"></iframe>
</body>
   元素分类

HTML 元素大致上可以分为两大类，块级元素或内联元素(行内元素)。
第一大类：块级元素**(面试重点)**
块级元素在浏览器体现时，会独占一行。即在开始标签前会换行，在竣事标签后，也会换行。
比如: <div>,<h1>~<h6>， <p>， <ul>，<ol>，<li>, <table>、<form>等
第二大类：内联元素
内联元素，也叫行内元素，即默认情况下，在浏览器上体现效果为，不会独占一行，两个挨着的行内元素，通常会在一行上体现。
比如: <a>, <img>、<span>、<button>, <td>、<input>等，只要不是独占一行的，都是内联元素
浏览器会自动对网页中不符合规范的内容进行改正
  - 标签写在了根元素的外面
- p元素中嵌套了块元素
- 根元素中出现了除了head和body以外的子元素
   CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为布局化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
CSS为HTML标记语言提供了一种样式描述，界说了其中元素的体现方式。CSS在Web筹划领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说，CSS具有以下特点：
1.丰富的样式界说
  CSS提供了丰富的文档样式外观，以及设置文本和背景属性的本事；答应为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；答应随意改变文本的大小写方式、修饰方式以及其他页面效果。
  2.易于利用和修改
  CSS可以将样式界说在HTML元素的style属性中，也可以将其界说在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
  另外，可以将相同样式的元素进行归类，利用同一个样式进行界说，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只必要在样式列表中找到相应的样式声明进行修改。
  3.多页面应用
  CSS样式表可以单独存放在一个CSS文件中，如许我们就可以在多个页面中利用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。如许就可以实现多个页面风格的统一。
  4.层叠
  简单的说，层叠就是对一个元素多次设置同一个样式，这将利用最后一次设置的属性值。比方对一个站点中的多个页面利用了同一套CSS样式表，而某些页面中的某些元素想利用其他样式，就可以针对这些样式单独界说一个样式表应用到页面中。这些后来界说的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
  5.页面压缩
  在利用HTML界说页面效果的网站中，往往必要大量或重复的表格和font元素形成各种规格的文字样式，如许做的结果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，如许在加载页面时利用的时间也会大大的减少。另外，CSS样式表的复用更大步伐的缩减了页面的体积，减少下载的时间。

  CSS3 现在已被大部分当代浏览器支持，而下一版的 CSS4 仍在开发中。
  总之一句话，CSS用来设置网页中元素的样式
  样式分类和语法

我们可以根据CSS代码所在的位置分成三类样式：内联样式，内部样式表，外部样式表。
内联样式

内联样式，也叫行内样式。将样式界说在元素的style属性中。
style = " 属性 : 值 ; 属性 : 值 ; ……"
<div style="background-color: orange; width: 500px; height: 200px;">
一个div
</div>
缺点：利用内联样式，界说的样式只能对一个HTML元素生效，不能重用。
  建议：现实开发中，尽量不要用这种方式
   内部样式表

内部样式表，是将样式界说到HTML的<head>元素的子元素<style>里，利用选择器来定位要设置样式的元素。

选择器通常是您必要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号 ; 竣事，声明总以大括号 {} 括起来:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
<style>
/* 为了让CSS可读性更强，你可以每行只描述一个属性: */
#d1 {
background-color: orange;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div id="d1">
一个div
</div>
</body>
</html>

复制代码

优点：

可以同时为多个HTML元素设置样式，方便复用
而且修改时只必要修改一处即可全部应用

缺点：

内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

外部样式表

外部样式表，是将css代码编写到CSS文件中，文件的扩展名为.css，然后通过link标签将css文件引入到HTML文档中。

mystyle.css文件里：
/* 为了让CSS可读性更强，你可以每行只描述一个属性: */
#d1 {
background-color: orange;
width: 500px;
height: 200px;
}
特点：

通过link标签引入，意味着可以在不同HTML文档中进行复用。
将样式编写到外部的CSS文件中，可以利用到浏览器的缓存机制，从而加快网页的加载速率，进步用户的体验。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="d1">
一个div
</div>
</body>
</html>

复制代码

选择器（4种）

标签选择器

布局： 标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有的这类标签，设置样式
注意：

标签选择器选择的是一类标签，而不是单独的一个
标签选择器无论嵌套关系有多深，都可以或许找到对应的标签

<style>
p{
color: red;
}
</style>
<body>
<p>
标签选择器
</p>
</body>

复制代码

类选择器

布局： .类名{css属性名：属性值；}
作用：通过类名，找到页面中所有的带有这个类名的标签，设置样式
注意：

所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
一个标签中可以同时有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<style>
.one{
color: red;
}
</style>
<body>
<div class="one">
类选择器
</div>
</body>

复制代码

id选择器

布局： #id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：

所有的标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<style>
#one{
color: red;
}
</style>
<body>
<div id="one">
id选择器
</div>
</body>

复制代码

class类名和id属性值之间的区别

class类名相称于姓名，可以重复，
一个标签中可以有多个class类名
id属性值相称于身份证号码，不可重复，一个标签里面只能有一个ID属性值

类选择器和id选择器之间的区别

类选择器以.开头；id选择器以#开头
现实开发中的情况类选择器用的最多 id一样平常共同js来利用，除非情况特殊，一样平常不要给id设置样式现实开发中会碰到冗余代码的抽取

通配符选择器

布局： *{css属性名：属性值}
作用：找到页面中所有的标签，然后设置样式
注意：

开发中应用少少，只有在特殊的情况下才会利用
在小页面中可能会用于去除页面中默认的margin和padding

<style>
* {
color: red;
}
</style>
<body>
<div>
通配符选择器
</div>
</body>

复制代码

复合选择器（2种）

交集选择器

语法： 选择器1选择器2{css属性名：属性值}
作用：选中页面中同时满意多个选择器的标签，紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：

之间没有任何东西隔开，紧挨着的，
交集选择器中如果有标签选择器，标签选择器必须放在前面

<style>
p.one{
color: red;
}
</style>
<body>
<p class="one">
这个元素会被应用样式
</p>
<p>
这个元素不会被应用样式
</p>
</body>

复制代码

并集选择器

语法： 选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
注意：选择器与选择器之间用逗号隔开可以是底子选择器或者复合选择器每组选择器通常一行写一个，进步代码的可读性

<style>
p,div{
color: red;
}
</style>
<body>
<p>
这个元素会被应用样式
</p>
<div>
这个元素也会被应用样式
</div>
</body>

复制代码

关系选择器（4种）

语法用法备注父亲>儿子儿子中的个别选择选择器之间有大于号祖先后代后代全部选择选择器之间用空格隔开兄+弟哥哥的弟弟被选择(弟弟必须严格相邻哥哥)选择器之间用+隔开兄~弟哥哥的符合条件的所有弟弟被选择选择器之间用波浪线隔开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系选择器(兄弟、父子选择器)</title>
<style>
/* 父子选择，个别几个儿子*/
/* div>span {
color: blue;
font-size: 40px;
} */
/* 祖先后代选择，全部 */
/* div span {
color: red;
} */
/* 必须相邻兄弟选择，是兄弟但不相邻，不选择 */
/* div+span {
color: greenyellow;
} */
/* 全兄弟选择 */
/* p~span {
color: rgb(3, 110, 8);
} */
p~* {
color: orange;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p
<span>我是p中的span</span>
</p>
<div>我是div中的div</div>
<span>我是div中的span1</span>
<span>我是div中的span2</span>
</div>
<span>我是div之外的span1</span>
<span>我是div之外的span2</span>
</body>
</html>

复制代码

属性选择器（5种）

语法用法[属性]选中含有指定属性的元素[属性=属性值]选中含有指定属性和指定属性值的元素[属性^=属性值]选中含有指定属性和指定属性值开头的元素[属性$=属性值]选中含有指定属性和指定属性值末了的元素[属性*=属性值]选中指定属性名和含有指定属性值的元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种方法：选择含有指定属性的元素。
语法：[属性名]{} */
/*选择属性名为title,设置字体颜色红色 */
[title] {
color: red;
}
/* 第二种用法：选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{} */
/*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
[title=ab] {
color: green;
}
/* 第三种用法：选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{} */
/* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
[title^=ab] {
background-color: yellow;
}
/* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
语法：[属性名$=属性值] */
/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
[title$=ab] {
font-size: 30px;
}
/* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
语法：[属性值*=属性名]{} */
/* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
[title*=c] {
background-color: green;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html

复制代码

伪类选择器

伪类：不存在的类，特殊的类

伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素...
伪类一样平常情况下都是利用:开头

元素选择伪类选择器

:前有空格代表从子类开始数，无空格代表从所在级数开始。
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素 ,n的范围0到正无穷
           even 或 2n 表示选中偶数位的元素
        odd 或 2n+1 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行选择
以下这些伪类都是在同类型元素中进行选择
:first-of-type
:last-of-type
:nth-of-type(n)
   否定伪类选择器

:not() 括号里传入其他选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style>
div :not(p:first-of-type):not(p:last-child) {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>

复制代码

   a链接的伪类

:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的标题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以利用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态
  伪元素选择器

虚假的元素，现实上是没有的，但是css为了设置一些样式，默认提供的，一样平常都用在段落标记中
p::first-letter 首字符
p::first-line 首行
p::selection 选中的
::before 第一个字符之前
::after 最后一个字符之后
before和after必须共同content一起利用(before,after所写的内容无法选中且永远在最前和最后)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>伪元素选择器</title>
<style>
/* 需求一：让文章的首字母一直为字体为24px */
p::first-letter {
font-size: 24px;
}
/* 需求二：让文章的第一行添加背景色灰色 */
/* p::first-line {
background-color: #ccc;
} */
/* 需求三：让选中的内容，字体为红色 */
/* p::selection {
color: red;
} */
/* 需求四：在元素开始的位置前+'你好' */
/* p::before {
content: '你好';
color: red
} */
</style>
</head>
<body>
<p>hello</p>
<p>world,我们要相信明天会更好。</p>
</body>
</html>

复制代码

   选择器的权重

内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态
   样式的继承

CSS样式继承是指子元素会继承父元素的某些样式属性。常见的可以继承的CSS属性包括 font-family 、 color 、 font-size、line-height。
继承的筹划，是为了方便我们的开发，利用继承的特点，我们可以将一些通用的样式统一设置到共同的祖先元素上，如许只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承，比如背景相关的，布局相关等的这些样式都不会被继承。
其他单元

像素
- 屏幕（体现器）现实上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕体现的效果越清晰
- 所以同样的200px在不同的装备下体现效果不一样像素
  百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
  em
- 是一个相对单元。
- em是相对于当前元素内的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
- 如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px
  rem
- rem是相对于根元素（html）的字体大小来计算
   颜色单元
1. 颜色单元可以利用有英文单词的颜色，比如 black,red,yellow,.......
   注意：能叫上名字的毕竟是少数，不能表示出来所有的颜色
2. rgb ：颜色的三原色，red, green, blue
在电脑上可以利用8位二进制来表示三原色，
red: 00000000~11111111
green: 00000000~11111111
blue: 00000000~11111111
二进制的数字不同，表示该颜色的比例不同。从左到右分别是红，绿，蓝。每个原色，也可以利用16进制表示
red        #ff
green     #ff
blue     #ff
     小贴士：如果三原色的16进制的字符同等，可以简写       比如： #aabbff 可以简写成 #abf
3. rgba: 前三个表示的就是三原色，第四个a表示不透明度。
               1表示不透明，0表示完全透明 .5表示半透明

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>伪元素选择器</title>
<style>
/* 设置整体里的字体大小 */
html {
font-size: 8px;
}
/* 设置body里的字体大小，正常默认大小也为16px*/
body {
font-size: 16px;
}
p:first-child {
/* 可以看出，和body里的文字大小一致 */
font-size: 16px;
}
p:nth-child(2) {
/* 1em=1font-size, 所以也是16px */
font-size: 1em;
}
p:nth-child(3) {
/* 1.5em 等于24px */
font-size: 1.5em;
}
p:nth-child(4) {
font-size: 24px;
}
p:nth-child(5) {
/* rem 是相对于HTML根元素的font-size大小 */
font-size: 2rem;
}
p:nth-child(6) {
/* color: rgb(255, 0, 0); */
/* color: rgb(255, 255, 0) */
color: rgb(0, 0, 255)
}
</style>
</head>
<body>
body里的文字
<p> 段落1里的文字</p>
<p> 段落2里的文字</p>
<p> 段落3里的文字</p>
<p> 段落4里的文字</p>
<p> 段落5里的文字</p>
<p> 段落6里的文字</p>
</body>
</html>

复制代码

盒子模型

为了更好的筹划HTML元素的样式，CSS语言引入了盒子模型（box model）概念，即把HTML元素看作矩形盒子，如许每个元素(盒子)都有自己的边距，边框、填充、现实内容。如许更方便CSS筹划样式和布局。盒子模型答应我们在其它元素和周围元素边框之间的空间放置元素。如许的优点就是可以将元素放置在任何地方，可以通过调整宽和高来充满整个屏幕

在CSS中，盒模型（Box Modle）是用来对元素进行筹划和布局的，由内到外包含现实内容区、内边距、边框、和外边距四个部分。
1）内容区Content
用来放置文本或者子元素。
2）内边距padding
即内容区与边框的距离。
3）边框border
围绕在内边距外的边框。
4）外边距margin
边框以外的地区。
为了正确设置元素在所有浏览器中的宽度和高度，你必要知道的盒模型是怎样工作的。
盒子模型分类

在CSS语言中，CSS将所有的HTML元素归纳为四种盒子模型、分别是块级盒子、内联级盒子、内联块级盒子、弹性盒子
类型特点包括的标签怎样设置1.块级盒子独占一行，对宽度高度支持div、p、ul、 li、 h1~h6等display: block;2.内联级盒子不独占一行，对宽度高度不支持span、 a等display: inline;3.内联块级盒子不独占一行，对宽度高度支持img、input等display: inline-block;4.弹性盒子岂论父级元素能不能放下子元素，子元素始终横向布局display: flex; 盒子剖析

Content

content，盒模型的现实内容区，该地区的用途是用来放置文本，或者子元素盒子的。

	设置width是否有效	设置height是否有效	内容区大小的决定因素
块级盒子	有	有	由width和height决定
内联级盒子	无	无	有现实存放的文本或者子元素决定

   background-color也是对内容区进行设置的，不过一样平常会溢出到padding里，与border紧紧挨着
   Padding

padding，界说了内容区距离边框的这一片地区，该地区是透明的，没有颜色，包含上下左右的四个内边距。
可以利用独立属性，分别给四个边距设置距离
上内边距右内边距下内边距左内边距padding-top：值px;padding-right：值px;padding-bottom：值px;padding-left：值px; 上述四个属性的语法： padding-xxx: length，只能设置距离，不能设置其他样式(如颜色不能设置)
简化设置： 利用padding属性来简化四个属性的写法
值的个数每一个值的含义padding: 值;1个值时，这个值代表上、下、左、右四个内边距的距离padding: 值1 值2;2个值时，第一个值代表上下内边距，第二个值代表左右内边距padding: 值1 值2 值3;3个值时，第一个值代表上内边距，第二个值代表左右内边距，第三个值代表下内边距padding: 值1 值2 值3 值4;4个值时，上，右，下，左。顺时针影象。    该地区设置不了颜色，但是内容区的颜色会溢出到该地区
  Boeder

元素的边框，在CSS中，通常由的这三个维度属性来控制，分别是边框宽度、边框颜色、边框样式。
每一个边框都有三个维度属性，可以分别对上下左右的边框单独设置宽，颜色，样式，感爱好可以自己试试，这里不做演示，属性如下：
维度上边框下边框左边框右边框宽border-top-widthborder-bottom-widthborder-left-widthborder-right-width颜色border-top-colorborder-bottom-colorborder-left-colorborder-right-color样式border-top-styleborder-bottom-styleborder-left-styleborder-right-style - none: 默认无边框
- dotted: 点虚线
- solid: 实线
- double 双线条
- dashed 虚线
- groove: 界说3D沟槽边框。效果取决于边框的颜色值
- ridge: 界说3D脊边框。效果取决于边框的颜色值
- inset:界说一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 界说一个3D突出边框。效果取决于边框的颜色值
   四个边框的同一个维度属性，可以简化成一个属性：
维度1个值(上下左右)2个值(上下，左右)3个值(上，左右，下)4个值(上，右，下，左)border-widthX: 10px；X: 10px 15px;X:5px 10px 15px;X: 5px 10px 15px 20px;border-color~~~~border-style~~~~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border-width: 5px;
border-color: blueviolet;
border-style: solid;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>
你好
</div>
</body>
</html>

复制代码

四个边框的同一个维度属性的值相同的话，可以继承简化成最终的一个属性：
属性语法剖析borderborder：10px solid red;该属性必须设置三个值，分别代表三个维度的值，顺序可以颠倒盒子尺寸（重点）

盒子的尺寸，也就是盒子的大小，在这里指的是元素的可见大小，不包括外边距，默认情况下由Border + Padding + Content三个部分决定的。由于这几个都可以设置宽度和高度，也就影响了盒子的团体大小。
（内容区内边距边框）
针对于盒子的尺寸，css提供了一个属性box-sizing 来简单控制相应因素的影响效果。
可选值剖析content-box属性width和height 用来规定内容区的大小。 盒子可见框大小由内容区，内边距和边框共同决定。border-box属性width和height用来规定整个可见框的大小，内容区的大小自适应。比如设置了width为100，边框为10，内边距为10，那么内容区的宽就是100 - 10*2 - 10*2 = 60了。 margin(重点)

外边距的根本设置

margin(外边距)属性界说元素周围的空间。作用一样平常是用来设置该元素所在网页的位置，也有四个属性分别对应四个方向的外边距
上外边距右外边距下外边距左外边距margin-top：值px;margin-right：值px;margin-bottom：值px;margin-left：值px; 利用margin属性，可以简化写法：
1个值(上下左右)2个值(上下，左右)3个值(上，左右，下)四个值(上，右，下，左)marginX：10px;X：10px 20px；X：10px 15px 20pxX：5px 10px 15px 20px; 属性值的特点：

上下左右可以利用具体值，界说一个固定的margin（利用像素，pt，em等）
左右也可以利用百分比
左右利用auto，如许做的结果会依赖于浏览器。但是有居中的效果

外边距的特点：

外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
margin会影响到盒子现实占用空间

外边距的折叠
针对于块元素（块级盒子）来说，都是独占一行，因此只涉及到垂直方向上的外边距的重叠(折叠)，即两个元素的相邻外边距会发生重叠标题，也叫合并标题。针对于这种标题，可以概述成两种情况：
1）相邻块元素，也就是兄弟元素
都是正值时：取较大值。
一正一负时：取两者之和。
都是负值时：取绝对值较大的。
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不必要进行特殊处理
2）嵌套块元素，也就是父子元素

父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须要进行处理 （只必要父元素添加border属性）
解决方式：父元素添加border属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#outer {
border: 1px solid red;
width: 800px;
height: 500px;
margin: 0 auto;
}
#d1 {
border: 1px solid red;
width: 300px;
height: 300px;
background-color: aqua;
}
#d2 {
border: 5px solid blue;
width: 200px;
height: 200px;
}
#d2 {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="outer">
<div id="d1">
<div id="d2">
1
</div>
</div>
</div>
</body>
</html>

复制代码

盒子的位置

盒子的位置，也就是元素的位置。一个元素所在的位置，我们一样平常都是相对于其父元向来说的，而且我们必要从两个方向上来考虑，一个是水平方向上，一个是垂直方向上。
水平方向上的盒子位置

一个块级元素一样平常都是位于它所在父元素的内容区里，因此在水平方向上，要满意，而且必须满意：
  左右外边距 + 左右边框 + 左右内边距 + 内容区宽度 = 父元素内容区的宽度，换成公式，就是下面如许的：
  margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  ==== 其父元素内容区的宽度==，如果在手动设置的值上不满意，那么某一个属性值则会失效，然后自动填充，使其满意等式。
  第一种情况：七个属性值加起来 ≠内容区宽度，则浏览器会自动调整右外边距margin-right值以使等式成立
案例1：
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
    最终会自动填充成如下
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
  案例2：
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
       最终会自动填充成如下
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
   第二种情况：设置auto值
七个属性中，只有width，margin-left，margin-right这三个属性可以设置auto值，

只有一个属性设置了auto，则自动调整该属性来使等式成立
两个属性设置为auto时，
- 如果是左外边距和右外边距为auto，则位置居中。
- 如果是一个width和一个外边距，则width调整为最大，外边距调整为0
三个属性都设置为auto时，则width调整为最大，外边距调整为0

垂直方向上的盒子位置

垂直方向上的位置，相对来说比较简单，只必要修改上下的外边距即可，没有水平距离复杂。
有一种溢出情况，必要注意。如果溢出了，可以在父元素里设置属性overflow，有以下可选值

visible: 默认值，表示可见
hidden : 将溢出的内容裁剪
scroll: 添加了上下和左右的滚动条设置
auto: 根据需求自动添加滚动条

其他盒子模型

比如span、a等元素，就是默认利用了内联级盒子模型，也就是display的值为：inline。对于内联元素(行内元素)的盒模型来说：
第一点：内联级盒子不会独占一行。
第二点：不支持设置content的宽度和高度，设置也无效，由于内容区的宽度和高度都是内容数据撑起来的
第三点：支持设置左右的padding、border、margin。不支持上下的padding、border、margin设置，因此垂直方向上不会挤压其他元素。
上下左右的padding、border和左右的margin可以体现，但是并不能把内容顶开。
第四点：基于第三点可以知，垂直方向上的两个紧邻的行内元素是内容区紧挨着内容区的
第五点：水平方向上两个紧邻的行内元素的外边距不会重叠，而是求和。
内联块级盒子模型

而img、input等元素，默认利用了内联块级盒子模型，该模型的特点如下：
利用了内联块级盒子模型的元素，具有内联级元素的某些特点

1）也不会独占一行

也有块级盒子模型的特点：

2）上下左右的外边距、边框、内边距、设置都有效。
3）内容区的宽度和高度，设置有效

还有一些特点：

4）垂直和水平方向上两个相邻的内联块级盒子的外边距不会重叠，而是求和。

元素更换盒子模型

如果元素不想利用默认的盒模型，可以通过display属性，来修改自己的盒模型，如许就具备了修改后的盒模型的特点了。

display属性的可选值如下：

block 表示利用块级盒子模型，即具备了块级盒模型的样式特点。
inline 表示利用内联级盒子模型，即具备了内联级盒模型的样式特点
inline-block 表示利用内联-块级盒子模型，即具备了内联块级盒模型的特点。
none 隐藏，不再占用原有的空间，开释出位置，没有任何样式。

注意，修改了元素的盒模型，并不是说元素的性质变了，比如div修改成内联级盒子模型，div还是块元素，并不是行内元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型</title>
<style>
div{
border: 1px red solid;
width: 400px;
height: 400px;
margin: 100px auto;
}
#s1{
width: 200px;
height: 50px;
border: 3px green solid;
padding: 3px;
margin: 5px;
display: block;
}
div div{
display: inline;
}
</style>
</head>
<body>
<div>
<span id="s1">我是一只鹅</span><span id="s2">你也是一只鹅</span>
<div>1</div><div>2</div>
</div>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

HTML CSS

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云