文章目录
介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
文本的垂直和水平对齐
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
div{
width:500px;
border:1px red solid
1、text-aligh 文本的水平对齐
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
text-aligh:center
}
span{
font-size:20px;
border:1px blue solid;
2、vertical-align 设置元素垂直对齐的方式
可选值:
baseline 默认值 基线对齐(子元素和父元素基线对齐)
top 顶部对齐,让子元素的顶部和父元素顶部对齐
bottom 底部对齐
middle 居中对齐
具体数值 100px
vertical-align :middle
}
p{
border:1px red solid;
}
img{
3、 不让图片基线对齐,防止图片和底边有缝隙(去除图片和底边有缝隙)
vertical-align:bottom/top/middle
}
</style>
<body>
<div>
今天天气<span>真不错</span>!
</div>
<p>
<img src="..."/>
</p>
<div>
今天天气不错 hello hello
</div>
</body>
</html>
文本其它样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.box1{
font-size:50px;
1、text-decoration 设置文本修饰
可选值:
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
text-decoration:underline red
}
2、对溢出内容显示省略号
.box2{
width:200px;
white-space 设置网页如何处理空白
可选值:
normal 正常
nowrap 不换行
pre 保留空白 保留文本格式
white-space:nowrap; // 不换行
overflow:hidden; // 超出裁剪
text-overflow:ellipsis;// 省略号
}
</style>
<body>
<div class="box2">
今天天气不错 hello hello 今天天气不错 hello hello
今天天气不错 hello hello
</div>
<div class="box1">
今天天气不错 hello hello
</div>
</body>
</html>