CSS学习笔记之中级教程（一）

1、CSS 布局 - display 属性

1.1 display 属性

  • display 属性是用于控制布局的最重要的 CSS 属性。

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

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

1.2 块级元素（block element）

  • 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
  • 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。

块级元素的一些例子：

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

1.3 行内元素（inline element）

  • 内联元素不从新行开始，仅占用所需的宽度。
  • 与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。

行内元素的一些例子：

  • <span>
  • <a>
  • <img>

1.4 Display: none

  • display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

  • 默认情况下，<script> 元素使用 display: none;。

1.5 覆盖默认的 Display 值

  • display: inline; 将内容设置为行内元素
    将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。
  • display: block;将内容设置为块元素
    将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。
li {
  display: inline;
}
a {
  display: block;
}

1.6 隐藏元素

  • display:none 隐藏元素，不占位
  • visibility:hidden 隐藏元素，占位

（1）display:none

<!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>
</head>
<style>
h1.hidden{
  display: none;
}

</style>
<body>
  <h1>此标题可见</h1>
  <h1 class="hidden">此标题不可见</h1>
  <p>请注意， display: none; 的标题不会占用任何空间。</p>
</body>
</html>

运行效果：
在这里插入图片描述
（2）visibility:hidden

<!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>
</head>
<style>
h1.hidden{
  display: none;
}
h1.hiddenvisibility{
  visibility: hidden;
}

</style>
<body>
  <h1>此标题可见</h1>
  <!-- <h1 class="hidden">此标题不可见</h1> -->
  <h1 class="hiddenvisibility">此标题不可见,占空间</h1>
  <p>请注意， display: none; 的标题不会占用任何空间。</p>
</body>
</html>

运行效果：
在这里插入图片描述

2、CSS 布局 - width 和 max-width

  • 外边距设置为 auto（ margin: auto），以将元素在其容器中水平居中
<!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>
</head>
<style>
div.width{
  width: 500px;
  border: 3px solid #73AD21;
  margin: auto;
}
div.maxwidth{
  max-width: 500px;
  margin: auto;
  border:3px solid #73AD21;
}

</style>
<body>
  <div class="width">这个 div 元素的宽度是：500px;</div>
  <br>
  ​
  <div class="maxwidth">这个 div 元素的最大宽度是：500px;</div>
  ​
  <p><b>提示：</b>将浏览器窗口拖动到小于500px的宽度，以查看这两个 div ！</p>

</body>
</html>

运行效果：
在这里插入图片描述

3、CSS 布局 - position 属性

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

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

3.1 默认属性： position: static

  • HTML 元素默认情况下的定位方式为 static（静态）。

  • 静态定位的元素不受 top、bottom、left 和 right 属性的影响。

  • position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位

  • 默认情况下，块级元素占据其父容器的整个宽度，并垂直堆叠。

  • 内联元素则不会创建换行符，并与其他元素在同一行内显示。

  • 具有position: static;的元素不受z-index属性影响。它们的堆叠顺序由它们在文档树中的位置决定，并且无法改变。

<!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>
</head>
<style>
  div.static {
    border: 3px solid #73AD21;
    position: static;
  }
</style>

<body>
  <div class="static">这个 div 元素设置 position: static</div>
  ​
  <p><b>提示：</b>设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位！</p>

</body>

</html>

运行效果：
在这里插入图片描述

3.2 相对定位：position: relative;

  • 具有position: relative;的元素仍然遵循文档流，并且不会脱离文档流。相对定位的元素仍然占据其原始位置，其他元素的布局不会受到影响。
  • 可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。这些偏移量是相对于元素自身进行计算的。
  • 当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。其他元素的定位不会受到影响，它们仍会按照正常流程进行显示。
<!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>
</head>
<style>
  *{
    margin: 0px;
    padding: 0px;
  }
  /* 默认属性 */
  div.static {
    border: 3px solid #73AD21;
    position: static;
  }
  div.relative{
    position: relative;
    left: 50px;
    top: 50px;
    border: 3px solid #73AD21;
  }

</style>

<body>
  <div class="static">这个 div 元素设置 position: static</div> 
  ​
  <p><b>提示：</b>设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位！</p>

  <div class="relative">这个 div 元素设置 position: relative</div> 
</body>
 
</html>

运行效果：

在这里插入图片描述

3.3 固定定位：position: fixed;

  • 固定定位，元素的位置相对于浏览器窗口进行定位，不会随页面滚动而改变。可以使用top、bottom、left、right属性来指定定位的偏移量。
<!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>
</head>
<style>
  *{
    margin: 0px;
    padding: 0px;
  }
  /* 默认属性 */
  div.static {
    border: 3px solid #73AD21;
    position: static;
  }
  div.relative{
    position: relative;
    left: 50px;
    top: 50px;
    border: 3px solid #73AD21;
  }
  div.fixed{
    position: fixed;
    right: 0px;
    bottom: 50px;
    border: 3px solid #73AD21;
  }

</style>

<body>
  <div class="static">这个 div 元素设置 position: static</div> 
  ​
  <p><b>提示：</b>设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位！</p>

  <div class="relative">这个 div 元素设置 position: relative</div> 

  
  <div class="fixed">这个 div 元素设置 position: fixed</div> 
</body>
 
</html>

运行效果：
在这里插入图片描述

3.4 绝对定位：position: absolute;

  • position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

  • 然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

<!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>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  div.relative {
    position: relative;
    left: 50px;
    top: 50px;
    width: 500px;
    height: 300px;
    border: 3px solid #73AD21;
  }

  div.absolute {
    position: absolute;
    border: 3px solid #73AD21;
    width: 100px;
    left: 20px;
    top: 80px;
  }
</style>

<body>

  <div class="relative">
    <p> 这个 div 元素设置 position: relative</p>

    <div class="absolute">这个 div 元素设置 position: absolute</div>

  </div>

</body>

</html>

运行效果：
在这里插入图片描述

3.5 粘性定位：position: sticky;

  • position: sticky; 的元素根据用户的滚动位置进行定位。

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

<!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>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  div.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color:aquamarine;
    border: 3px solid #73AD21;
  }
</style>

<body>

  <p>哈哈哈哈</p>

  <div class="sticky">这个 div 元素设置 position: sticky</div>
  <div style="padding-bottom: 1000px">
    <p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p>
  <p>向上滚动以消除粘性。</p>
  <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

  </div>
</body>

</html>

运行效果：
在这里插入图片描述
滚动后效果：
在这里插入图片描述

3.6 重叠元素：z-index

  • 在对元素进行定位时，它们可以与其他元素重叠。

  • z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

  • 元素可以设置正或负的堆叠顺序

  • 具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

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

（1） z-index: -1;

<!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>
</head>
<style>
img{
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 200px;
}

</style>
<body>
  <div>
<img src="imgs/icon_mess_sellorder.png">
<p>你好呀哈哈哈</p>
  </div>
  
</body>
</html>

运行效果：
在这里插入图片描述

（2） z-index: 1;

<!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>
</head>
<style>
img{
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
}

</style>
<body>
  <div>
<img src="imgs/icon_mess_sellorder.png">
<p>你好呀哈哈哈</p>
  </div>
  
</body>
</html>

运行效果：
在这里插入图片描述

3.7 定位图像中的文本

  • Top + Left
  • Top +Right
  • Bottom +Left
  • Bottom +Right
  • Centered
<!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>
</head>
<style>
  div.relative {
    position: relative;
  }

  img {
    width: 200px;
    height: 200px;
    opacity: 0.7;
    z-index: -1;
  }

  p.topleft {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 25px;
  }

  p.topright {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 25px;
  }

  p.bottomleft {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 25px;
  }

  p.bottomright {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 25px;
  }

  p.centered {
    position: absolute;
    text-align: center;
    font-size: 25px;
    width: 100%;
  }
</style>

<body>
  <div>
    <img src="imgs/icon_mess_sellorder.png">
    <p class="topleft">左上</p>
    <p class="topright">右上</p>
    <p class="bottomleft">左下</p>
    <p class="bottomright">右下</p>
    <p class="centered">居中</p>
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

4、CSS 布局 - 溢出：overflow

  • overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
  • overflow 属性仅适用于具有指定高度的块元素。

overflow 属性可设置以下值：

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

4.1 overflow: visible

  • 默认。溢出没有被剪裁。内容在元素框外渲染
<!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>
</head>
<style>
div.visible{
  width: 100px;
  height: 100px;
  overflow: visible;
  border:  1px solid #777;
  background-color: aquamarine;
}

</style>
<body>
  <div class="visible" >
    <p>overflow: visible 默认情况下，溢出是可见的，这意味着它不会被裁剪，，超出部分在元素外渲染</p>
  </div>

</body>
</html>

运行效果：
在这里插入图片描述

4.2 overflow: hidden;

  • 使用 hidden 值，溢出会被裁剪，其余内容被隐藏
<!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>
</head>
<style>

div.hidden{
  margin-top: 100px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border:  1px solid #777;
  background-color: aquamarine;
}

</style>
<body>

  <div class="hidden" >
    <p>overflow: hidden  会剪裁溢出，并隐藏内容的其余部分</p>
  </div>

</body>
</html>

运行效果：

在这里插入图片描述

4.3 overflow: scroll;

  • scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）
<!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>
</head>
<style>

div.scroll{
  margin-top: 20px;
  width: 100px;
  height: 100px;
  overflow: scroll;
  border:  1px solid #777;
  background-color: aquamarine;
}

</style>
<body>

  <div class="scroll" >
    <p>overflow: scroll 溢出部分会被裁剪，并自动添加滚动条，滚动可见其余部分</p>
  </div>

</body>
</html>

运行效果：
在这里插入图片描述

4.4 overflow: auto;

  • auto 值类似于 scroll，但是它仅在必要时添加滚动条
<!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>
</head>
<style>
div.auto{
  margin-top: 20px;
  width: 100px;
  height: 100px;
  overflow: auto;
  border:  1px solid #777;
  background-color: aquamarine;
}

</style>
<body>
  <div class="auto" >
    <p>overflow: auto 溢出部分会被裁剪，但只会在必要时候增加滚动条（内容超出元素高度时候自动增加滚动条），滚动可见其余部分</p>
  </div>
  <div class="auto" >
    <p>overflow: auto 哈哈哈</p>
  </div>
</body>
</html>

运行效果：
在这里插入图片描述

4.5 overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

  • overflow-x 指定如何处理内容的左/右边缘。
  • overflow-y 指定如何处理内容的上/下边缘。
<!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>
</head>
<style>

div.overflow-xy{
    margin-top: 20px;
  width: 100px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border:  1px solid #777;
  background-color: aquamarine;
}

</style>
<body>

  <div class="overflow-xy" >
    <p>overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出</p>
  </div>
</body>
</html>

运行效果：
在这里插入图片描述

5、CSS 布局 - 浮动和清除：float、clear

  • CSS float 属性规定元素如何浮动。

  • CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

5.1 浮动：float 属性

  • float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

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

5.1.1 float: right;

<!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>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  div.block{
    display: block;
  }

  img.right {
    width: 100px;
    height: 100px;
    float: right;
    margin-left: 20px;
  }

  img.left {
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 20px;
  }
</style>

<body>

  <div class="block">
    <p><img class="right" alt="pic" src="imgs/icon_mess_sellorder.png">图片在文字右边</p>
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

5.1.2 float: left;

<!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>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  div.block{
    display: block;
  }

  img.right {
    width: 50px;
    height: 50px;
    float: right;
    margin-left: 20px;
  }

  img.left {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 20px;
  }
</style>

<body>

  <!-- <div class="block">
    <p><img class="right" alt="pic" src="imgs/icon_mess_sellorder.png">图片在文字右边</p>
  </div> -->
  <div class="block">
  <p><img class="left" alt="pic" src="imgs/icon_mess_sellorder.png">图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边</p>
</div>
</body>

</html>

运行效果：
在这里插入图片描述

5.1.3 float: none;

<!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>
</head>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  div.block{
    display: block;
  }
  img.none{
    width: 50px;
    height: 50px;
    float: none;
  }
</style>

<body>

<div class="block">
  <p><img class="none" alt="pic" src="imgs/icon_mess_sellorder.png">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body>

</html>

运行效果：在这里插入代码片
在这里插入图片描述

5.2 清除: clear 和 clearfix

5.2.1 clear

  • clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
  • 使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

clear 属性可设置以下值之一：

  • none - 允许两侧都有浮动元素。默认值
  • left - 左侧不允许浮动元素
  • right- 右侧不允许浮动元素
  • both - 左侧或右侧均不允许浮动元素
  • inherit - 元素继承其父级的 clear 值
<!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>
  <!-- 外部引入css -->
  <link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>
  div.ex1 {
    float: left;
    border: 1px solid #777;
  }
  div.ex2{
    clear: left;
  }

  img.left {
    width: 50px;
    height: 50px;
    float: left;
  }
</style>

<body>
  <h1>不使用clear</h1>

  <div class="ex1">
    内容1
  </div>
  <div >
    内容2内容2内容2内容2内容2内容2内容2
  </div>
  <h1>使用clear</h1> 
  <div class="ex1">
    内容1
  </div>
  <div class="ex2">
    内容2内容2内容2内容2内容2内容2内容2
  </div>


</body>

</html>

运行效果：
在这里插入图片描述

5.2.2 clearfix

  • 如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外,然后我们可以向包含元素添加 overflow: auto;，来解决此问题
<!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>
  <!-- 外部引入css -->
  <link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>
  div.ex1 {
    clear: both;
    border: 1px solid #777;
  }

  div.clearfix{
    clear: both;
    overflow: auto;
    border: 1px solid #777;
  }

  img.float {
    width: 50px;
    height: 50px;
    float: left;
  }
</style>

<body>
  <h1>沒有使用clearfix </h1>
  <div class="ex1">
    <img class="float" src="imgs/icon_mess_sellorder.png">
    <p>内容内容内容内容内容内容内容</p>
  </div>
  <h1 style="padding-top: 50px">使用clearfix </h1>
  <div class="clearfix">
    <img class="float" src="imgs/icon_mess_sellorder.png">
    <p>内容内容内容内容内容内容内容</p>
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

5.3 补充

CSS 布局 - 浮动实例

5.3.1 box-sizing: border-box;(添加边距后会破坏排版的解决方法)

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

（1）未使用

<!DOCTYPE html>
<html>
<head>
<style>


.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h1>网格框</h1>

<p>并排浮动的框：</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>框中的一些文本。</p>
  </div>
</div>

</body>
</html>

运行效果：
在这里插入图片描述
（2）使用后：

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

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h1>网格框</h1>

<p>并排浮动的框：</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>框中的一些文本。</p>
  </div>
</div>

<p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p>

</body>
</html>

运行效果：
在这里插入图片描述

5.3.2 水平多个框的时候，保证高度一致（高度为最高的那个框）

  • display: flex;将对象作为弹性伸缩盒显示
    （1）未使用：
<!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>
  <link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>
  * {
    /* padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里 */
    box-sizing: border-box;
  }

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

  /* div.flex {
    display: flex;
  } */

  div.ex1 {
    float: left;
    width: 33%;
    background-color: aquamarine;
    padding: 50px;
  }

  div.ex2 {
    float: left;
    width: 33%;
    background-color: bisque;
    padding: 50px;
  }

  div.ex3 {
    float: left;
    width: 33%;
    background-color: cadetblue;
    padding: 50px;
  }

  /* p{
    text-align: center;
  } */
</style>

<body>
  <!-- <div class="flex"> -->
    <div class="ex1">
      <p>文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1</p>
    </div>
    <div class="ex2">
      <p>文本内容2</p>
    </div>
    <div class="ex3">
      <p>文本内容3</p>
    </div>
  <!-- </div> -->
</body>

</html>

运行效果：
在这里插入图片描述

（2）使用后：

<!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>
  <link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>
  * {
    /* padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里 */
    box-sizing: border-box;
  }

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

  div.flex {
    display: flex;
  }

  div.ex1 {
    float: left;
    width: 33%;
    background-color: aquamarine;
    padding: 50px;
  }

  div.ex2 {
    float: left;
    width: 33%;
    background-color: bisque;
    padding: 50px;
  }

  div.ex3 {
    float: left;
    width: 33%;
    background-color: cadetblue;
    padding: 50px;
  }

  /* p{
    text-align: center;
  } */
</style>

<body>
  <div class="flex">
    <div class="ex1">
      <p>文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1</p>
    </div>
    <div class="ex2">
      <p>文本内容2</p>
    </div>
    <div class="ex3">
      <p>文本内容3</p>
    </div>
  </div>
</body>

</html>

运行效果：
在这里插入图片描述

5.3.3 导航栏 练习

<!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>
  <link rel="stylesheet" href="css/baseStyle.css">

  <style>
    ul {
      width: 100%;
      background-color: black;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    li  a{
      float: left;
      padding: 10px 15px;
      font-size: 15px;
      color: white;
      display: inline-block;
    }

    a.choose {
      background-color: brown;
    }


    a {
      color: white;
      /* 取消下划线 */
      text-decoration: none;
      /* 文字居中 */
      text-align: center;
    }

    /* 鼠标放置效果 */
    a:hover {
      background-color: aquamarine;
    }
  </style>
</head>

<body>



  <ul>
    <li ><a  class="choose" href="html_jump_page.html">首页</a></li>
    <li ><a class="unchoose" href="html_jump_page.html">控制台</a></li>
    <li ><a class="unchoose" href="html_jump_page.html">个人中心</a></li>
  </ul>
</body>

</html>

运行效果：
在这里插入图片描述

5.3.4 简单布局练习

在这里插入图片描述

<!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>简单布局</title>
  <!-- 引用外部css样式 -->
  <!-- <link rel="stylesheet" href="css/baseStyle.css"> -->

  <style>
    /* padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里 */
    * {
      box-sizing: border-box;
    }

    /* 防止溢出 */
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }

    div.header {
      background-color: grey;
      padding: 20px 10px;
      margin: 10px;
    }



    h1.header {
      color: white;
      font-size: 20px;
    }

    div.footer {
      background-color: grey;
      padding: 20px 10px;
    }

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

    li {
      background-color: #33b5e5;
      color: white;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

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

    .menu {
      width: 25%;
    }

    .content {
      width: 75%;
    }
  </style>
</head>

<body>

  <!-- 顶部标题 -->
  <div class="header">
    <h1 class="header">Shang Hai</h1>
  </div>
  <!-- 中间 -->
  <div class="clearfix">

    <div class="column menu">
      <!-- 左侧导航栏 -->
      <ul>
        <li>The Fight</li>
        <li>The City</li>
        <li>The IsIand</li>
        <li>The Food</li>
      </ul>
    </div>
    <!-- 右侧内容 -->
    <div class="column content">
      <h1>The City</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 web layout and responsive web pages in a later chapter.</p>
    </div>

  </div>
   <!-- Footer -->
   <div class="header">
    <h1 class="header">Footer Text</h1>
  </div>

</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/622749.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

R语言数据分析案例-巴西固体燃料排放量预测与分析

R语言数据分析案例-巴西固体燃料排放量预测与分析

1 背景 自18世纪中叶以来&#xff0c;由于快速城市化、人口增长和技术发展&#xff0c;导致一氧化二氮&#xff08;N2O&#xff09;、 甲烷&#xff08;CH4&#xff09;和二氧化碳&#xff08;CO 2&#xff09;等温室气体浓度急剧上升&#xff0c;引发了全球变暖、海平面上 升…
阅读更多...
计算机毕业设计hadoop+spark+hive知识图谱bilibili视频数据分析可视化大屏 视频推荐系统 预测系统 实时计算 离线计算 数据仓库

计算机毕业设计hadoop+spark+hive知识图谱bilibili视频数据分析可视化大屏 视频推荐系统 预测系统 实时计算 离线计算 数据仓库

研究意义 随着互联网的快速发展&#xff0c;人们面临着海量的视频内容&#xff0c;如何从这些繁杂的视频中找到自己感兴趣的内容成为一个重要的问题[1]。推荐系统作为一种解决信息过载问题的重要工具&#xff0c;能够根据用户的历史行为和偏好&#xff0c;预测用户可能感兴趣的…
阅读更多...
基于FPGA的数字信号处理（12）--定点数的舍入模式（3）收敛取整convergent

基于FPGA的数字信号处理（12）--定点数的舍入模式（3）收敛取整convergent

前言 在之前的文章介绍了定点数为什么需要舍入和几种常见的舍入模式。今天我们再来看看另外一种舍入模式&#xff1a;收敛取整convergent。 10进制数的convergent convergent&#xff1a; 收敛取整。它的舍入方式和四舍五入非常类似&#xff0c;都是舍入到最近的整数&#x…
阅读更多...
通过金山和微软虚拟打印机转换PDF文件，流程方法及优劣对比

通过金山和微软虚拟打印机转换PDF文件，流程方法及优劣对比

文章目录 一、WPS/金山 PDF虚拟打印机1、常规流程2、PDF文件位置3、严重缺陷二、微软虚拟打印机Microsoft Print to Pdf1、安装流程2、微软虚拟打印机的优势一、WPS/金山 PDF虚拟打印机 1、常规流程 安装过WPS办公组件或金山PDF独立版的电脑，会有一个或两个WPS/金山 PDF虚拟…
阅读更多...
leetcode-151 翻转字符串里的单词

leetcode-151 翻转字符串里的单词

一、题目描述 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 输入&#xff1a;s "the sky is blue" 输出&#xff1a;"blue is sky the"输入&#…
阅读更多...
数据结构-查找-哈希表

数据结构-查找-哈希表

一、哈希表的映射方法 1、直接定址法&#xff08;值的分布范围集中&#xff09; 比如统计字符串中字符出现的次数&#xff0c;字符范围集中。 2、除留余数法&#xff08;值的分布范围分散) hashi key % n 但是这种方法会导致&#xff0c;哈希冲突&#xff1a;不同的值映射…
阅读更多...
【Python探索之旅】初识Python

【Python探索之旅】初识Python

目录 发展史&#xff1a; 环境安装&#xff1a; 入门案例&#xff1a; 变量类型 标准数据类型 数字类型&#xff1a; 字符串&#xff1a; 全篇总结&#xff1a; 前言&#xff1a; Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设…
阅读更多...
CSS 之 圆形波浪进度条效果

CSS 之 圆形波浪进度条效果

一、简介 ​ 本篇博客讲述了如何实现一个圆形波浪进度条的样式效果&#xff0c;具体效果参考下方GIF图。该样式的加载进度条可以用在页面跳转或数据处理等情况下的加载动画&#xff0c;比起普通的横条进度条来说&#xff0c;样式效果更生动美观。 实现思路&#xff1a; ​ 这…
阅读更多...
Wikimedia To Opensearch

Wikimedia To Opensearch

概览 Wikimedia ⇒ Kafka ⇒ OpensearchJava Library&#xff1a;OKhttp3和OkHttp EventSource&#xff1b;生产者&#xff1a;Wikimedia&#xff1a;WikimediaChangeHandler和WikimediaChangeProducer&#xff1b;消费者&#xff1a;Opensearch&#xff1a;OpenSearchConsume…
阅读更多...
代码随想录-算法训练营day38【动态规划01：理论基础、斐波那契数、爬楼梯、使用最小花费爬楼梯】

代码随想录-算法训练营day38【动态规划01：理论基础、斐波那契数、爬楼梯、使用最小花费爬楼梯】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第九章 动态规划part01● 理论基础 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯 详细布置 今天正式开始动态规划&#xff01;理论基础 无论大家之前对动态规划学到什么程度&#xff0c;一定要先看…
阅读更多...
【Linux】了解信号产生的五种方式

【Linux】了解信号产生的五种方式

文章目录 正文前的知识准备kill 命令查看信号man手册查看信号信号的处理方法 认识信号产生的5种方式1. 工具2. 键盘3. 系统调用kill 向任意进程发送任意信号raise 给调用方发送任意信号abort 给调用方发送SIGABRT信号 4. 软件条件5. 异常 正文前的知识准备 kill 命令查看信号 …
阅读更多...
项目8-头像的上传

项目8-头像的上传

js实现头像上传并且预览图片功能以及提交 - 掘金 (juejin.cn) 我们简单建立一个表 1.前端知识储备 1.1 addClass的使用 1.基本语法 addClass() 方法向被选元素添加一个或多个类。 该方法不会移除已存在的 class 属性&#xff0c;仅仅添加一个或多个 class 属性。 提示&…
阅读更多...
CentOS使用Docker搭建Nacos结合内网穿透实现无公网IP远程登录本地管理平台

CentOS使用Docker搭建Nacos结合内网穿透实现无公网IP远程登录本地管理平台

文章目录 1. Docker 运行Nacos2. 本地访问Nacos3. Linux安装Cpolar4. 配置Nacos UI界面公网地址5. 远程访问 Nacos UI界面6. 固定Nacos UI界面公网地址7. 固定地址访问Nacos Nacos是阿里开放的一款中间件,也是一款服务注册中心&#xff0c;它主要提供三种功能&#xff1a;持久化…
阅读更多...
LeetCode题练习与总结：不同的二叉搜索树Ⅱ--95

LeetCode题练习与总结：不同的二叉搜索树Ⅱ--95

一、题目描述 给你一个整数 n &#xff0c;请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 。可以按 任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,null,2,null,3],[1,null,3,2],[2,1,3],[3,1,null,nul…
阅读更多...
CNN/TCN/LSTM/BiGRU-Attention到底哪个模型效果最好？注意力机制全家桶来啦！

CNN/TCN/LSTM/BiGRU-Attention到底哪个模型效果最好？注意力机制全家桶来啦！

​ 声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 数据介绍 效果展示 原理简介 代…
阅读更多...
Python---NumPy万字总结【此篇文章内容难度较大，线性代数模块】（3）

Python---NumPy万字总结【此篇文章内容难度较大，线性代数模块】（3）

NumPy的应用&#xff08;3&#xff09; 向量 向量&#xff08;vector&#xff09;也叫矢量&#xff0c;是一个同时具有大小和方向&#xff0c;且满足平行四边形法则的几何对象。与向量相对的概念叫标量或数量&#xff0c;标量只有大小&#xff0c;绝大多数情况下没有方向。我们…
阅读更多...
Ubuntu 超级终端Terminator常用使用技巧

Ubuntu 超级终端Terminator常用使用技巧

Ubuntu 超级终端Terminator常用使用技巧 Terminator 是一款功能强大的终端模拟器&#xff0c;它特别适合于需要同时管理多个终端会话的用户。以下是如何在 Ubuntu 上使用 Terminator 的详细指南&#xff1a; 安装 Terminator 如果你的系统尚未安装 Terminator&#xff0c;你…
阅读更多...
Prompt Engineering ,Fine-tuning , RAG ？

Prompt Engineering ,Fine-tuning , RAG ？

Prompt Engineering ,Fine-tuning , RAG 总结&#xff1a;1 prompt engineering2 RAG (Retrieval Augmented Generation)**RAG特点****RAG优势****RAG劣势** 3 微调&#xff08;Fine-tuning&#xff09;**微调特点****微调优势****微调劣势** 4 三者共性和区别5 RAG和微调的适应…
阅读更多...
港中深「户外自重构蜗牛机器人集群」登Nature子刊！

港中深「户外自重构蜗牛机器人集群」登Nature子刊！

在科幻电影《超能陆战队》中&#xff0c;我们见证了一种由成千上万个微小磁性单元组成的机器人通过磁力相互连接&#xff0c;形成各种复杂的三维结构。香港中文大学&#xff08;深圳&#xff09;林天麟教授团队致力于将这一科幻转化为现实&#xff0c;近年来开发了一系列自由形…
阅读更多...
C++基础与深度解析 | 数组 | vector | string

C++基础与深度解析 | 数组 | vector | string

文章目录 一、数组1.一维数组2.多维数组 二、vector三、string 一、数组 1.一维数组 在C中&#xff0c;数组用于存储具有相同类型和特定大小的元素集合。数组在内存中是连续存储的&#xff0c;并且支持通过索引快速访问元素。 数组的声明&#xff1a; 数组的声明指定了元素的…
阅读更多...
最新文章

Copyright @ 2022~2023