一、 垂直对齐方式
1.1 基线
基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)
浏览器在解析行内标签以及行内块标签的时候,默认按照文字模式进行解析,所以有的标签排列是无法完全对齐的,因为是按照 基线对齐
1.2 垂直对齐方式
方法一
属性名:vertical-align
属性值:
属性值 | 效果 |
---|---|
baseline | 默认,基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
但凡需要 行内标签与文字标签对齐、行内块与行内块对齐,想要居中都要使用
vertical-align:middle
方法二
将标签转为 块标签
display:block
图片居中实例
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
/* 水平居中 */
text-align: center;
}
img {
/* 垂直居中 */
vertical-align: middle;
}
二、 光标类型
场景:设置鼠标光标在元素上时显示的样式
属性名:cursor:
常见的属性值:
属性值 | 效果 |
---|---|
default | 默认值,箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工字型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
三、 边框圆角
场景:让盒子四个角变得圆润,增加页面细节,提升用户体验
属性名:border-radius
常见取值:数值+px、百分比
原理:
.box{
margin-top: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值:表示四个角是相同的 */
/* border-radius: 10px; */
/* 四个值: 左上 右上 右下 左下,从左上顺时针转 */
border-radius: 10px 20px 40px 80px;
}
赋值规则:总左上角开始赋值,然后顺时针赋值,没有赋值的看对角。
四、overflow溢出部分显示效果
溢出部分:指的是盒子内容
所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条
属性名:overflow
常见属性值:
属性值 | 效果 |
---|---|
visible | 默认值,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出,都显示滚动条 |
auto | 根据是否溢出,自动隐藏、显示滚动条 |
五、 元素本身隐藏
场景:让某些元素本身在屏幕中不可见
常见属性:
visibility:hidden
display:none
(常用)
区别:
visibility:hidden
元素隐藏后仍然占有位置
display:none
隐藏元素后不占用原来的位置