前端css知识积累

前端css知识积累：

1，什么是盒子模型？它包含哪些元素？
是css中表示HTML元素的基本结构和布局的概念。
包含：内容，内边距，边框，外边距。
盒子模型分为：
标椎模型（W3C）-可以通过width，height来控制元素大小。
怪异模型（IE）-无外边距，实际大小受浏览器限制。

2，如何居中一个块级元素？
1，通过margin设置左右为auto，可使元素水平居中。
2，text-align可使文字区域水平居中。
3，flex布局中justify-content、align-items都设为center。
4，grid布局中justify-items、align=items都设为center。
5，绝对定位，position：absolute。设置top:50%、left:50%。

3，什么是BFC？如何创建BFC？
“块级格式上下文”，是web页面css的渲染格式，用于处理块级元素的布局和元素之间的关系。
创建FBC方式有：display：inline-block、float：left/rigtht、position:absolute/flex、
overflow:hidden/auto/scroll、display:flex、display:grid.
可以保证在不同的BFC中，元素的定位和浮动不相互影响。

4，CSS中的选择器有哪些？它们的优先级是怎样的？
有：
元素选择器（p、div）、类选择器（.class）、ID选择器（#my-id）、属性选择器（name=“name”）、伪类选择器（：hover、：active、：focus）、伪元素选择器（：：before、：：after）
优先级：
！important声明规则>内联样式（style属性）>ID>类>属性选择器、伪类、元素选择器、通配符。

5，什么是伪类和伪元素？举例说明。
伪类和伪元素都是CSS中的特殊选择器，用于向某些元素添加特定的样式。

伪类可以在特定的状态下选中元素，例如鼠标悬停时、被点击时等。常见的伪类包括:hover，:active，:focus等
伪元素则是在元素的某个部分上应用样式，例如在元素前面或后面添加一些内容。常见的伪元素包括::before和::after，

6，如何实现响应式布局？
需要使用css媒体查询（Media Queries）。媒体查询是一个用于指定特定设备或屏幕尺寸的条件语句。

@media screen and (max-width: 600px) {
  p {
    color: red;
  }
}

在上述代码中，@media表示开始一个媒体查询，screen表示适用于屏幕设备，(max-width: 600px)表示查询条件，即当屏幕宽度不大于600像素时，p元素的文字颜色将变为红色。
通过使用媒体查询，我们可以改变各种样式和元素属性来适应不同的屏幕大小和设备类型。例如，我们可以使用媒体查询来隐藏某些元素、更改字体大小、调整布局等等。

7,如何使用CSS实现动画效果？
CSS提供了多种方法来实现动画效果，其中包括过渡（Transitions）、关键帧动画（Keyframe Animations）和动画属性（Animation Properties）等。下面我会分别介绍一下这三种方法。

过渡（Transitions）
过渡是一种可以在不同状态之间平滑过渡的动画效果。可以通过CSS transition 属性来实现。例如，当鼠标悬停在链接上时，链接字体颜色从黑色变为红色，可以使用以下代码：

a {
  color: black;
  transition: color 0.5s ease-in-out;
}
a:hover {
  color: red;
}

在这个例子中，transition 属性将元素 color 属性的变化设置为需要经过 0.5 秒的时间，并且使用了一个缓动函数，使得过渡更加平滑。

关键帧动画（Keyframe Animations）
关键帧动画是通过定义一组关键帧来控制元素的动画效果，它允许我们精确地控制每一帧的样式和持续时间。可以使用 @keyframes 规则来定义关键帧，然后使用 animation 属性来将其应用于元素。例如，下面的代码实现了一个简单的旋转动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

img {
  animation: spin 2s linear infinite;
}

在这个例子中，我们定义了一个名为 spin 的动画，它包含两个关键帧，分别指定起始状态和结束状态。然后将该动画应用到 img 元素上，并设置为线性运动方式，无限循环。

动画属性（Animation Properties）
除了关键帧动画外，还可以使用 animation 属性直接定义动画效果，而无需使用 @keyframes 规则来定义关键帧。下面是一个例子：

div {
  animation-name: slidein;
  animation-duration: 3s;
  animation-fill-mode: both;
}

@keyframes slidein {
  from {
    margin-left: -100%;
    width: 100%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

在这个例子中，我们使用 animation-name 属性指定动画名称，animation-duration 属性指定动画持续时间，animation-fill-mode 属性指定在动画执行前或执行后，将如何填充元素样式。同时，我们也定义了一个名为 slidein 的动画，并在其中定义了两个关键帧。

8,怎样在CSS中使用flexbox布局？
使用 Flexbox 布局可以让我们更轻松地控制元素的排列方式和间距。下面是一些在 CSS 中使用 Flexbox 布局的方法：

将容器设置为 Flexbox 布局：
css
.container {
display: flex;
}
设置容器中每个子元素的排列方式：
css
.container {
display: flex;
flex-direction: row; /* 水平排列 /
flex-wrap: wrap; / 自动换行 /
justify-content: center; / 居中对齐 /
align-items: center; / 垂直居中对齐 /
}
确定每个子元素的大小和顺序：
css
.item {
flex: 1; / 占据同等宽度 /
order: 1; / 优先级，数值越小越靠前 */
}
这只是一些基本的用法，Flexbox 还有很多功能和属性，需要根据具体情况选择使用。

9,如何使用CSS创建一个固定在底部的导航栏？
要在底部创建一个固定的导航栏，可以使用以下 CSS 代码：

.navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ccc; /* 可选 */
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.navbar li {
  flex-grow: 1;
}

.navbar a {
  display: block;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

这段代码将 .navbar 定位为固定位置，并将其放置在页面底部（bottom: 0）。然后设置了导航栏的宽度为 100%，并设置了背景颜色和可选的上边框。

接下来，使用 Flexbox 布局使 nav 中的链接水平分布，其中每个链接都将占据容器的相同空间，使用 flex-grow: 1 将占用剩余的空间。最后设置了导航链接的样式。