css---分类（clear、float、display、visibility)

最新推荐文章于 2022-03-26 20:59:54 发布

阿陈陈陈

最新推荐文章于 2022-03-26 20:59:54 发布

阅读量226

点赞数

分类专栏： css 笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46218101/article/details/120675360

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

前端入门学习之css(9)

分类 CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及t元素的可见度。
常用属性
1.clear:设置一个元素的侧面是否允许其它的浮动元素

{clear：both}清除左右两端的浮动

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	
</head>
<body>
<div style="line-height: 30px;
            background-color: #EEEEEE;
            height: 100px;
            width: 50px;
            float: left;/*左边浮动*/
            padding: 5px;">
    左边栏<br><hr>
    左边栏
</div>
<div style="width: 150px;
            float: left;/*左边浮动*/
            padding: 5px;">
    <p>正文内容</p>
</div>

<div style="background-color: #0bbb15;
            color:white;
            text-align:center;
            padding:5px;">
    底部栏
</div><!-- 没有清除前面的 float: left浮动就会跟着原来的一行排列 -->

<div style="background-color: #0bbb15;
            color:white;
            clear:both;/*清除前面代码里面的 float: left浮动*/
            text-align:center;
            padding:5px;">
    底部栏
</div>
<hr>
<div style="background-color: #0bbb15;
            color:white;
            text-align:center;
            padding:5px;" >
    底部栏
</div><!-- 跟前一个div的浮动一样 -->

</body>
</html>

截图：

在这里插入图片描述

2.float:定义元素在哪个方向浮动

{float:left;}元素从左边开始排序浮动 {float:right};元素从右边开始排序浮动
{float:top;}元素从上边开始排序浮动 {float:bottom;}元素从下边开始排序浮动

代码：

<html>
<head>
<style type="text/css">
.img1 {
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
 
<body>
<p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。图像添加了边距，就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。</p>
<p>
<img  class="img1" src="C:\Users\Administrator\Desktop\sublime练习\图片\粉色.jpg" >
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
 
</html>

截图：
在这里插入图片描述

3.display:定义是否及如何显示元素

{display:none}此元素不会被显示（彻底消失，不占文档流）
{display:block}将元素变为块级元素，此元素后会带有换行符。宽高，独占一行。
{display:inline}将元素变为行内元素（内联元素），此元素后不会有换行符。横着码。
{display:inline-block}两者特性都有，横着码，不独占一行。支持宽高。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>display</title>
	<style type="text/css">
		span{display: block;}/*block将元素变为块状元素*/
	</style>
</head>
<body>
<span>111</span>
<span>222</span><!-- 原本是行内元素，后面不会自带换行功能 -->
</body>
</html>

结果：
111
222

4.visibility:定义元素是否可见或不可见

{visibility: hidden;}将元素隐藏起来，但是占位。

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		p{
			visibility: hidden;
		}/*将p标签里的内容隐藏起来，但是还占位置*/
		div{
			width: 100px;
			height: 100px;
			backface-color: red;
		}
	</style>
</head>
<body>
<p>1111</p>
<p>2222</p>
<div id="d1">3333</div>
</body>
</html>

截图：
在这里插入图片描述

阿陈陈陈

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css---分类（clear、float、display、visibility)

前端入门学习之css(9)分类 CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及t元素的可见度。 常用属性 clear:设置一个元素的侧面是否允许其它的浮动元素 float:定义元素在哪个方向浮动 cursor:当指向某元素之上时显示的指针类型 display:定义是否及如何显示元素 visibility:定义元素是否可见或不可见。...
复制链接

扫一扫

专栏目录