freeCodeCamp刷题总结（二）

最新推荐文章于 2022-11-10 20:34:47 发布

菜鸟M

最新推荐文章于 2022-11-10 20:34:47 发布

阅读量424

点赞数

分类专栏： freeCodeCamp刷题文章标签： css html5 css3

本文链接：https://blog.csdn.net/weixin_43592907/article/details/106571852

版权

freeCodeCamp刷题专栏收录该内容

8 篇文章 3 订阅

订阅专栏

块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。
可以通过display：block将内联元素设置为块级元素
通过display：inline将块级元素设置为内联元素

一：应用视觉设计
1、CSS 里面的text-align属性可以控制文本的对齐方式。
text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
text-align: center;可以让文本居中对齐。
text-align: right;可以让文本右对齐。
text-align: left;是text-align的默认值，它可以让文本左对齐。

2、加粗标签:
添加了strong标签后，浏览器会自动给元素应用font-weight:bold;。

3、下划线标签:
添加了u标签后，浏览器会自动给元素应用text-decoration: underline;。

4、强调标签：
em标签来强调文本。由于浏览器会自动给元素应用font-style: italic;，所以文本会显示为斜体。

5、删除线标签：<s></s>
s标签来给文字添加删除线，它代表着这段文字不再有效,浏览器会自动给元素应用text-decoration: line-through;。

6、水平线标签：<hr>
hr标签来创建一条宽度撑满父元素的水平线，在 HTML 里，hr是自关闭标签，所以不需要一个单独的关闭标签。

7、透明度：alpha，opacity,background-color: transparent;

推荐使用opacity：X；

1）alpha 值，其中 0 代表完全透明，1 代表完全不透明。rgba()可以设置颜色的透明度：

background-color: rgba(45, 45, 45, 0.1)

2）opacity属性用来设置元素的透明度opacity:0.7; （1：完全不透明。0：完全透明）
3）background-color: transparent; 背景为透明的

8、css给元素添加阴影：box-shadow

box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。
其中blur-raduis和spread-raduis是可选的。

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

9、css改变英文的大小写：text-transform
text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示；
不同值对英文的影响：
在这里插入图片描述

10、字体大小：font-size：，字体粗细：font-weight：

11、设置行间的距离：line-height
line-height属性来设置行间的距离。用来设置每行文字所占据的垂直空间。

12、调整锚点(a)的悬停状态：（伪类:hover）

1）伪类：伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。
超链接可以使用:hover伪类选择器定义它的悬停状态样式。
在这里插入图片描述

链接显示为黑色，当鼠标悬停在链接上时，链接变为红色；

13、相对定位：position：relative
1）块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

2）把元素的 position 设置成 relative， 不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。并且你可以通过偏移量（left、right、top和bottom）来控制元素： 控制的是往相反的方向偏移

向上偏移15px;
在这里插入图片描述
14、绝对定位：position:absolute
1） absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。

2）比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。

15、特殊的绝对定位：position：fixed
1）(固定定位的参照物是浏览器的窗口)
fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动。

2）fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。

16、重叠元素：z-index：
z-index的取值是整数，数值大的元素优先于数值小的元素显示

17、将块级元素水平居中：margin：auto

1）把一个块级元素水平居中显示。实现方式是：把块级元素的margin：auto；
方法也对图片奏效；图片默认是内联元素，但是可以设置其display：block来把它变成块级元素。

18、渐变色：repeating-linear-gradient()，linear-gradient()
repeating-linear-gradient()重复指定的渐变

19、更改元素大小，翻转：transform:scale( );
1）transform:scale()，可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍：
可以和伪类：hover进行

p {transform:scale(2);}

2）transform：skewX（-32deg），skewX使选择的元素沿着 X 轴（横向）翻转指定的角度。
transform:skewY(-10deg)，沿着Y轴翻转；

#bottom{transform:skewX(-32deg);}

3）transform：rotate()（rotate()用法和skewX以及skewY类似）。

20、CSS的关键帧和动画@keyframes和 animation

@keyframes能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。
animation属性控制动画的外观：
animation-name设置动画的名称，也就是要绑定的选择器的@keyframes的名称。
animation-duration设置动画所花费的时间

<style>
#rect {
    animation-name:rainbow;//动画的名称；
    animation-duration:4s;//动画播放完成的时间；
  }
  //动画0-100%之内可以随意设置；
  @keyframes rainbow{
    0%{ 	//动画开始时为蓝色
      background-color:blue;
    }
    50%{	//动画中间为绿色
      background-color:green;
    }
    100%{	//动画最后位黄色
      background-color:yellow;
    }
  }
</style>
<div id="rect"></div>	//动画播放完后会消失