TextTextTextAlignmentTextAlign网页内容主要是文字。CSS中的text-align属性可以控制文本的对齐方式。文本对齐：对齐；分隔文本，使每行的宽度相等。文本对齐：居中；可以使文本居中。文本对齐：右；可以将文本右对齐。文本对齐：左；是默认值，可以使文本左对齐加粗Bold使用strong标签加粗文本。粗体文本通常用于引起读者的注意或表示强调。使用font-weight来加粗文本。font-weight:bold;font-weight:XXpx;UnderlineUnderline使用u标签给文本加下划线。下划线常用于表示重要的内容或需要记住的内容。使用text-decoration:underline标签给文本加下划线。如果u标签带有下划线，您应该避免使用它，这可能会混淆文本和链接。超链接标签也有默认的下划线格式。文本修饰：下划线；Emphasis/ItalicItalic使用em标签来强调文本，使用i来斜体化文本。使用font-style:italic标签来强调文本。强调与斜体具有相同的效果，但具有不同的含义。前者强调标签中包含的文本，后者强调技术术语、标题或来自另一种语言的短语。font-style:italic;caseUpper/LowercaseCSS中的text-transform属性可以改变英文字母的大小写。使用该属性时，可以在不改变HTML元素中文本的情况下统一页面中英文的显示。下表是text-transform不同取值对文本“Transformme”的影响：valueresult小写“transformme”大写“TRANSFORMME”大写“TransformME”initialusedefaultvalueinherituseparentelement'stext-转换值。noneDefault：不更改文本。文本转换：大写；SubscriptSuper/Subscript使用sup和sub来表示下标，在表达公式时很有用。LineLineStrikethrough使用s标签给文本添加删除线。删除线是文本水平中心的一条线，表示文本块不再有效。使用text-decoration:line-through标签为文本添加删除线。text-decoration:line-through;Horizo??ntalLineHorizo??ntalLine使用hr标签创建一条水平线，其宽度填充父元素。此水平分隔线通常用于指示内容主题的变化，或将文档直观地分成几个部分。hr在HTML中是一个自闭合标签。
rowRownewlineWrap使用br标签进行换行。HTML中的br是一个自闭合标签。
LineHeightCSS提供line-height属性来设置行与行之间的距离。行高，顾名思义，可以用来设置每行文字所占的垂直空间。行高：25px；shadowShadowbox-shadow属性用于给元素添加阴影，属性值是一个或多个用逗号分隔的阴影列表。box-shadow属性的阴影由以下值依次描述：offset-x阴影的水平偏移量；offset-y阴影的垂直偏移；blur-radius模糊半径；spread-radius阴影扩展半径；color颜色，其中blur-radius和spread-radius是可选的。可以通过用逗号分隔每个box-shadow元素的属性来添加多个box-shadows。框阴影：010px20pxrgba（0,0,0,0.19），06px6pxrgba（0,0,0,0.23）；透明度TransparencyCSS中的不透明度属性用于设置元素的透明度。属性值为1表示完全不透明。属性值为0.5表示半透明。属性值为0表示完全透明。透明度应用于元素内的所有内容，无论是图像、文本还是背景颜色。不透明度：0.7；超链接锚可以使用a:hover伪类选择器来选择超链接的悬停状态。a:hover{color:blue;}PositionPositionRelative定位Relative在CSS中，所有的HTML元素都是盒子，也就是通常所说的盒子模型。块级元素自动换行开始（例如标题、段落和div），内联元素排列在前一个元素之后（例如图像和跨度）。在称为文档的正常流程中，元素默认以这种方式布局，CSS提供了position属性来覆盖它。当元素的定位设置为相对时，允许通过CSS指定元素在当前文档流页面下的相对偏移量。CSS中控制各个方向偏移的属性有左、右、上、下。它们表示在该方向上与原始位置的偏移量（以像素、百分比或em为单位）。p{位置：相对；bottom:10px;}将元素的位置设置为relative，不会改变元素在布局中的位置，也不会影响其他元素的位置。CSS中的top、bottom、left、right定义了元素在相应方向上的偏移距离。该元素将从其当前位置沿属性的相反方向偏移。绝对定位AbsoluteCSSposition属性值选项absolute，其含义是相对于其包含块定位。与相对定位不同，绝对定位会将元素从当前文档流中移除，周围的元素会忽略它。这样就可以利用CSS的top、bottom、left、right属性来调整元素的位置。绝对定位的特殊之处在于元素的定位是指最近定位的祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;），浏览器会一直搜索到默认的body标签。p{位置：绝对；bottom:10px;}Fixed固定定位Fixed固定定位，是一种特殊的absolute（绝对）定位，相对于浏览器窗口定位元素。与绝对位置类似，它与CSS偏移属性一起使用，并且还会从当前文档流中删除该元素。其他元素将忽略它的存在，因此可能需要在其他地方调整布局。但是fixed和absolute最明显的区别就是前者定位的元素不会随着屏幕滚动而移动。position:fixed;top:0;left:0;floatFloat由元素的float属性设置。浮动元素不在文档流中，它向左或向右浮动，直到其外边缘碰到包含框或另一个浮动框的边界。通常需要使用width属性来指定浮动元素所占用的水平空间。.card1{浮动：左；宽度：50%；}.card2{浮动：对；width:50%;}ElementsOverlappingOverlapping当某些元素在位置上重叠时（例如，使用position:absolute|relative|fixed|sticky），HTML中较晚出现的元素默认显示在较早出现的元素之上。可以使用z-index属性指定元素的堆叠顺序。z-index的值为整数，值较大的元素会堆叠在值较小的元素之上。z-指数：2；元素水平居中在应用程序设计中，通常需要将块级元素水平居中。一种常见的实现方式是将块级元素的margin值设置为auto（前提是要设置元素的宽度）。同样，此方法也适用于图像。图像默认是内联元素，但可以通过将其display属性设置为block将其转换为块级元素。宽度：100px；保证金：自动；渐变GradientHTML元素的背景颜色不限于单一颜色。CSS还为.通过后台的linear-gradient()可以实现线性渐变。背景：线性渐变（渐变方向，颜色1，颜色2，颜色3，...）；第一个参数指定颜色过渡的方向-它的值是角度，90deg表示垂直渐变（从左到右），45deg表示沿对角线渐变（从左下角到右上角）。其他参数指定渐变颜色的顺序：background:linear-gradient(90deg,red,yellow,rgb(204,204,255));repeating-linear-gradient()函数类似于linear-gradient()，主要区别是前者会重复指定的渐变。repeating-linear-gradient()参数较多，为了便于理解，这里只用到了角度值和色阶。角度是渐变的方向。色标表示渐变颜色和渐变发生的位置，用百分比或像素值表示。下面的代码可以帮助理解成对的开始和结束渐变颜色值是如何过渡的。0px[黄色--混合--蓝色]40px[绿色--混合--红色]80px如果每对开始和结束渐变颜色值的颜色相同，由于是两个相同颜色之间的过渡，然后中间的过渡色也是同色，后面是同色的过渡色和下一个起止色，最后的效果就是条纹。background属性支持使用url()函数作为属性值，这允许我们通过链接引入纹理或样式图像。图片链接地址要写在括号里，一般用引号括起来。背景：url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");元素大小ScaleCSS属性转换中的scale()函数可用于更改元素的显示比例。p{transform:scale(1.5);}transform属性有很多函数，可以调用这些函数来执行调整大小、移动、旋转和翻转元素等操作。当使用伪类选择元素的特定状态时（比如：hover），通过transform属性给元素添加交互是非常方便的。p:hover{transform:scale(1.1);}transformpropertyskewX():它沿X轴（水平）将所选元素倾斜指定的角度。变换：skewX（24deg）；skewY属性使指定的元素沿Y轴（垂直方向）翻转指定的角度。变换：偏斜（24度）；Animation&KeyframesAnimation&Keyframesanimation属性控制动画，@keyframes规则控制动画各个阶段的变化。总共有8个动画属性。animation-name用于设置动画的名称。animation-duration设置动画显示的持续时间。@keyframes可用于通过在特定时间点设置行为来创建动画。为此，只需为持续时间（从0%到100%）内的特定帧添加CSS规则。#rect{动画名称：彩虹；animation-duration:4s;}@keyframesrainbow{0%{background-color:blue;}50%{背景颜色：绿色；}100%{背景颜色：黄色；}}animation-fill-mode指定动画结束时元素的样式。动画填充模式：转发；animation-iteration-count，这个属性控制动画循环的次数。如果你想让动画一直运行下去，可以将值设置为infinite。动画迭代次数：3；animation-timing-function用于定义动画的速度曲线。速度曲线决定了动画从一组CSS样式变为另一组所需的时间。如果要描述的动画是汽车在指定时间内（animation-duration）从A行驶到B，那么animation-timing-function描述的是汽车在运动中加速和减速的过程。有一些预定义关键字可用于常用选项。例如，默认值为ease，动画开始时速度较慢，然后加速，最后变慢结束。其他常用的值还有ease-out：动画以高速开始，以低速结束；ease-in，动画低速开始，高速结束；线性：动画从开始到结束具有相同的速度。BezierCurve贝塞尔曲线在CSS动画中，cubic-bezier用于定义贝塞尔曲线。曲线的形状代表动画的速度。曲线在一个1*1的坐标系中，其中X轴代表动画的时间间隔（类似于时间刻度），Y轴代表动画的变化。cubic-bezier函数在1*1网格中包含4个点：p0、p1、p2、p3。其中p0和p3为固定值，分别代表曲线的起点和终点，坐标值依次为(0,0)和(1,1)。你只需要设置另外两个点的x和y值，它们决定了曲线的形状，从而决定了动画的速度曲线。在CSS中，p1和p2由(x1,y1,x2,y2)决定。下面是一个CSS贝塞尔曲线的例子：animation-timing-function:cubic-bezier(0.25,0.25,0.75,0.75);AlignAlign文本对齐请参见第一个标题文本下的对齐字幕。HTML元素对齐HTML元素对齐需要考虑框模型和文档流。居中对齐对于块级元素：首先设置元素的宽度，然后推动边距以填充父元素的可用空间。