-
常见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>