CSS浮动和显示实例

最新推荐文章于 2023-07-13 09:27:45 发布

梦见憨憨丽吖

最新推荐文章于 2023-07-13 09:27:45 发布

阅读量328

点赞数 1

分类专栏： CSS web 网络文章标签： CSS

本文链接：https://blog.csdn.net/weixin_44799645/article/details/102890471

版权

web 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

网络

24 篇文章 0 订阅

订阅专栏

CSS

23 篇文章 0 订阅

订阅专栏

1、浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动

举个例子：请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述
1、定位
1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列

          <body>
				<div id="d1">Hello</div>
				<div id="d2">World</div>
				<span>Hello</span>
				<span>World</span>
			</body>

4、浮动定位
1、什么是浮动定位
如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示
2、属性
属性：float
取值：
1、none
默认值，无浮动定位
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。
6、清除浮动影响
属性：clear
取值：
1、none
默认值，不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0
解决方案：
1、直接设置父元素高度
弊端：必须要知道父元素高度是多少
2、设置父元素也浮动
弊端：对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值：hidden 或 auto
弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both
练习：

如下为浮动实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			#d1,#d2,#d3{
				width:200px;
				height:200px;
			}
			#d1{
				background:red;
				float:right;
			}
			#d2{
				background:green;
				float:right;
				clear:right;
			}
			#d3{
				background:blue;
			}
		</style>
    </head>
    <body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	
</body>
</html>

如下为浮动--特殊效果的实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			#d1{
				background:red;
				float:left;
			}
			#d2{
				background:green;
				float:left;
			}

			#s1{
				width:100px;
				height:100px;
				background:blue;
				float:left;
			}
		</style>
    </head>
    <body>
		<!-- <div id="d1">Hello Cml</div>
		<div id="d2">Hello Cml</div> -->

		<span id="s1">span元素</span>
	
</body>
</html>

如下为浮动–特殊效果–环绕方式的实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			#d1{
				background:pink;
				float:left;
			}
			#d2{
				height:50px;
				background:blueviolet;
			}
		</style>
    </head>
    <body>
		<div id="d1">Hello keaidemengli</div>
		<div id="d2">你好,可爱的梦丽!</div>
	
</body>
</html>

如下为浮动–元素的实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			#parent{
				border:1px solid #333;
				/*方案1：设置父元素高度*/
				/*height:200px;*/
				/*方案2：让父元素浮动*/
				/*float:left;*/
				/*方案3：位父元素设置 overflow*/
				/*overflow:hidden;*/
			}
			.c1,.c2,.c3{
				width:200px;
				height:200px;
			}
			.c1{
				background:pink;
				float:right;
			}
			.c2{
				background:rgb(92, 255, 92);
				float:right;
			}
			.c3{
				background:rgb(0, 204, 255);
				float:right;
			}
		</style>
    </head>
    <body>
		<div id="parent">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
			<!-- 追加新子元素 -->
			<div style="clear:both;"></div>
		</div>
		<div>Hello CML  这是一个可爱的小公主哟！</div>
	
</body>
</html>

2、显示
1、显示方式
1、what
每个元素都有自己的显示方式，显示方式决定了元素的显示特点
2、属性
属性：display

取值：

1、none
不显示元素–隐藏
特点：脱离文档流–不占据页面空间
2、block
像块级元素一样显示元素
场合：将行内元素变为块级元素
3、inline
像行内元素一样显示元素
注意：不要块级元素(div/p…)改变成行内元素
4、inline-block
像行内块元素一样显示元素
行内块：多个元素会在一行内显示，但是允许修改尺寸
场合：将行内元素改变为行内块，以便修改尺寸
练习：

如下为显示–显示方式的实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			a{
				width:100px;
				height:100px;
				border:1px solid #333;
			}
		</style>
    </head>
    <body>
		<a href="#">默认显示的a</a>
		<a style="display:none;" href="#">display:none</a>
		<a style="display:block;" href="#">display:block</a>
		<a style="display:inline;" href="#">display:inline</a>
		<a style="display:inline-block;" href="#">display:inline-block</a>
	
</body>
</html>

2、显示效果
1、元素可见性
属性：visibility
取值：
1、visible
默认值，元素可见
2、hidden
元素不可见,但依然占据页面空间
3、collapse
用在表格元素上，删除一行或一列时不影响整体表格布局
面试：dispaly:none 与 visibility:hidden之间的区别
display:none;脱离文档流,所以不占空间
visibility:hidden;没有脱离文档流，所以元素隐藏，空间保留
2、透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
练习：

如下为显示–显示效果–透明度实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8"><style>
			#d1{
				width:100px;
				height:100px;
				background:red;
				opacity:0;
			}
		</style>
    </head>
    <body>
		<div id="d1">
			Come on, changmengli. Please believe in yourself
			<p>
				加油常梦丽请相信你自己!!
			</p>
		</div>
	
</body>
</html>

3、垂直对齐
属性：vertical-align
作用：
1、设置td中的内容垂直对齐方式
2、设置 img 或行内块元素周围(左右两边)的文本的垂直对齐方式
取值：
top/middle/bottom
baseline:默认值，基线对齐
练习：

如下为显示–显示效果–垂直对齐实例：

<!doctype html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			#d1{
				border:1px solid #333;
			}
			img{
				vertical-align:bottom;
			}
		</style>
    </head>
    <body>
		<div id="d1">
			<img src="作业\QQ图片20191008093202.jpg">
		</div>
	
</body>
</html>

小常提醒请注意哦：
基线对齐方式，会将图片扩大3px

3、光标
属性：cursor
取值：
1、default
2、pointer
小手
3、crosshair
+
4、text
I
5、wait
等待
6、help
?

练习：

如下为显示–显示效果–光标实例：

<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			div{
				cursor:wait;
			}
		</style>
	</head>
	<body>
		<div>常Chang</div>
	</body>
	</html>

梦见憨憨丽吖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动和显示实例

1、浮动1、定位1、什么是定位元素该出现在网页的哪个位置处2、定位方式1、普通流定位2、浮动定位3、相对定位4、绝对定位5、固定定位3、普通流定位又称为文档流定位网页元素默认定位方式页面元素块级元素-从上到下的方式排列行内元素-从左到右的方式排列 <body> <div id="d1">Hello</div&...
复制链接

扫一扫