CSS必知必会

轻轻地我来了
290 阅读8分钟

1.dispaly属性

块级元素（从新行开始，占据可用的全部宽度）
属于块级元素的元素有：div、h1、p、form、header、footer、section 行内元素(内联元素不从新行开始，仅仅占用所需的宽度)
属于行内元素的有：span、a、img等
display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们，dispaly：inline可以将块级元素转化为行内元素，dispaly：block可以将行内元素转化为块级元素
visibility:hidden; 也可以隐藏元素。 但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

2.width与max-width

设置块级元素width将防止其延伸到其容器的边缘，然后，可以将外边距设置为auto，用于将元素在其容器中水平居中，max-width可以改善浏览器对小窗口的处理

3.position属性

position属性包含5个值 static、relative、fixed、absolute、sticky
position:static的元素不会以任何特殊方式定位，它始终根据页面的正常流进行定位 position:relative的元素相对于其正常位置进行定位，不会对其余内容进行调整来使用元素留下的任何空间
position:fixed的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置，top、right、bottom、left属性用来定位此元素
position:absolute的元素相对于最近的祖先元素进行定位（而不是相对于视图），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随着页面滚动一起移动
'被定位的元素'是指除了static以外的任何元素
position:sticky的元素根据用户的滚动位置进行定位
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）

4.溢出

overflow属性指定元素的内容太大而无法放入指定区域时是剪裁还是添加滚动条
overflow属性可以设置以下值：
visible-默认 溢出没有被剪裁，内容在元素框外渲染
hidden-溢出北剪裁，其余内容不可见
scroll-溢出被剪裁，同时添加滚动条以查看其余内容
auto-与scroll类似，单仅在必要时添加滚动条
overflow属性仅适用于具有指定高度的块元素

5.浮动与清除

float属性规定元素如何浮动
clear属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动
float属性可以设置下列值之一
left-元素浮动到其容器的左侧
right-元素浮动在其容器的右侧
none-元素不会浮动
inherit-元素继承其父级的float的值
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围 clear和clearfix

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

5.组合器

CSS中有四种不同的组合器：
后代选择器（空格）
子选择器（>）
相邻兄弟选择器(+)
通用兄弟选择器（~）
后代选择器： 后代选择器匹配属于指定元素后代的所有元素

div p {
  background-color: yellow;
}

子选择器：
子选择器匹配属于指定元素子元素的所有元素

div > p {
  background-color: yellow;
}

相邻兄弟选择器：
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

div + p {
  background-color: yellow;
}

通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素

6.伪类

锚伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

css伪类

:first-child 选择器匹配作为任何元素的第一个子元素的任何<p>元素：

p:first-child {
  color: blue;
}

选择器匹配所有<p>元素中的第一个 <i> 元素：

p i:first-child {
  color: blue;
}

匹配所有首个<p>元素中的所有<i>元素

p:first-child i {
  color: blue;
}

伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。
为所有 <p> 元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。
设置所有 <p> 元素中文本的首字母格式：

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

伪元素和css类

伪元素可以和css类结合使用

h1::before {
  content: url(smiley.gif);
}

h1::after {
  content: url(smiley.gif);
}

::selection 伪元素匹配用户选择的元素部分。

::selection {
  color: red; 
  background: yellow;
}

7.不透明度

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：

8.圆角

通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。

9.渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

#grad {
  background-image: linear-gradient(red, yellow);
}

10.2D转化

translate()：从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）
rotate():方法根据给定的角度顺时针或逆时针旋转元素。
scaleX():方法增加或减少元素的大小（根据给定的宽度）
scaleY() :方法增加或减少元素的大小（根据给定的高度） scale():方法增加或减少元素的大小（根据给定的宽度和高度参数） skewX():方法使元素沿 X 轴倾斜给定角度
skewY():方法使元素沿 Y 轴倾斜给定角度。
skew():方法使元素沿 X 和 Y 轴倾斜给定角度。
matrix():方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

11.css过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。

  div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
  }
  div:hover {
  width: 300px;
  height: 300px;
  }

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
  width: 300px;
}

transition-delay 属性规定过渡效果的延迟（以秒计）。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-delay 属性规定动画开始的延迟时间。 animation-iteration-count 属性指定动画应运行的次数。 反向或交替运行动画 animation-direction 属性指定是向前播放、向后播放还是交替播放动画。 animation-direction 属性可接受以下值： normal - 动画正常播放（向前）。默认值 reverse - 动画以反方向播放（向后） alternate - 动画先向前播放，然后向后 alternate-reverse - 动画先向后播放，然后向前 指定动画的速度曲线 animation-timing-function 属性规定动画的速度曲线。 animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） linear - 规定从开始到结束的速度相同的动画 ease-in - 规定慢速开始的动画 ease-out - 规定慢速结束的动画 ease-in-out - 指定开始和结束较慢的动画 cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

image.png

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。 forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

avatar
文章
阅读
粉丝