IT评测·应用市场-qidao123.com

标题: HTML CSS [打印本页]
作者: 千千梦丶琪    时间: 2025-3-19 09:44
标题: HTML CSS
前端

前端，通常指的是用户界面部分，主要负责与用户直接交互。简单点说，你在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的调试工具。比较主流的浏览器有以下几种：
  
   HTML版本阐明
 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元素的附加信息

下面列出了实用于大多数 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 个。如需在页面中增加空格的数量，您必要利用 字符实体。
常用实体如下：

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

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

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

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

   meta元素描述了一些根本的元数据。元数据不体现在页面上，但会被浏览器剖析。比如指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
   为搜索引擎界说关键词:
   <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
   为网页界说描述内容:
   <meta name="description" content="免费 Web & 编程 教程">
   界说网页作者:
   <meta name="author" content="michael">
  每30秒钟刷新当前页面:
   <meta http-equiv="refresh" content="30">
<meta   http-equiv="refresh" content="3;url=https://www.baidu.com">
   规定字符集
   <meta charset="utf-8">
   <style>与<link>

<style>元素一样平常用于书写内部样式表，如：
   <head>
   <style type="text/css">
      body {
         background-color:yellow;
      }
   </style>
</head>
   <link> 标签署义当前文档与外部资源之间的关系。常用于引入外部样式表
   <link rel="stylesheet" href="styles.css">
  这两个元素标签，后面会具体讲。
<script>元素

<script>标签用于引入外部的脚本文件，或者书写脚本代码。
<noscript>元素

早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中体现替代的内容。这个元素可以包含任何 HTML 元素。这个标签的用法也非常简单：
   <noscript>
Your browser does not support  JavaScript!
</noscript>
  HTML底子标签

标题标签


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


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


   <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>
   图像标签


属性作用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>
    超链接标签

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

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

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

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

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

 有序列表

自界说列表


注意事项：列表项内部可以利用段落、换行符、图片、链接以及其他列表等等。
   <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>
  
  表单标签 

HTML 表单用于网络用户的输入信息。
HTML 表单表示文档中的一个地区，此地区包含交互控件，将用户网络到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。 这些元素也都被称为控件元素
   
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <form action="/" method="post">
  12.         <fieldset>
  13.             <legend>用户信息采集</legend>
  14.             <br>
  16.             <!-- 文本输入框:   input的type类型为text。 默认类型 -->
  17.             <label for="name">用户名:</label>
  18.             <input type="text" id="name" name="username" required maxlength="10">
  20.             <!-- 密码输入框：  type为password。 显示效果为.或者* -->
  21.             <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
  22.             <input type="password" id="password" name="password" required size="10">
  25.             <br>
  26.             <br>
  27.             <hr>
  28.             <br>
  30.             <!-- 单选按钮: type为radio,   name相同的为一组，-->
  31.             <label>性别:</label>
  32.             <input type="radio" id="male" name="gender" value="male" checked>
  33.             <label for="male">男</label>
  34.             <input type="radio" id="female" name="gender" value="female">
  35.             <label for="female">女</label>
  37.             <br>
  38.             <!-- 复选框：type为checkbox  -->
  39.             <label>爱好</label>
  40.             <input type="checkbox" id="book" name="hobbys" value="book">
  41.             <label for="book">读书</label>
  42.             <input type="checkbox" id="movie" name="hobbys" checked value="movie">
  43.             <label for="movie">电影</label>
  44.             <input type="checkbox" id="music" name="hobbys" value="music">
  45.             <label for="music">音乐</label>
  46.             <input type="checkbox" id="dance" name="hobbys" checked value="dance">
  47.             <label for="dance">跳舞</label>
  49.             <br>
  50.             <br>
  51.             <hr>
  52.             <br>
  54.             <label for="range">范围</label>
  55.             0<input type="range" id="range" name="range" value="50">100
  57.             <br>
  58.             <br>
  59.             <hr>
  60.             <br>
  62.             <label for="number">数字</label>
  63.             <input type="number" id="number" name="number" value="4" max="10" min="1" readonly>
  65.             <br>
  66.             <br>
  67.             <hr>
  68.             <br>
  70.             <label>日期时间</label>
  71.             <input type="time" value="12:12">
  72.             <input type="date">
  73.             <input type="datetime-local">
  74.             <input type="week">
  75.             <input type="month">
  77.             <br>
  78.             <br>
  79.             <hr>
  80.             <br>
  82.             <label for="color">颜色</label>
  83.             <input type="color">
  85.             <br>
  86.             <br>
  87.             <hr>
  88.             <br>
  90.             <label for="file">文件上传</label>
  91.             <input type="file">
  92.             <br>
  93.             <br>
  94.             <hr>
  95.             <br>
  98.             <!-- 下拉列表 -->
  99.             <label for="province">省份:</label>
  100.             <select id="province" name="province">
  101.                 <option value="hlj">黑龙江省</option>
  102.                 <option value="jl">吉林省</option>
  103.                 <option value="ln">辽宁省</option>
  104.             </select>
  105.             <label for="city">城市:</label>
  106.             <select id="city" name="city">
  107.                 <option value="harbin">哈尔滨</option>
  108.                 <option value="cc">长春</option>
  109.                 <option value="sy">沈阳</option>
  110.                 <option value="" selected></option>
  111.             </select>
  113.             <br>
  114.             <br>
  115.             <hr>
  116.             <br>
  117.             <label for="">hidden: 但是会被提交</label>
  118.             <input type="hidden" name="renming" value="zhangsan">
  119.             <br>
  120.             <br>
  121.             <hr>
  122.             <br>
  124.             <label for="">文本域</label>
  125.             <textarea name="" id="" cols="20" rows="2"></textarea>
  127.             <br>
  128.             <br>
  129.             <hr>
  130.             <br>
  131.             <!-- 提交按钮 -->
  132.             <input type="submit" value="提交">
  133.             <input type="reset" value="重置">
  134.             <input type="button" value="普通按钮">
  135.         </fieldset>
  136.     </form>
  137. </body>
  139. </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来筹划页面布局。常用的网页的布局大致也就是如下图所示的如许的，当然也可以根据现实需求来筹划网页的布局。

  
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div class="container" style="border: 1px red solid;">
  12.         <div class="header" style="border: 1px blue solid;  height: 100px;">logo区</div>
  13.         <div class="nav" style="border: 1px yellowgreen solid;  height: 100px;">导航区</div>
  14.         <div class="body" style="border: 1px red solid;   height: 400px;">
  15.             <div class="left" style="border: 5px pink dotted; width: 500px; height: 390px;float:left">侧边导航区</div>
  16.             <div class="center" style="border: 5px solid red;width: 850px;  height: 390px;float:left">
  17.                 <div class="article" style="border: 5px solid green; height: 190px;">文章部分</div>
  18.                 <div>
  19.                     <div style="border: 1px solid grey; height: 95px; width: 420px; float: left;">左上</div>
  20.                     <div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">右上</div>
  21.                     <div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">左下</div>
  22.                     <div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">右下</div>
  23.                 </div>
  24.             </div>
  25.             <div class="right" style="border: 5px pink dotted; width: 500px; height: 390px;float: left;">广告区</div>
  26.         </div>
  27.         <div class="footer" style="border: 1px greenyellow solid; height: 100px;">页面底部</div>
  28.     </div>
  29. </body>
  31. </html>
复制代码

  容器元素<div>


容器元素<span>



为了让这些块及元素在所有版本的浏览器中生效，你必要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
   header, section, footer, aside, nav, article, figure{
    display: block;
}
  IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能利用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.可以利用HTML5 Shiv来解决这个标题：
   <!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
  <![endif]-->
  布局元素不具有任何样式，只是使页面元素的的语义更加明确。
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>
    <!-- 兼容性的标题
          老版本的浏览器不支持mp3格式
          可以将不同格式的音频放入一个组里面，浏览器会自动从上而下 去利用可以应用的谁人资源
       -->
    <audio controls>
        <source src="./音视频/audio.mp3">
        <source src="./音视频/audio.ogg">
        您的浏览器不支持 audio 元素。
    </audio>
       <!-- 可以利用embed引入音频，可以设置宽和高 -->
    <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
视频格式的 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>
      <!-- 兼容性的标题
          老版本的浏览器不支持webm格式
          可以将不同格式的视频放入一个组里面，浏览器会自动从上而下 去利用可以应用的谁人资源
       -->
    <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>
   <!-- 
   常用属性：
      src:  外部网页的URL
      frameborder:   规定是否体现 <iframe> 周围的边框。
         0 不体现
         1 体现
      width:  规定宽度
      height: 规定高度
   -->
   <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声明总是以分号 ; 竣事，声明总以大括号 {} 括起来:
     
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>CSS内部样式表</title>
  7.     <style>
  8.        /* 为了让CSS可读性更强，你可以每行只描述一个属性: */
  9.         #d1 {
  10.             background-color: orange;
  11.             width: 500px;
  12.             height: 200px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="d1">
  19.         一个div
  20.     </div>
  21. </body>
  23. </html>
复制代码
   优点：
  
  缺点：
  
  
   外部样式表

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

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

  
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>CSS内部样式表</title>
  7.     <link rel="stylesheet" type="text/css" href="mystyle.css">
  8. </head>
  10. <body>
  11.     <div id="d1">
  12.         一个div
  13.     </div>
  14. </body>
  16. </html>
复制代码
 选择器（4种）

标签选择器

布局： 标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有的这类标签，设置样式
注意：
  
  1. <style>
  2.     p{
  3.         color: red;
  4.     }
  5. </style>
  6. <body>
  7.     <p>
  8.         标签选择器
  9.     </p>
  10. </body>
复制代码
 类选择器

布局： .类名{css属性名：属性值；}
作用： 通过类名，找到页面中所有的带有这个类名的标签，设置样式
注意：
  
  1. <style>
  2.     .one{
  3.         color: red;
  4.     }
  5. </style>
  6. <body>
  7.     <div class="one">
  8.         类选择器
  9.     </div>
  10. </body>
复制代码
id选择器

 

布局： #id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
  
  1. <style>
  2.     #one{
  3.         color: red;
  4.     }
  5. </style>
  6. <body>
  7.     <div id="one">
  8.         id选择器
  9.     </div>
  10. </body>
复制代码

  class类名和id属性值之间的区别
类选择器和id选择器之间的区别
通配符选择器

布局： *{css属性名：属性值}
作用：找到页面中所有的标签，然后设置样式
注意：
  
  1. <style>
  2.    * {
  3.       color: red;
  4.    }
  5. </style>
  6. <body>
  7.    <div>
  8.       通配符选择器
  9.    </div>
  10. </body>
复制代码
 复合选择器（2种）

交集选择器

语法： 选择器1选择器2{css属性名：属性值}
作用：选中页面中同时满意多个选择器的标签，紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：
  
  1. <style>
  2.    p.one{
  3.       color: red;
  4.    }
  5. </style>
  6. <body>
  7.    <p class="one">
  8.       这个元素会被应用样式
  9.    </p>
  10.    <p>
  11.       这个元素不会被应用样式
  12.    </p>
  13. </body>
复制代码

   并集选择器

语法： 选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
注意： 选择器与选择器之间用逗号隔开 可以是底子选择器或者复合选择器 每组选择器通常一行写一个，进步代码的可读性
  
  1. <style>
  2.    p,div{
  3.       color: red;
  4.    }
  5. </style>
  6. <body>
  7.    <p>
  8.       这个元素会被应用样式
  9.    </p>
  10.    <div>
  11.       这个元素也会被应用样式
  12.    </div>
  13. </body>
复制代码

   关系选择器（4种）

语法用法备注父亲>儿子儿子中的个别选择选择器之间有大于号祖先 后代后代全部选择选择器之间用空格隔开兄+弟哥哥的弟弟被选择(弟弟必须严格相邻哥哥)选择器之间用+隔开兄~弟哥哥的符合条件的所有弟弟被选择选择器之间用波浪线隔开  
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>关系选择器(兄弟、父子选择器)</title>
  7.     <style>
  8.         /* 父子选择 ，个别几个儿子*/
  9.         /* div>span {
  10.             color: blue;
  11.             font-size: 40px;
  12.         } */
  14.         /* 祖先后代选择，全部 */
  15.         /* div span {
  16.             color: red;
  17.         } */
  20.         /* 必须相邻兄弟选择，是兄弟但不相邻，不选择 */
  21.         /* div+span {
  22.             color: greenyellow;
  23.         } */
  25.         /* 全兄弟选择 */
  26.         /* p~span {
  27.             color: rgb(3, 110, 8);
  28.         } */
  30.         p~* {
  31.             color: orange;
  32.         }
  33.     </style>
  34. </head>
  36. <body>
  37.     <div>
  39.         我是div
  40.         <p>
  41.             我是div中的p
  42.             <span>我是p中的span</span>
  43.         </p>
  44.         <div>我是div中的div</div>
  45.         <span>我是div中的span1</span>
  46.         <span>我是div中的span2</span>
  47.     </div>
  48.     <span>我是div之外的span1</span>
  49.     <span>我是div之外的span2</span>
  51. </body>
  53. </html>
复制代码

  属性选择器（5种）

语法用法[属性]选中含有指定属性的元素[属性=属性值]选中含有指定属性和指定属性值的元素[属性^=属性值]选中含有指定属性和指定属性值开头的元素[属性$=属性值]选中含有指定属性和指定属性值末了的元素[属性*=属性值]选中指定属性名和含有指定属性值的元素  
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>属性选择器</title>
  7.     <style>
  8.         /* 第一种方法：选择含有指定属性的元素。
  9.                 语法：[属性名]{} */
  10.         /*选择属性名为title,设置字体颜色红色  */
  11.         [title] {
  12.             color: red;
  13.         }
  15.         /* 第二种用法：选择含有指定属性及指定属性值的元素。
  16.                 语法：[属性名=属性值]{} */
  17.         /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
  18.         [title=ab] {
  19.             color: green;
  20.         }
  22.         /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
  23.                 语法：[属性名^=属性值]{}  */
  24.         /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
  25.         [title^=ab] {
  26.             background-color: yellow;
  27.         }
  29.         /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
  30.                 语法：[属性名$=属性值] */
  31.         /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
  32.         [title$=ab] {
  33.             font-size: 30px;
  34.         }
  36.         /* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
  37.                 语法：[属性值*=属性名]{} */
  38.         /* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
  39.         [title*=c] {
  40.             background-color: green;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <h1 title="a">《出塞》</h1>
  47.     <h2 title="ab">唐·王昌龄</h2>
  48.     <p title="abc">秦时明月汉时关，</p>
  49.     <p title="abab">万里长征人未还。</p>
  50.     <p title="c">但使龙城飞将在，</p>
  51.     <p>不教胡马度阴山。</p>
  52. </body>
  54. </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()      括号里传入其他选择器
  
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>否定伪类</title>
  7.     <style>
  8.         div :not(p:first-of-type):not(p:last-child) {
  9.             color: red;
  10.         }
  11.     </style>
  12. </head>
  14. <body>
  15.     <div>
  16.         <p>文字</p><!-- 不变红 -->
  17.         <p>文字</p><!-- 变红 -->
  18.         <p>文字</p><!-- 变红 -->
  19.         <p>文字</p><!-- 不变红 -->
  20.     </div>
  21. </body>
  23. </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所写的内容无法选中且永远在最前和最后)
  
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>伪元素选择器</title>
  7.     <style>
  8.         /* 需求一：让文章的首字母一直为字体为24px */
  9.         p::first-letter {
  10.             font-size: 24px;
  11.         }
  13.         /* 需求二：让文章的第一行添加背景色灰色 */
  14.         /* p::first-line {
  15.             background-color: #ccc;
  16.         } */
  18.         /* 需求三：让选中的内容，字体为红色 */
  19.         /* p::selection {
  20.             color: red;
  21.         } */
  23.         /* 需求四：在元素开始的位置前+'你好' */
  24.         /* p::before {
  25.             content: '你好';
  26.             color: red
  27.         } */
  28.     </style>
  29. </head>
  31. <body>
  32.     <p>hello</p>
  33.     <p>world,我们要相信明天会更好。</p>
  34. </body>
  36. </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表示半透明
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>伪元素选择器</title>
  7.     <style>
  8.         /* 设置整体里的字体大小 */
  9.         html {
  10.             font-size: 8px;
  11.         }
  13.         /* 设置body里的字体大小，正常默认大小也为16px*/
  14.         body {
  15.             font-size: 16px;
  16.         }
  18.         p:first-child {
  19.             /* 可以看出，和body里的文字大小一致 */
  20.             font-size: 16px;
  21.         }
  23.         p:nth-child(2) {
  24.             /* 1em=1font-size, 所以也是16px */
  25.             font-size: 1em;
  26.         }
  28.         p:nth-child(3) {
  29.             /* 1.5em   等于24px */
  30.             font-size: 1.5em;
  31.         }
  33.         p:nth-child(4) {
  34.             font-size: 24px;
  35.         }
  37.         p:nth-child(5) {
  38.             /* rem 是相对于HTML根元素的font-size大小 */
  39.             font-size: 2rem;
  40.         }
  42.         p:nth-child(6) {
  43.             /* color: rgb(255, 0, 0); */
  44.             /* color: rgb(255, 255, 0) */
  45.             color: rgb(0, 0, 255)
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     body里的文字
  52.     <p> 段落1里的文字</p>
  53.     <p> 段落2里的文字</p>
  54.     <p> 段落3里的文字</p>
  55.     <p> 段落4里的文字</p>
  56.     <p> 段落5里的文字</p>
  57.     <p> 段落6里的文字</p>
  59. </body>
  61. </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~~~~  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         div {
  8.             border-width: 5px;
  9.             border-color: blueviolet;
  10.             border-style: solid;
  11.             width: 300px;
  12.             height: 300px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div>
  18.         你好
  19.     </div>
  20. </body>
  21. </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;   属性值的特点：
  
  外边距的特点：
  
   外边距的折叠
针对于块元素（块级盒子）来说，都是独占一行，因此只涉及到垂直方向上的外边距的重叠(折叠)，即两个元素的相邻外边距会发生重叠标题，也叫合并标题。针对于这种标题，可以概述成两种情况：
1）相邻块元素，也就是兄弟元素
都是正值时： 取较大值。
一正一负时： 取两者之和。
都是负值时： 取绝对值较大的。
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不必要进行特殊处理
2）嵌套块元素，也就是父子元素

  
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         #outer {
  9.             border: 1px solid red;
  10.             width: 800px;
  11.             height: 500px;
  12.             margin: 0 auto;
  13.         }
  15.         #d1 {
  16.             border: 1px solid red;
  17.             width: 300px;
  18.             height: 300px;
  19.             background-color: aqua;
  20.         }
  22.         #d2 {
  23.             border: 5px solid blue;
  24.             width: 200px;
  25.             height: 200px;
  26.         }
  28.         #d2 {
  29.             margin-top: 50px;
  30.         }
  31.     </style>
  32. </head>
  34. <body>
  35.     <div id="outer">
  36.         <div id="d1">
  37.             <div id="d2">
  38.                 1
  39.             </div>
  40.         </div>
  41.     </div>
  42. </body>
  44. </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值，

垂直方向上的盒子位置

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

 其他盒子模型

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

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

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

还有一些特点：

元素更换盒子模型

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


display属性的可选值如下：

    注意，修改了元素的盒模型，并不是说元素的性质变了， 比如div修改成内联级盒子模型，div还是块元素，并不是行内元素。
   
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>行内元素的盒模型</title>
  6.     <style>
  7.         div{
  8.             border: 1px red solid;
  9.             width: 400px;
  10.             height: 400px;
  11.             margin: 100px auto;
  12.         }
  13.         #s1{
  14.             width: 200px;
  15.             height: 50px;
  16.             border: 3px green solid;
  17.             padding: 3px;
  18.             margin: 5px;
  19.             display: block;
  20.         }
  21.         div div{
  22.             display: inline;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div>
  28.         <span id="s1">我是一只鹅</span><span id="s2">你也是一只鹅</span>
  29.         <div>1</div><div>2</div>
  30.     </div>
  31. </body>
  32. </html>
复制代码
 

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



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4