CSS复习2

1. 各种显示模式的特点和使用以及他们的切换

a. 块级元素：一个块级元素会从新行开始，并且尽可能撑满容器。如<div>、<h1>、<p>等。块级元素常用于构建页面的基本结构。

b. 行内元素：行内元素在一行内显示，并且只占据它需要的宽度。如<span>、<a>、<img>等。行内元素常用于添加文本样式或超链接等。

c. 行内块元素：行内块元素是将元素呈现为内联元素的同时，具备块级元素的特点，它可以设置宽高、内边距、外边距等属性。如<input>、<button>等。行内块元素常用于创建按钮、表单元素等。

可以通过CSS属性display来切换各种显示模式：

.block {
  display: block; /* 显示为块级元素 */
}

.inline {
  display: inline; /* 显示为行内元素 */
}

.inline-block {
  display: inline-block; /* 显示为行内块元素 */
}

1. 如何实现一个盒子的水平居中和垂直居中，还有文字的水平居中和垂直居中呢？

a. 盒子水平居中：使用margin: 0 auto;将盒子的左右边距设置为auto，即可实现水平居中。

.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  margin: 0 auto; /* 水平居中 */
}

 b. 盒子垂直居中：使用display: flex;和align-items: center;将容器设置为弹性布局，并将子元素垂直对齐到容器中央。

.container {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
}

c. 文字水平居中：使用text-align: center;将文本水平居中。

.text {
  text-align: center; /* 水平居中 */
}

d. 文字垂直居中：使用line-height将行高设置为盒子高度相等，即可实现垂直居中。

.text {
  height: 200px; /* 盒子高度 */
  line-height: 200px; /* 行高等于盒子高度 */
}

1. 如何清除浮动？

浮动元素会脱离文档流，可能会导致父元素高度塌陷。为了避免这种情况，可以使用清除浮动的方法。

最常用的清除浮动的方法是在浮动元素后面添加一个空元素，然后使用clear: both;来清除浮动。

<div class="parent">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div class="clear"></div> <!-- 清除浮动 -->
</div>

 

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clear {
  clear: both;
}

1. 伪类选择器如何使用，包括:active,:first-child,:focus,:last-child

伪类选择器用于向某些选择器添加特殊的样式效果，比如当鼠标悬停时、元素处于活动状态时、元素是父元素的第一个或最后一个子元素时等。

以下是一些伪类选择器的使用方式：

a. :hover：当鼠标悬停在元素上时应用样式。

a:hover {
  color: red;
}

b. :active：当元素处于活动状态（例如被点击）时应用样式。

button:active {
  background-color: #f1f1f1;
}

c. :focus：当元素获得焦点时应用样式，通常用于表单元素。

input:focus {
  border-color: blue;
}

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

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

e. :last-child：选择父元素的最后一个子元素

ul li:last-child {
  margin-right: 0;
}

5.伪元素选择器如何使用,包括::before,::after,思考使用这个如何使得父盒子的大小可以自己来定，而不是由子元素将其撑开。

伪元素选择器用于向某些选择器的内容前或后添加额外的内容，比如添加引号、图标等。常用的伪元素选择器包括::before和::after。

以下是一些伪元素选择器的使用方式：

a. ::before：在元素内容的前面添加内容。

h1::before {
  content: "标题：";
}

b. ::after：在元素内容的后面添加内容

button::after {
  content: "→";
}

使用伪元素选择器可以实现让父盒子的大小自己来定，而不是被子元素撑开的效果。可以在父盒子上应用display: table;，然后在子元素上应用display: table-cell;以实现自适应高度的效果。

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  display: table;
  width: 100%;
}

.child {
  display: table-cell;
  height: 100px;
}

在这个例子中，.parent 元素被设置为display: table;，这样它会自适应子元素高度。然后，.child 元素被设置为display: table-cell;，以便它们可以共享父元素的高度。