所谓定位,简单来说就是通过CSS样式属性设定HTML页面元素在运行时显示的位置。
定位的基本思想很简单,它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。
CSS实现定位的效果主要通过浮动( float
)和定位( position
)两个样式属性实现。
注意:如果在一行中不能容纳所有的元素,则会换到下一-行,继续自左向右排列。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位。
float属性指定一个 元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该属性具有以下几个值: .
设置为浮动后,该元素原来的位置会被下一个元素替代。当前元素设置浮动后,之影响当前元素后边的元素
所有元素都设置为浮动的话,块级元素排列顺序变为水平方向的排列,
块级元素默认的宽度和高度
设置为浮动后
多个块级元素都设置为浮动后->垂直方向排列变为水平方向排列
如果占满父级元素宽度的100%后,会自动换行
内联元素的默认宽度和高度
内联元素设置为浮动后
行内块级元素设置为浮动后,元素之间的空白间隙被取消
为子级元素设置浮动不能超出父级元素的范围(与父级元素浮不浮动无关)
如果兄弟关系的两个元素,为下一个兄弟元素设置为浮动,下一个兄弟元素不会超过上一个兄弟元素的位置
文本内容与浮动的元素之间,文本内容不会被浮动的元素所覆盖,而是环绕在浮动元素的周围
clear属性设置元素是否显示在其之前元素的下方。该属性具有以下几个值:
#container::after {
content: "";
display: block;
clear: both;
}
发生的场景
解决方案:
多多少少会带有一些副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: gray;
}
ul{
background-color: white;
width: 150px;
list-style-type: none;
padding: 0;
}
ul li{
font-size: 14px;
line-height: 25px;
color: gray;
padding: 0 7px ;
}
ul li:hover{
color: lightcoral;
background-color: lightgray;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: gray;
}
ul{
background-color: white;
list-style: none;
/* 去除项目符号所占空间 */
padding-left: 0;
/* 解决高度塌陷问题 */
overflow: hidden;
}
ul li{
float: left;
width: 95px;
height: 40px;
line-height: 40px;
text-align: center;
}
li:hover{
background-color: violet;
}
li a{
text-decoration: none;
color: black;
}
ul li a{
display: block;
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<ul>
<li><a href='#'>测试1</a></li>
<li><a href='#'>测试2</a></li>
<li><a href='#'>测试3</a></li>
<li><a href='#'>测试4</a></li>
<li><a href='#'>测试5</a></li>
</ul>
</body>
</html>