#博学谷IT学习技术支持#
目录
1.垂直对齐方式
垂直对齐方式:
| 属性名 | 属性值 | 对齐方式 |
| vertical-align | baseline | 基线对齐 |
| top | 顶对齐 | |
| middle | 中线对齐 | |
| bottom | 下对齐 |
这种垂直对齐方式常用于处理行内块与文字(行内块)之间的对齐方式,因为两个不同的行内块元素的大小不一定相同,所以在垂直方向上的对齐方式就会有不同,下面来看四种对齐方式的示例:
1.默认,基线对齐:

2.顶对齐:

3.中线对齐:

4.下对齐:

在这个示例中,默认的基线对齐方式和顶对齐方式效果一样,但是不同的案例遇到的情况可能不一样,但是这四种对齐方式的用法与上图一致。
2.光标类型
光标类型,就是我们看到的鼠标箭头,可以给不同的元素设置不同的类型,在鼠标经过对应盒子时,就会改变对应的光标类型为设置类型,属性如下表格:
| 属性名 | 属性值 | 光标类型 |
| cursor | default | 默认,箭头 |
| pointer | 手(可点击类型) | |
| text | 工字型(编辑文字状态) | |
| move | 十字光标(移动类型) |
由于截图会导致箭头消失,无法演示,所以这里不在演示示例,有兴趣的可自行实验。
3.边框圆角
边框圆角:
| 属性名 | 属性值 |
| border-radius | 数字+px |
| 百分比 |
下面我们直接来看示例,边框圆角效果:

这种是数字+px的写法,可以只写一个,那么四个角都会应用到,也可以写多个(最多四个),下面我用图展示多个属性值代表的含义:

这里写的左上左下是指一个盒子的四个角的位置,按顺序是左上,右上,右下,左下的顺序,依次对应属性值,如果没有写,则会应用到对角的属性值,即上图中的内容。
须注意的是:属性值最大可以是盒子宽高的一半,比如上图示例中,盒子宽高是200×200,那么最大就是100px,即使写的属性值超过100,也是当做100来使用,当属性值等于盒子宽高的一半时,盒子会成为一个圆形,如下:

如果盒子不是正方形,那么加了最大数值的边框圆角后,盒子会成为斜着放置的椭圆,一般圆形用的比较多,所以这里了解即可。
下面来看另一种写法:

这里的百分比是基于边长的百分比的,除了写法不一样,用法是一样的,这里就不在过多解释。
须注意的是:因为是基于 边长的百分比,所以最大百分比是50%。
4.溢出部分显示效果
| 属性名 | 属性值 | 显示效果 |
| overflow | visible | 默认,溢出部分可见 |
| hidden | 溢出部分隐藏 | |
| scroll | 是否溢出都显示滚动条 | |
| auto | 根据是否溢出自动显示滚动条 |
下面我们来看示例:
默认,溢出可见,所以这里没有设置该属性,但是效果一致

溢出部分隐藏:

是否溢出都显示滚动条:

可见,不管盒子内容是否溢出,右边和下边均有滚动条
根据是否溢出自动显示滚动条:

第二个盒子内容未溢出,所以没有滚动条
5.元素本身隐藏
之间我们说过display属性的一些内容,是用来改变盒子类型的,今天在学一种,叫做自身隐藏:
display:none;
来看具体示例:

正常情况下,两个div盒子应该上下排列,且颜色不同,但是现在只能看到一个盒子,那就证明第一个盒子确实被隐藏了,而且第一个盒子的位置被第二个盒子占用着,也说明了第一个盒子属于不占位置隐藏,自身隐藏之后,自己的位置就被空出来了,其他盒子会补位。
上面说了不占位隐藏,那必然就有占位隐藏:visibility:hidden;
来看示例:

可以看到这个和上一个图的不同,这里的box1虽然也隐藏了,但是还会占位置,导致box2不能上去补位。
6.盒子阴影
| 属性名 | 属性值 | 描述 |
| box-shadow | h-shadow | 必须设置,水平偏移值 |
| v-shadow | 必须设置,垂直偏移值 | |
| blur | 可选,模糊度 | |
| spread | 可选,阴影扩大 | |
| color | 可选,阴影颜色 | |
| inset | 可选,改为内部阴影 |
这里不在演示,了解即可,一般不常用
7.过度
过渡属性,transition:all或者对应属性名,由于过渡属性要配合某种属性或者所有属性的前后变化使用(可以想象成之前讲过的伪元素:hover,鼠标移入,改变一些属性或属性值,配合过渡),属于一种动画效果,所以这里就不在演示,只说用法:
一般常用的是:transition:all;这表示所有有变化的属性都会过渡,比如说一个盒子长度是100px,鼠标经过长度变为200px,如果不加过渡,那么前后变化将会是瞬间完成,加了过渡属性,transition:all;该过程就会有动画效果,一点点边长,有时候并不是所有属性或属性值都要过渡变化,比如盒子长宽都有变化,但是只需要宽度过渡,长度需要瞬间完成,就可以设置,transition:width;只给宽度加过渡属性,如果想要将这个过渡时间正常,也可以给过渡添加时间,表示该过程需要多久完成,比如,transition:all 5s;或者,transition:width 5s;切记一定要加单位,秒(s)
8.(拓展)元素整体透明度
元素透明度,opacity:数字(0-1),来看两个简单示例:

透明度属性值为0-1之间的数,从上图中也不难发现,数值越大,透明度越低,属性越小,透明度越高,如果把透明度设置为0,就成了全透明,和刚刚讲的占位隐藏效果一致。设置成1,相当于没设置。
9.(拓展)三角形
三角形想必大家都不陌生,那如何在页面上渲染出一个三角形,基本思路:利用盒子边框和透明色属性。
基本思路:
1.设置一个盒子
2.四周设置的边框线(可加颜色),根据想要的三角形大小自行设定
3.盒子的宽高设置为0,仅保留边框
4.留下一个或相邻两个方向的边框,其他方向的边框颜色设置为透明色
下面我们根据步骤,来看示例:

第四步需要注意的是,除了颜色设置成透明色以外,其他都应与上边第二步设置的边框保持一致,这里我是留下了相邻两个方向的边框,当然也可以留下一个方向的边框。
本文详细介绍了CSS中的一些重要样式属性,包括垂直对齐方式(如基线、顶对齐、中线和底对齐)、光标类型(如默认、手型、文本编辑和移动状态)、边框圆角的实现与效果、溢出内容的显示(如隐藏、滚动条和自动)以及元素隐藏(display:none和visibility:hidden的区别)。此外,还探讨了盒子阴影、过渡效果、元素透明度以及利用边框创建三角形的技巧,这些都是前端开发中不可或缺的知识点。
880

被折叠的 条评论
为什么被折叠?



