第七章浮动

墨渐生微

于 2018-08-28 20:08:43 发布

阅读量709

点赞数 1

分类专栏： Web前端技术文章标签：浮动 float display overflow

本文链接：https://blog.csdn.net/Mythology_px/article/details/82153753

版权

Web前端技术专栏收录该内容

8 篇文章 1 订阅

订阅专栏

块级元素block：独占一行、可设宽高；div、p、h

内联元素inline：按行排列、宽高由内容所决定；span、a

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

display属性：

block：块级元素

inline：内联元素

inline-block：行内块元素

none：不显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display属性的用法</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            /*display: block;*/
            /*display: inline;*/
            display: inline-block;
            /*display: none;*/
        }
        span{
            width: 100px;
            height: 100px;
            border: 3px solid red;
            /*display: block;*/
            /*display: inline;*/
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div块元素</div>
    <span>span内联元素</span>
</body>
</html>

float属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			.son{
				width: 100px;
				height: 50px;
				border: 3px solid red;
				margin: 5px;
				padding: 5px;
				background-color: yellow;
			}
			#dad{
				width: 500px;
				border: 3px solid black;
			}
			#d1{
				float: left;
			}
			#d2{
				float: right;
			}
			#d3{
				
				height: 100px;
				width:200px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="dad">
			<div class="son" id="d1"></div>
			<div class="son" id="d2"></div>
			<div class="son" id="d3"></div>
		</div>
	</body>
</html>

clear

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动</title>
		<style type="text/css">
			.son{
				width: 100px;
				height: 50px;
				border: 3px solid red;
				margin: 5px;
				padding: 5px;
				background-color: yellow;
			}
			#dad{
				width: 500px;
				border: 3px solid black;
			}
			#d1{
				float: left;							
			}
			#d2{
				float: right;
				clear: both;		
			}
			#d3{				
				height: 100px;
				width:200px;
				background-color: green;
				float:left;
				clear:left;
			}
		</style>
	</head>
	<body>
		<div id="dad">
			<div class="son" id="d1"></div>
			<div class="son" id="d2"></div>
			<div class="son" id="d3"></div>
		</div>
	</body>
</html>

边框塌陷

设置高度

Overflow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>overflow</title>
		<style type="text/css">
			.son{
				width: 100px;
				height: 50px;
				border: 3px solid red;
				margin: 5px;
				padding: 5px;
				background-color: yellow;
			}
			#dad{
				width: 500px;
				border: 3px solid black;
				/*内容会被修剪，并且其余内容是不可见的*/
				/*overflow: hidden;*/				
				overflow:auto;
			}
			#d1{
				float: left;							
			}
			#d2{
				float: right;
			}
			#d3{				
				height: 100px;
				width:200px;
				background-color: green;
				float:left;
			}
		</style>
	</head>
	<body>
		<div id="dad">
			<div class="son" id="d1"></div>
			<div class="son" id="d2"></div>
			<div class="son" id="d3"></div>
		</div>
	</body>
</html>

墨渐生微

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第七章浮动

块级元素block：独占一行、可设宽高；div、p、h内联元素inline：按行排列、宽高由内容所决定；span、a 内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立 display属性： block：块级元素 inline：内联元素 ...
复制链接

扫一扫