HTML---网页布局

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结


一.常见网页布局

HTML---网页布局_第1张图片

HTML---网页布局_第2张图片

二.标准文档流 

HTML---网页布局_第3张图片

 标准文档流常见标签

标准文档流的组成
块级元素

-

内联元素

 三.display属性

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

HTML---网页布局_第4张图片

案例:



	
		
		
		
	
	
		
我是元素
我是Span元素

HTML---网页布局_第5张图片

  • 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;
	}

HTML---网页布局_第6张图片

  •  总结--display特性

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

四.float属性

HTML---网页布局_第7张图片

案例:



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

HTML---网页布局_第8张图片

  •  left

设置元素向左浮动

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

 


总结

你可能感兴趣的:(Web前端,html,前端,javascript)