HTML5学习笔记（五）

news2024/11/28 10:57:09

CSS3 多列布局

CSS3新增了一种布局方式——多列布局。使用多列布局，可以轻松实现类似报纸那样的布局。
多列布局的应用非常广泛，像各大电商网站、素材网站中常见的“瀑布流效果”。

column-count属性来定义多列布局的列数。

column-width属性来定义多列布局中每一列的宽度。

column-gap属性来定义列与列之间的间距。

column-rule属性来定义列与列之间的边框样式。

column-rule: width style color;

column-span属性来实现多列布局的跨列效果。这个属性跟表格中的colspan属性类似。

滤镜效果

所有的滤镜效果都是使用filter属性来实现的。

brightness()亮度

来实现亮度滤镜效果。亮度滤镜可以减弱或增强图片的亮度。

filter: brightness(百分比);

brightness()方法的取值是一个百分比，其中0%~100%表示减弱图片的亮度，例如0%就是完全黑色；100%以上表示增强图片的亮度，例如200%就是将亮度提高2倍。

grayscale() 灰度（黑白照片）

可以实现灰度滤镜效果。灰度滤镜可以将彩色图片转换成黑白图片。

filter: grayscale(百分比);

grayscale()方法的取值是一个百分比，其中0%表示不做任何修改，100%表示完全灰度（即黑白图片）

sepia() 复古滤镜

用来实现复古滤镜效果。复古滤镜，也叫褐色滤镜。

filter: sepia(百分比);

sepia()方法的取值是一个百分比，取值范围为0%~100%。其中，0%表示没有转换，100%表示复古效果。

invert()反色滤镜

用来实现反色滤镜效果的。反色，指的是将红、绿、蓝3个通道的像素取各自的相反值。

filter: invert(百分比);

nvert()方法的取值是一个百分比，取值范围为0%~100%。其中，0%表示没有转换，100%表示反转所有颜色。

hue-rotate()色相旋转

实现色相旋转的滤镜效果。

filter: hue-rotate(度数)；

hue-rotate()方法的取值是一个度数，单位为deg（即degree的缩写）。其中，0deg表示不旋转，360deg表示旋转360°，也就是相当于一个循环。

drop-shadow()阴影

用来实现阴影滤镜效果。

filter: drop-shadow(x-offset y-offset blur color);

opacity()透明度

实现透明度滤镜效果。

filter: opacity(百分比);

opacity()方法的取值是一个百分比，取值范围为0%~100%。其中，0%表示完全透明，100%表示完全不透明。

blur() 模糊度

blur()方法来实现模糊度滤镜效果，也就是“马赛克”。

filter: blur(像素);

blur()方法的取值是一个像素值，取值越大，模糊效果越明显。

contrast()对比度

实现对比度滤镜效果。

filter: contrast(百分比);

contrast()方法的取值是一个百分比。其中，0%~100%表示减弱对比度，例如0%则是灰度图片；100%以上表示增强对比度，例如200%表示增强对比度为原来的2倍。

saturate()饱和度

实现饱和度滤镜效果。

filter: saturate(百分比);

saturate()方法的取值是一个百分比。其中，0%~100%表示减弱饱和度，100%以上表示增强饱和度。

多种滤镜同时使用

如果想要为某个元素同时定义多种滤镜效果，我们可以将filter属性的取值设置为一个“值列表”的形式来实现。

filter:brightness(120%) contrast(200%) blur(1px);

flex弹性盒子模型

flex-grow

flex-grow属性来定义弹性盒子内部子元素的放大比例。也就是当所有子元素宽度之和小于父元素的宽度时，子元素如何分配父元素的剩余空间。
flex-grow属性取值是一个数值，默认值为0。当取值为0时，表示不索取父元素的剩余空间；当取值大于0时，表示索取父元素的剩余空间（即子元素放大）。取值越大，索取得越多。

flex-shrink

flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。也就是当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。
flex-shrink属性取值是一个数值，默认值为1。当取值为0时，表示子元素不缩小；当取值大于1时，表示子元素按一定的比例缩小。取值越大，缩小得越厉害。

flex-basis

flex-basis属性取值有两个：一个是“auto”，即该子元素的宽度是根据内容多少来定的；另一个是“长度值”，单位可以为px、em和百分比等。
flex-basis属性用来设置子元素的宽度，当然，width属性也可以用来设置子元素的宽度。如果某一个子元素同时设置flex-basis和width，那么flex-basis的值会覆盖width的值。