CSS总复习（二）一些属性介绍

CSS字体、文本样式

指定字体

不能指望用户的机器上一定安装了你想使用的字体。解决这个问题的方法是使用Web字体，我们可以直接下载Web字体并使用在自己的页面上，而不需要用户做什么。使用@font-face指定Web字体，如：

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('http://titan/listings/MyFont.woff');
}

空格处理

如果文本包含了一些空格、制表符和换行符，那么浏览器遇到多个空格时，会将它们压缩为一个空格，而换行符等其他空白符则会直接被忽略。通过whitespace属性可控制空白的处理方式，其属性值如下：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

行距行高

设置文本的行与行之间的距离是：line-height，他就是指行的高度，这个高度跟该行的文本字体大小是相互独立的。如果行大于字体大小的高度，字体是居中的，即该行字体好像有了上下等值的magin一样。

---

对比较长的文本自动使用省略号

以下是实现这一效果的CSS：

.truncate {
  width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: no-wrap;
}

只要内容超出既定宽度（如果是在一个弹性容器里，可以设置为100%），就会被截短。最后的white-space: nowrap声明是为了确保长出来的文本不会折行显示在外部元素中。

---

文字阴影

text-shadow是最被广泛支持的CSS3特性之一。

.element { 
 text-shadow: 1px 1px 1px #ccc; 
}

第一个值是阴影的右侧偏移量，第二个值是阴影的下方偏移量，第三个值是模糊距离（阴影从有到无的渐变距离），最后一个则是色值。阴影其他方向用负数值调整即可。

也可以分别设置周围各方向的阴影，具体自己搜。

---

布局处理相关

position定位属性

display 属性

记住无论何时浮动了元素，该元素就会被清除出普通的文档流。清除元素的浮动，即通知浏览器不要浮动该元素了 。

注意：在flex布局中，可以对容器的display属性使用两个新值：inline-flex 和 flex

flex：定义容器为flex布局容器，为块级元素（宽度占满一行）

inline-flex：定义容器为flex布局容器，但为行内元素（宽度默认由内容撑开）

CSS calc

是不是经常在布局的时候需要做类似这样的计算：“它应该是父元素宽度的一半减去10像素”？CSS为我们提供了实现这种计算的方法，那就是calc()函数。以下就是一个示例：

.thing { 
 width: calc(50% - 10px); 
}

加、减、乘、除都没问题，这样就可以解决以前非得用JavaScript才能解决的一堆问题。

图片大小显示

img {
    max-width: 100%;
}

这里声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小，图片会缩放占满最大可用空间。

注意：如果对图片利用width属性设置一个值（比如100%），那么图片就会按照该值显示，不考虑自身固有宽度。

在浏览器中画图

HTML5的<canvas>元素（画布）能够帮助我们通过JavaScript编程方式在浏览器中创建图像甚至是动画。可以用<canvas>元素创建简单或复杂的形状和图表，而无需借助服务器端库、Flash或其他插件。一个画布在网页中是一个矩形框，默认情况下 <canvas> 元素没有边框和内容。canvas 的左上角坐标为 (0,0)，横向往右为X轴，纵向往下为Y轴。

参考链接：https://www.runoob.com/html/html5-canvas.html

当前H5中的svg标签，可以支持画位图，该图由XML定义，位图的特征是无论怎么缩放画面，图像都不会失真，保持一致的清晰度。

视觉特效

• border-radius（border-radius: 10px;）：给元素设置圆角（C4、F3、S3.2、IE9、O10.5）
• rgba支持（background-color: rgba(255,0,0,0.5);）：使用RGB颜色设置值替代十六进制颜色设置值，并带有透明度设置值（C4、F3.5、S3.2、IE9、O10.1）
• box-shadow（box-shadow: 10px 10px 5px #333;）：设置元素的阴影效果（C3、F3.5、S3.2、IE9、O10.5）
• 旋转（transform: rotate(7.5deg);）：旋转元素（C3、F3.5、S3.2、IE9、O10.5）
• 渐变（linear -gradient(top, #fff, #efefef);）：创建渐变效果图像（C4、F3.5、S4）
• src: url(http://example.com/awesomeco.ttf);：允许通过CSS使用特定字体（C4、F3.5、S3.2、IE5、O10.1）
• 过渡（transition: background 0.3s ease）：沿时间轴逐渐将一个CSS属性由一个值过渡到另一个值（C4、F3.5、S4、IE10）
• 动画（animation: shake 0.5s 1;）：使用定义好的关键帧动画，沿时间轴逐渐将一个CSS属性由一个值过渡到另一个值（C4、F3.5、S4、IE10）

box-shadow属性总共有六个参数，但在这里只用到了5个。第一个是水平偏移量，正数表示 阴影将偏向对象的右边；负数表示阴影偏向左边。第二个参数是垂直偏移量，正数表示阴影将偏 向对象的下方；负数表示阴影偏向上方。第三个参数是模糊半径，0表示阴影不模糊过渡，界限 分明，值越大表示阴影越模糊。第四个参数是覆盖距离，或者说是阴影宽度。最后一个参数用来 定义阴影颜色。 如果指定了第六个可用参数（inset），则将阴影内置到元素方框里，以内阴影效果取代默 认的外阴影效果。

除了给元素设置阴影，你还可以轻松地为文字设置阴影，设置方式与box-shadow属性 类似。如： h1{text-shadow: 2px 2px 2px 0px #bbbbbb;} 指定了x轴及y轴的偏移量、模糊度、覆盖距离以及阴影颜色。

设置颜色和透明度

设置元素前景色和透明度。可以使用opacity属性让整个元素和文本内容透明。这个属性的取值范围是0到1，前者代表完全透明，后者代表完全不透明。

---

更新于：2023-3-31