第四周预习——浮动，定位，伪类及伪元素

最新推荐文章于 2022-06-22 20:28:42 发布

是菁菁哦

最新推荐文章于 2022-06-22 20:28:42 发布

阅读量351

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/jingjingxuaokeai/article/details/124290923

版权

一.浮动（float）

1.什么是浮动

类似于< div >的块级元素都是独占一行的，这时为了使多个块级元素在一行排列，我们会用到css中的float（浮动），css的float会使元素向左或向右移动，其周围元素也会重新排列。
Float往往是用于图像，但它在布局时一样非常有用。

2.元素怎样浮动

元素是水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边

3.浮动的取值

float:left 靠左浮动
float:right 靠右浮动
float:none 不使用浮动
float:inherit 继承父级

4.浮动的特点

1.脱离文档流，不再占用文档流中的位置

设置两个盒子模型：

<head>
    <style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: lightpink;
		}
	</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>

在这里插入图片描述
当应用float后

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: lightpink;
		}
	</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>

在这里插入图片描述
此时，第一个盒子应用了float，导致脱离了文档流，而盒子二未设置float，依然在文档流中，所以盒子一会漂浮在盒子二上方。

2.浮动元素默认不会超出父元素边框，也不会超过它前边的其他浮动元素的边框

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
		.two{
			width: 200px;
			height: 200px;
			background-color: lightpink;
			float: left;
		}
	</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>

在这里插入图片描述

3.若父级宽度装不下浮动的盒子，多出的盒子会另起一行对齐

此时虽然依然应用浮动，但两个盒子因为不能在一行装下，会在两行显示

<head>
	<style type="text/css">
		.one{
			width: 1000px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
		.two{
			width: 1000px;
			height: 200px;
			background-color: lightpink;
			float: left;
		}
	</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>

在这里插入图片描述

4.浮动元素不会超过它上边的兄弟元素，最多和兄弟元素一样高

<head>
	<style type="text/css">
		.one{
			width: 1000px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
		.two{
			width: 1000px;
			height: 200px;
			background-color: lightpink;
			float: left;
		}
		.three{
			width: 100px;
			height: 200px;
			background-color: lightsalmon;
			float: right;
		}
	</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>

在这里插入图片描述
此时虽然盒子三上方有位置，但盒子三不会上去，但当盒子二，三的位置调换一下，盒子三就可以上去。

<div class="one"></div>
<div class="three"></div>
<div class="two"></div>

在这里插入图片描述

5.浮动元素不会盖住文字，文字会环绕在浮动元素周围

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
	</style>
</head>
<body>
<div class="one"></div>
<p>这是一个web网页</p>
</body>

在这里插入图片描述

6.如果块级盒子没有设置宽度，默认宽度和父级一样宽；添加浮动后，其大小根据内容来决定

<head>
	<style type="text/css">
		.one{
			background-color: lightcyan;
		}
	</style>
</head>
<body>
<div class="one">web前端</div>
</body>

在这里插入图片描述
使用浮动后

注：脱离文档流之后，不需要再区分块元素和行内元素了

5.清除浮动

当元素浮动后，周围的元素会重新排列，
因子级浮动脱离文档流，父级无法撑开高度，所以要用到clear清除浮动。

1.clear语法

clear:left 左侧抗浮动，只影响自身，不影响其他相邻元素
clear:right 右侧抗浮动，只影响自身，不影响其他相邻元素
clear:both 左右两侧抗浮动，只影响自身，不影响其他相邻元素
clear:none 无效清除

2.方法

在浮动元素后使用一个空元素（该元素必须是块级元素）

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
		.two{
			width: 200px;
			height: 200px;
			background-color: lightpink;
			float: left;
		}
		.three{
			width: 200px;
			height: 200px;
			background-color: lightsalmon;
			clear: both;
		}
	</style>
</head>
<body>
<div class="one"></div>
<div class="three"></div>
<div class="two"></div>
</body>

在这里插入图片描述
在空盒子三的作用下，盒子一二都被清楚浮动。

添加overflow属性
overflow：hidden/auto/scroll

<head>
	<style type="text/css">
	    .outer{
	    	overflow: auto;
	    	width: 1000px;
	    	height: 500px;
	    }
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			float: left;
		}
		.two{
			width: 200px;
			height: 200px;
			background-color: lightpink;
			float: left;
		}
	</style>
</head>
<body>
<div class="outer">
    <div class="one"></div>
    <div class="two"></div>
</div>
</body>

在这里插入图片描述

使用after伪元素
相当于在有浮动元素的父级盒子后面添加一个新盒子clearfix
父级元素定义height，但只适合高度固定的布局
父级元素也一起浮动。但这种方法会产生新的浮动问题，不推荐

二.定位（position）

1.什么是定位

定位可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置
定位也是在摆放盒子，按照定位的方式移动盒子

2.定位的取值

static
relative
fixed
absolute
sticky

1.static（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			position: static;
		}
		.two{
			width: 200px;
			height: 200px;
			background-color: lightpink;
			float: left;
		}
	</style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

在这里插入图片描述

2.fixed（固定定位）

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
注：Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			position: fixed;
		}
		.two{
			width: 200px;
			height: 2000px;
			background-color: lightpink;
			float: left;
		}
	</style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

在这里插入图片描述

3.relative（相对定位）

相对定位元素的定位是相对其正常位置，移动相对定位元素，它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块。

.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			position: relative;
		}

4.absolute（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器。
absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。
加了绝对定位的盒子不能通过margin:0 auto实现水平居中，若要实现水平垂直居中，可通过：
（1）left：50%；即让盒子的左侧移动到父级元素的水平中心位置
（2）margin-left:-100px；即让盒子向左移动自身宽度的一半

.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			position: absolute;
		}

5.stickt（粘性定位）

stickt是基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。在页面滚动未超出目标区域时，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			position: sticky;
		}

3.定位的重叠

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，用z-index属性指定一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

<head>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: lightcyan;
			z-index: -1;
			position: absolute;
		}
		.two{
			width: 200px;
			height: 200px;
			background-color: lightpink;
			z-index: 1;
			position: absolute;
		}
	</style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

在这里插入图片描述

4.所有的css定位属性

在这里插入图片描述

三.伪类及伪元素

1.伪类

CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：selector:pseudo-class {property:value;}
CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

所有css伪类

2.伪元素

CSS 伪元素是用来添加一些选择器的特殊效果。
伪元素的语法：selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}

所有css伪元素

3.区别

1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2.伪元素本质上是创建了一个有内容的虚拟容器；
3.CSS3中伪类和伪元素的语法不同；伪类用单冒号:表示；而伪元素用双冒号::表示。
4.一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

是菁菁哦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四周预习——浮动，定位，伪类及伪元素

一.浮动1.什么是浮动类似于< div >的块级元素都是独占一行的，这时为了使多个块级元素在一行排列，我们会用到css中的float（浮动），css的float会使元素向左或向右移动，其周围元素也会重新排列。Float往往是用于图像，但它在布局时一样非常有用。2.元素怎样浮动元素是水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
复制链接

扫一扫