css学习 st7

1. 块元素（Block）：

   • 特点：默认情况下，块元素会在新行上显示，占据其父容器的整个宽度。它们会独占一行并能够设置宽度、高度、边距和填充。
   • 示例：<div>, <p>, <h1>-<h6>, <section>, <article> 等。
   • 切换方式：使用 CSS 属性 display: block; 或者 <div> 元素默认为块级。

2. 内联元素（Inline）：

   • 特点：内联元素不会在新行上开始，而是在同一行内显示。它们的宽度和高度受到其内容的限制，无法设置宽度、高度、边距和填充。
   • 示例：<span>, <a>, <strong>, <em>, <label> 等。
   • 切换方式：使用 CSS 属性 display: inline; 或者 <span> 元素默认为内联级。

3. 内联块元素（Inline-Block）：

   • 特点：内联块元素结合了块元素和内联元素的特性。它们在同一行内显示，但可以设置宽度、高度、边距和填充。
   • 示例：<img>, <input>, <button> 等。
   • 切换方式：使用 CSS 属性 display: inline-block;

4. 快状元素（Flex）：

   • 特点：Flexbox（弹性布局）是一种灵活的布局方式，可以更好地控制和对齐元素。通过使用父容器上的 display: flex; 属性，子元素变为弹性项目，并能够通过各种属性来调整其排列方式。
   • 示例：可以应用 Flex 布局的任何元素。
   • 切换方式：使用 CSS 属性 display: flex;

1. 盒子的水平居中和垂直居中：

   • 使用 Flexbox（弹性布局）：将父容器设置为 display: flex;，并使用以下属性：

     .container {
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center; /* 垂直居中 */
     }
     

   • 使用绝对定位和转换：将盒子设置为 position: absolute;，父容器设置为 position: relative;，并使用以下属性：

     .container {
       position: relative;
     }
     
     .box {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
     

2. 文字的水平居中和垂直居中：

   • 对于内联元素（如 <span>），可以使用以下属性：

     .text {
       text-align: center; /* 水平居中 */
       line-height: /* 盒子的高度 */; /* 垂直居中 */
     }
     

   • 对于块元素（如 <div>），可以使用以下属性：

   • .text {
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center; /* 垂直居中 */
     }

1. 使用 clear 属性：

   • 在浮动元素的后面添加一个空的标签，并为该标签添加 clear: both; 属性。
   • 示例：

     <div style="clear: both;"></div>
     

2. 使用 clearfix 类：

   • 在 CSS 中创建一个 .clearfix 类，并为其添加以下样式：

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

   • 在需要清除浮动的父容器上添加 clearfix 类。
   • 示例：

     <style>
       .clearfix::after {
         content: "";
         display: table;
         clear: both;
       }
     </style>
     
     <div class="clearfix">
       <!-- 浮动元素 -->
       <div style="float: left;"></div>
       <div style="float: right;"></div>
     </div>
     

3. 使用父容器的 overflow 属性：

   • 在父容器上设置 overflow: auto; 或 overflow: hidden; 属性。
   • 示例：

     <div style="overflow: auto;">
       <!-- 浮动元素 -->
       <div style="float: left;"></div>
       <div style="float: right;"></div>
     </div>

1. :active 选择器：选择活动（被点击）的元素。

   a:active {
     color: red;
   }
   

2. :first-child 选择器：选择父元素下的第一个子元素。

   li:first-child {
     font-weight: bold;
   }
   

3. :focus 选择器：选择当前获得焦点的元素。

   input:focus {
     border-color: blue;
   }
   

4. :last-child 选择器：选择父元素下的最后一个子元素。

   p:last-child {
     margin-bottom: 0;
   }

1. ::before 伪元素选择器：在元素内容之前插入内容。

   .parent::before {
     content: "";
     display: block;
     height: 100px;
     background-color: red;
   }
   

2. ::after 伪元素选择器：在元素内容之后插入内容。

   .parent::after {
     content: "";
     display: block;
     height: 100px;
     background-color: blue;
   }
   

使用这些伪元素选择器可以在父盒子中插入额外的内容，并为其应用样式。通过设置 display: block; 和一些其他属性，您可以使伪元素具有确定的高度、宽度和背景颜色等。

要实现父盒子的大小可以自己来定，而不受子元素撑开的影响，可以使用以下方法：

1. 使用绝对定位：

   • 设置父盒子的 position 属性为 relative。
   • 将子元素的 position 属性设置为 absolute。
   • 通过调整子元素的 top、bottom、left、right 属性，将其相对于父盒子进行定位。
   • 示例：

     .parent {
       position: relative;
     }
     
     .child {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
     }
     

2. 使用浮动：

   • 将父盒子的 overflow 属性设置为 hidden，以防止子元素溢出。
   • 将子元素设置为浮动。
   • 示例：

     .parent {
       overflow: hidden;
     }
     
     .child {
       float: left;
     }

练习