css 基础捡漏（二）

最新推荐文章于 2024-09-19 11:25:25 发布

bingqise5193

最新推荐文章于 2024-09-19 11:25:25 发布

阅读量150

点赞数

分类专栏： html与css 文章标签： css

本文链接：https://blog.csdn.net/bingqise5193/article/details/101206095

版权

html与css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

常见inline block inline-block 元素

inline: a span em strong

block: p div h1-h5 ul ol form

inline-block: img input

注意：凡是带有inline的元素，都有文字特性，因此img并排时中间会有间隙,原因是img两个标签之间有空格，去除这些空格则间隙消失

层定位

absolute 脱离原来位置进行定位，不占有原来的位置

relative 保留原来位置进行定位，占有原来位置

如果子元素需要绝对定位，一半来说父元素用relative，不用absolute, 以减少对后续元素位置的破坏

z-index 元素在第几层

两栏定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两栏布局</title>
	<style>
		*{
			margin: 0;
		}
		.right{
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: red;
			opacity: 0.3;
			right: 0;
		}
		.left{
			height: 100px;
			margin-right: 100px;
			background-color: black;
		}
	</style>
</head>
<body>
	<!-- 右侧元素需要写在前面 -->
	<div class="right"></div>
	<div class="left"></div>
</body>
</html>

文本溢出打点展示

单行三件套

		p{
			width: 300px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

多行

方法一：后端将文字包括点传递给前端展示

方法二：利用伪元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字溢出打点</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			font: 14px/1.5 arial;
		}
		p{
			width: 300px;
			overflow: hidden;
			border: 1px solid black;

		}
		p.single{
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		p.multiple{
			height: 42px;
			position: relative;
		}
		p.multiple:after{
			content: "...";
			display: inline-block;
			position: absolute;
			right: 10px;
			bottom: 1px;
			padding-right: 5px;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<!-- 单行打点 -->
	<p class="single">注意： 凡是带有inline的元素，都有文字特性，因此img并排时中间会有间隙,原因是img两个标签之间有空格，去除这些空格则间隙消失</p>
	<!-- 多行打点 -->
	<p class="multiple">注意： 凡是带有inline的元素，都有文字特性，因此img并排时中间会有间隙,原因是img两个标签之间有空格，去除这些空格则间隙消失</p>
</body>
</html>