一、制作水平菜单栏

1.1 制作简单超链接水平菜单栏

display 属性
display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

block：块级元素的默认方式
inline：行内元素的默认方式
提示：可以通过none属性值隐藏导航栏，通过JS更改为block在进行显示。

块级元素：占据整个水平宽度；
行内元素：占据剩余的宽度。

水平栏的实现，就是通过更改行内元素为水平导航栏。

覆盖默认的 Display 值:
如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。
将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：

<!DOCTYPE html>
<html>
<head>
<style>
li {
      
      
  display: inline;
}
</style>
</head>
<body>

<p>把链接列表显示为水平导航栏：</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

拓展：使用float实现水平栏，看下文。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
      
      
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
      
      
  float: left;
}

li a {
      
      
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
      
      
  background-color: #111;
}

.active {
      
      
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

1.2 隐藏菜单栏

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：
visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

结合js和css，实现隐藏菜单栏并显示：

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
      
      
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
      
      
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">点击这里来显示面板</p>

<div id="panel">
  <p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
  <p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
  <p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
  <p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>

<script>
function myFunction() {
      
      
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

总结：

属性	描述
display	指定应如何显示元素。
visibility	指定元素是否应该可见。

1.3 菜单栏居中

在层叠样式表中，使用margin:auto。

div.ex1 {
    
    
  width: 500px;
  margin: auto;  
  border: 3px solid #73AD21;
}

二、定位

2.1 position 属性

position 属性：position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：
static：静态定位的元素不受 top、bottom、left 和 right 属性的影响。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。常常以relative确定内容区块，absolute修饰里面的内容。

fixed：的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。

注意区别fixed和sticky

sticky：的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

注意：Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

相对定位的提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。相对于普通流位置偏移一点点。
绝对定位的提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

div.sticky {
    
    
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

2.2 CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

2.3 元素裁剪

针对于本身显示的元素， clip: rect(0px,60px,200px,0px);对元素进行裁剪，只显示规定大小的形状，而原元素大小不会发生变形。

2.4 重叠或层叠

在对元素进行定位时，它们可以与其他元素重叠。z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序：由于图像的 z-index 为 -1，所以它位于文本后面。
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

img标签：行内块元素。类似于 inline-block 可以被p标签包裹。<p><img src="1.jpg"></p> 比如p是居中margin:auto，图片也居中了。

p标签：块级元素，默认宽度占满一行。

总结：

属性	描述
bottom	设置定位框的底部外边距边缘。
clip	剪裁绝对定位的元素。
left	设置定位框的左侧外边距边缘。
position	规定元素的定位类型。
right	设置定位框的右侧外边距边缘。
top	设置定位框的顶部外边距边缘。
z-index	设置元素的堆叠顺序。

三、溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条，可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。一般来说，制作类似淘宝网站时不需要设置固定高度，因为你不知道爬取的商务图片的大小和高度，以及文字长度，height一般不设置，根据内容灵活伸缩。

属性	描述
overflow	规定如果内容溢出元素框会发生什么情况。
overflow-x	规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y	指定在元素的内容区域溢出时如何处理内容的上/下边缘。

四、浮动实现文字包围图片

float 属性规定元素如何浮动。用于定位和格式化内容，浮动会导致该元素脱离文档流，相当于飘到了文档流的上方，其他元素会补充上去。可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置），默认值
inherit - 元素继承其父级的 float 值

注意：所有和float有关的属性

属性	描述
box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear	指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float	指定元素应如何浮动。
overflow	指定如果内容溢出元素框会发生什么情况。
overflow-x	指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y	指定当溢出元素的内容区域时，如何处理内容的上/下边缘。

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

<!DOCTYPE html>
<html>
<head>
<style>
img {
      
      
  float: right;
}
</style>
</head>
<body>

<h1>向右浮动</h1>

<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>

<p><img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="海贼王" style="width:220px;height:170px;margin-left:15px;">
《海贼王》是一部热血漫。 传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”,许多人为了争夺“ONE PIECE”,争相出海,许多海贼开始树立霸权,而形成了“大海贼时代”。十年后,蒙其·D·路飞为了要实现与因救他而断臂的‘红发’香克斯的约定而出海,并在快乐的航海中拥有了一群值得信赖的伙伴,一起进入“伟大航道”,目标当上“海贼王”。每个伙伴都有自己的梦想,自由,友情,梦想是它的主题!</p>

</body>
</html>

注意：
1、包围效果的实现，是基于块标签内定义一个行内标签，行内标签浮动，块标签内的内容会围绕图片，如上图所示。
2、如果说定义在两个行框（行内边框）内，其中一个浮动则会覆盖住另一个行框。
3、CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

五、实现图片上形成文字说明，形成卡片式展示

前提注意事项：
1、要实现文字出现在图片上而不是上方，使用z-index属性并不能直接达到目的，因为 z-index 只能控制元素的垂直层级关系【也就是谁在上层先显示，但无法构成一个合适的区块，他会占据一整行的行框】，无法影响元素在水平方向上的位置。

2、父元素设置浮动。主要目的是为了使图片和文字能够排列在同一行或同一列，并且文字能够显示在图片的上面或下面或左边或右边，达到一定的布局效果。同时，浮动可以使得其他的内容可以紧密地围绕着图片和文字排列，从而使页面的布局更加紧凑、美观。可以使用浮动来实现文字显示在图片上，但是需要注意一些细节。

3、实现文字出现在图片上。

需要在图片上面叠加一个文字元素，并设置它的 position 属性为 absolute 或 relative【父元素设置为relative，里面的文字元素最好设置为absolute，在该块区内不容易变形】，使得它能够相对于图片定位，然后通过 top、left、right、bottom 属性来控制文字的位置。

步骤如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .float {
      
      
          float: left;
          position: relative; /*添加position:relative*/
        }
        .caption {
      
      
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 1;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          width: 100%;
          padding: 10px;
          box-sizing: border-box;
        }

        .container {
      
      
        float: left;
        position: relative;
      }
      .text {
      
      
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: white;
        font-size: 16px;
        font-weight: bold;
      }
        </style>
        
</head>
<body>
    <div class="float">
        <img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="pptssjx.jpg" style="width:220px;height:170px;margin-left:15px;">
        <div class="caption">这里是文字说明</div>
      </div>
     
      <div class="container">
        <div class="text">这是要显示在图片上的文字</div>
        <img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="pptssjx.jpg" style="width:220px;height:170px;margin-left:15px;">
      </div>
      
</body>
</html>

六清除浮动

6.1 解决浮动背景色问题

要想阻止行框围绕浮动框，需要对该框应用clear属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

包围元素（背景颜色等）包围浮动元素：
请添加图片描述
注意：

出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它，如上图所示。在html父元素里面添加<div class="clear"></div>

.clear {
    
    
  clear: both;
  }

还有另一种办法，那就是对容器 div 进行浮动。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

6.2 解决不设置height，导致的溢出问题(和上述问题类似)

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外。然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

.clearfix {
    
    
  overflow: auto;
}

clearfix hack 来处理布局流。只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：

/* 写在父标签内。*/
.clearfix::after {
    
    
  content: "";
  clear: both;
  display: table;
}

6.3 清除浮动的四种方式

1、给父标签盒子添加高度，防止高度塌陷

 	.father {
    
    
        width: 100%;
        border: 2px solid red;
        height: 300px;
      }

2、添加空标签

      .box {
    
    
        width: 100%;
        height: 300px;
      }
      .clear {
    
    
        clear: both;

在写完的布局下面添加同级的空标签，在空标签里面添加上述类。

3、给父级添加 overflow 属性

给父标签添加 overflow: hidden;

4、给父级添加after伪元素

这个方式的原理和额外标签法的方式一样，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素。

	.clearfix::after {
    
    
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
    
    
        /* IE6、7 专有 */
        *zoom: 1;
      }

七、使用浮动实现布局[grid 布局]

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

简单来说：如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框

* {
    
    
  box-sizing: border-box;
}

.box {
    
    
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 50px; /* 如果需要在图片间增加间距 */
}

拓展一：Grid布局
Grid布局是一种用于网页布局的CSS模块，它提供了一种在行和列的交叉点上对元素进行定位和对齐的强大方法。Grid布局允许开发者在一个二维网格中定义和分布网页上的元素，而不是像传统布局方法一样只能沿着水平或垂直轴单向排列。这使得开发者可以更精细地控制元素在网页上的位置和大小，从而实现更复杂和多样化的布局效果。

Grid布局通过定义网格容器（Grid Container）和网格项（Grid Item）来工作。网格容器是一个包含网格项的元素，它被定义为一个display属性设置为grid或inline-grid的盒子。网格项是网格容器中的子元素，它们被放置在网格中的单元格中，并且可以跨越多个单元格。

Grid布局提供了一系列属性来控制网格中的行和列，包括grid-template-rows、grid-template-columns、grid-template-areas、grid-row、grid-column、grid-row-start、grid-row-end、grid-column-start、grid-column-end等。通过设置这些属性，开发者可以定义网格的行和列的数量、大小和间距，并且可以将网格项放置在特定的单元格中。

总的来说，Grid布局是一种灵活、强大的布局方法，它为开发者提供了更多的控制权和自由度，使得网页布局可以更加多样化、精细化。

以下是Grid布局常用属性及其作用：

属性	作用
grid-template-columns/grid-template-rows	定义网格容器的列/行大小和数量。
grid-template-areas	定义网格容器中的区域布局。
grid-row/grid-column	指定网格项的行/列位置。
grid-row-start/grid-row-end/grid-column-start/grid-column-end	指定网格项开始和结束的行/列位置。
grid-column-gap/grid-row-gap	定义网格行/列之间的间距。
justify-items/align-items	控制网格项在行/列上的对齐方式。
justify-content/align-content	控制网格在行/列上的对齐方式，当网格容器的大小大于网格内容时使用。
grid-auto-rows/grid-auto-columns	定义在网格容器中未明确指定大小的行/列的大小。
grid-auto-flow	定义在网格容器中自动放置的网格项的方向和顺序。
grid-template	定义网格容器的列/行大小和数量，以及网格区域的布局。
grid-area	指定网格项的大小和位置，同时为该项指定一个名称，以便在 grid-template-areas 中使用。
order	定义网格项在网格容器中的顺序。
z-index	定义网格项在网格层叠顺序中的顺序，具有堆叠效果。

拓展二：制作弹性框架，学习Flexbox 布局 点击这里

八、使用浮动创建一个网站

<!DOCTYPE html>
<html>
<head>
<style>
* {
      
      
  box-sizing: border-box;
}

body {
      
      
  margin: 0;
}

.header {
      
      
  background-color: #2196F3;
  color: white;
  text-align: center;
  padding: 15px;
}

.footer {
      
      
  background-color: #444;
  color: white;
  padding: 15px;
}

.topmenu {
      
      
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #777;
}

.topmenu li {
      
      
  float: left;
}

.topmenu li a {
      
      
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.topmenu li a:hover {
      
      
  background-color: #222;
}

.topmenu li a.active {
      
      
  color: white;
  background-color: #4CAF50;
}

.column {
      
      
  float: left;
  padding: 15px;
}

.clearfix::after {
      
      
  content: "";
  clear: both;
  display: table;
}

.sidemenu {
      
      
  width: 25%;
}

.content {
      
      
  width: 75%;
}

.sidemenu ul {
      
      
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidemenu li a {
      
      
  margin-bottom: 4px;
  display: block;
  padding: 8px;
  background-color: #eee;
  text-decoration: none;
  color: #666;
}

.sidemenu li a:hover {
      
      
  background-color: #555;
  color: white;
}

.sidemenu li a.active {
      
      
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Shanghai</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

补充：标签的嵌套规则

大部分标签之间是可以随意嵌套的，但也存在一些特殊规则，比如：p标签内不能再嵌套p标签和div标签等块级标签。
1、块级元素嵌套规则
① 特殊的<p>、<h1> ~ <h6>、<dt>块级元素
这几个元素具有特殊规则：这些标签内部不能嵌套任何块级元素，只能嵌套行内元素或行内块元素，就算我们给块级元素设置display: inline，也是不行的。
如果我们在这些特殊元素内嵌套了块级元素，那么浏览器会将元素的前后两个标签解析成两对标签。那此时我们给该元素设置的样式就无法作用到嵌套的元素身上。

CSS的中级教程（一） -- 浮动和部分布局