HTML---网页布局

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结

---

一.常见网页布局

二.标准文档流 

 标准文档流常见标签

标准文档流的组成

块级元素	、 、 - 、 、 等
内联元素	、、、、等

 三.display属性

 在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：

案例：

	
		
		
		
	
	
		
我是元素
		我是Span元素
	

• none属性

设置的元素不会被显示。

div{
    width: 100px; height: 100px;
	border: 1px seagreen solid;
	display: none;
	}

•  inline

元素被视为内联元素，并在同一行内显示。

div{
    width: 100px; height: 100px;
	border: 1px seagreen solid;
	display: inline;
	}

•  inline-block

该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。

div{
	width: 100px; height: 100px;
	border: 1px seagreen solid;
	display: inline-block;
	}

•  总结--display特性

 实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。

四.float属性

案例：

	
		
		
		
	
	
		

			

			

			

			

				浮动盒子可以向左浮动，也可以向右浮动，直到外边缘碰到包含框或另一个浮动盒子为止
                这里使用三个图片和本段文字来讲解浮动属性在网页中的应用，根据所在的div分别向左/        
                右/不浮动。
			
			
		

•  left

设置元素向左浮动

.layer01{
		border: 1px blue dashed;
		float: left;
		}

 

---

总结