小工具      在线工具  汉语词典  css  js  c++  java

DIV与TABLE的HTML布局

前端开发,css,html5,html 额外说明

收录于:152天前

DIV布局

  • div标签是块级元素,本身没有任何意义。它用作其他元素的容器。由于div有自己的换行效果,所以div默认是按列排列的。
// 两个div默认列排列
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="background-color: black; width: 100px ; height: 100px;">
			
		</div>
		
		<div style="background-color: blue; width: 100px; height: 100px;">
			
		</div>
	</body>
</html>

效果图:
列排列在这里插入图片描述

  • div的排列和布局可以通过style元素改变
  1. float属性,浮动布局
// style元素的float属性 left是之后从左往右排列,right是从右边向左排列
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="background-color: black; width: 100px ; height: 100px;">
			
		</div>
		
		<div style="background-color: blue; width: 100px; height: 100px;float: left;">
			
		</div>
		
		<div style="background-color: red; width: 100px; height: 100px;float: left;">
			
		</div>
	</body>
</html>

效果图:
在这里插入图片描述

  1. 宽度、高度和背景颜色布局
// height:设置div的高; width:设置div的宽 (高600px,宽800px)
<div style="width=800px; height-600px; ">
	···
</div>

//background-color :背景设置颜色
  1. 页边距的轮廓样式
//margin : 设置div的外延边距,即到父容器的距离(上->右->下->左)
//margin-left:到父容器左边框的距离
//margin-right:到父容器有边框的距离
//margin-top:到父容器上边框的距离
//margin-bottom:到父容器下边框的距离
<div style="background-color: black ;width :600px ; height:400px; margin : 100px 200px 300px 100px">
	<div style="background-color:blue; width:200px; height:100px;">
		···
	</div>
</div>

效果图:
在这里插入图片描述

  1. 填充的内联样式
// padding设置div的内联边距,即到子容器的距离
//padding-left:左内边距
//padding-right:右内边距
//padding-top:上内边距
//padding-bottom:下内边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="padding: 100px 150px 200px 100px; background-color: blue;width: 600px ; height: 400px;">
			<div style="background-color: white; width: 200px; height: 100px;" >
				
			</div>
		</div>
		
	
	</body>
</html>

效果图:
在这里插入图片描述

无论是外置还是内联,都必须考虑容器本身的大小。最好以左上点为原点。

  1. position的布局定位改变了div的位置
// relative定位设置左上定点定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="background-color: blue;width: 200px ; height: 200px;">
			<div style="position:relative;top:10px; left: 10px ; background-color: white; width: 140px; height: 140px;" >
				···
			</div>
		</div>
		
	
	</body>
</html>

效果图:
在这里插入图片描述

// absolute设置left,right,top,bottom进行绝对定位(也可以只使用左上的点定位),z-index设置div层叠顺序
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="position:absolute; top:50px; left:50px; background-color:red; width: 200px ; height: 200px;">
			
		</div>
		<div style="position:absolute; top:60px; left: 60px; background-color: green; width: 150px; height: 150px;" >
				
		</div>
		<div style="position:absolute; top:70px; left: 70px; background-color: orange; width: 100px; height: 100px;" >
				
		</div>
	
	</body>
</html>

在第二个div中加入z-index体现层叠效果(下图中绿色将黄色覆盖了)
z-index:1

效果图:
在这里插入图片描述在这里插入图片描述

// fixed相对于浏览器窗口定位,不管窗口如何变化,位置都不变始终以原窗口的距离为准
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div style="position: fixed; top: 210px; left: 210px; background-color: red; width: 400px; height: 300px;"></div>
	
	</body>
</html>
 

效果图(定义以整个浏览器窗口为准,缩小窗口布局指挥损失不会适应变化):
在这里插入图片描述
在这里插入图片描述

// static默认值,系统默认
  1. 风格的其他属性
1、font:指定DIV中文本的样式。

说明:font后可以跟文本样式的多个属性,如字粗细、字大小、字体等。

2、font-family:设置要用的字体名称。

3、font-weight:指定文本的粗细。

4、font-size:指定文本的大小。

5、font-style:指定文本样式。

6、color:指定文本颜色。

7、text-align:指定文本水平对齐方式。

8、text-decorator:用于文本的修饰。

9、text-indent:设置文本的缩进。

10、text-transform:设置文本的字母大小写。

11、direction:内容的流向。

12、line-height:指定文本的行高。

13、Word-spacing:字间距。

14、border:设置DIV的边框样式。

15、border-width:设置边框的宽度。

16、border-color:设置边框的颜色。

17、border-style:设置边框的样式。

18、background-position:在DIV中定位背景位置。

上述布局样式的内容可以用css来实现,一般我们使用css和html来组合布局。

. . .

相关推荐

额外说明

MUMU模拟器设置网络

1、我们先打开我们的模拟器,等待进入到主页面。 2、打开之后有两个设置选项,我们要找到的设置是模拟器里面的设置。 3、这个时候我们点击设置依次看到有一个wife的图标,点击wife。 4、点击之后我们长按信号图标会弹出一个菜单,在这个菜单下我们可以看到有

额外说明

java基本接口、异常

今日学习内容: 1 接口: 定义规范的,主要是由抽象方法构成的。      (一个类实现了接口,就要按照规矩重写接口里的所有抽象方法)     关键字:          定义接口:interface          实现接口:implements  

额外说明

MFC 程序中出现“调试断言失败!Program:C:\Windows\system32\mfc110d.dll File: f:\dd\vctools\vc7libs\”

MFC程序出现“Debug Assertion Failed! Program:C:\Windows\system32\mfc110d.dll File: f:\dd\vctools\vc7libs\ship\atlmfc\src\mfc\wingdi.

额外说明

Eclipse调试Android真机时无法显示LogCat

Eclipse调试Android真机时无法显示LogCat,具体步骤如下: 在AndroidSDK\tools\lib文件下找到ddmlib.jar 在Eclipse安装目录中,进入Eclipse\configuration\org.eclipse.os

额外说明

JAVA06_Optional类概述、初始化、常用方法、最佳实践

文章目录 ①. Optional类的概述 ②. 初始化Optional类 ③. 判断对象是否存在 ④. 获取Optional容器的对象 ⑤. Optional的过滤和映射 ⑥. 什么场景用Optional ①. Optional类的概述 ①. 到目前为止

额外说明

[引擎笔记]数学:矩阵求三变量方程组

方程组如下: ⎧⎩⎨a00∗x+a01∗y+a01∗z=b0a10∗x+a11∗y+a11∗z=b0a20∗x+a21∗y+a21∗z=b0 { a 00 ∗ x + a 01 ∗ y + a 01 ∗ z = b 0 a 10 ∗ x + a 11 ∗

额外说明

ResNet详解:网络结构解读与PyTorch实现教程

目录 一、深度残差网络(Deep Residual Networks)简介 深度学习与网络深度的挑战 残差学习的提出 为什么ResNet有效? 二、深度学习与梯度消失问题 梯度消失问题定义 为什么会出现梯度消失? 激活函数 初始化方法 网络深度 如何解决

额外说明

C++拷贝构造函数的应用场景Demo03

#include <iostream> using namespace std; class Coordinate { public: Coordinate(int x = 0, int y = 0) { X = x;

额外说明

java面试题目(一)

Java概述 1.JVM、JRE和JDK的关系 JVM Java Virtual Machine是Java虚拟机,Java程序需要运行在虚拟机上,不同的平 台有自己的虚拟机,因此Java语言可以实现跨平台。 JRE Java Runtime Enviro

ads via 小工具