1、浮动
1.1、display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- block块元素
inline行内元素
inline-block是块元素,但是可以内联,在一行
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
1.2、float
float,css的一种属性,主要属性值为:left(左浮动)、none(不浮动)、right(右浮动)、inherit(继承父元素浮动),多用于网页排版。
原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘
浮动的影响:
-
- 对附近的元素布局造成改变,使得布局混乱
- 浮动后的元素可以设置宽度和高度等,也就是说元素浮动后会变成块级元素,但我更倾向于说元素变成inline-block类型的元素,即同时拥有块级与行内元素的特征
- 因为浮动元素脱离了普通流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素A撑开的,但是当A元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌(前提是父容器高度小于A元素高度),下面用图来说明一下高度坍塌:
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
CSS 中所有的浮动属性
“CSS” 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。
属性 | 描述 | 值 |
---|---|---|
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
float | 指定一个盒子(元素)是否可以浮动。 | left right none inherit |
1.3、overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值:
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
**注意:**overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
float和display对比
- display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流
2、定位
2.1、相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位-->
<!-- 相对于自己原来的位置进行偏移-->
<!-- 对于设定的方法,负号表示设定的方向移动-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #4747D2FF;
padding: 0;
}
#first{
border: 1px dashed #ac6e6e;
position: relative;
top: 20px; /*相对定位*/
}
#second{
border: 1px dashed #480e0e;
top: -20px; /*相对定位*/
}
#third{
border: 1px dashed #9ddc87;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位-->
<!-- 相对于自己原来的位置进行偏移-->
<!-- 对于设定的方法,负号表示设定的方向移动-->
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border:2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
color: blue;
}
.a2{
position: relative;
left:200px;
bottom: 100px;
}
.a3{
position: relative;
left:100px;
bottom: 100px;
}
.a4{
position: relative;
bottom: 100px;
}
.a5{
position: relative;
bottom: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1" >链接1</a>
<a href="#" class="a2" >链接2</a>
<a href="#" class="a3" >链接3</a>
<a href="#" class="a4" >链接4</a>
<a href="#" class="a5" >链接5</a>
</div>
</body>
</html>
[外链图片转存中…(img-pITn2BDw-1659319089200)]
2.2、绝对定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>
2.3、固定定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0px;
bottom: 500px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
2.4、z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>