浮动布局

float: left 向左浮动 right 向右浮动 none 不浮动

该属性可以应用于任何元素

当元素有浮动属性的，会对其父元素或者后边的元素产生影响，会出现布局错乱的现象，可以通过消除浮动的方法来解决，浮动元素的影响

清除浮动 clear

一样有着：none(默认值),left(不允许左边有浮动),right(不允许右边有浮动),both(左右两侧不允许有浮动)

cursor 属性用于显示光标的形态

定位布局

position 定位布局是一种非常常用的一种布局方式

static 静态定位：页面中的每一个对象的默认值

absolute 绝对定位：将对象从文档流中分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在父级对象，则依据body对象

relative 相对定位：对象不从文档中分离，通过设置left、right、top、bottom四个方向相对于自身位置进行相对定位

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding: 0;}#one{width:200px;height:200px;background-color: red;position: absolute;top:200px;left:200px;}#two{width:200px;height:200px;background-color: green;}#three{width:200px;height:200px;background-color: blue;}#main{width: 800px;height:800px;border:1px solid black;margin:0 auto;position: relative;}</style>
</head>
<body>
<div id="main"><div id="one"></div><div id="two"></div><div id="three"></div>
</div>
</body>
</html>

HTML5 ----- 布局相关推荐

2.5.3 HTML5布局的使用
HTML5 布局2种方法 <div>布局 <table>布局 <!DOCTYPE html> <html> <head lang="en ...
HTML5 布局标签
div: 布局标签 html5新增布局标签:带有含义的div <div style="border: 1px solid red; width:500px;height:200px;& ...
html5布局ppt,HTML5+CS3布局.ppt
HTML5+CSS3布局主要工作布局之前先在站点中建立几个文件夹(分门别类或内容)和index.htm文件: 如images.css等: 利用HTML5框架放置网页元素如图片.文字.超级链接.表 ...
html5布局总结,HTML5网页布局的总结
可以通过和将 html 元素组合起来. html 块元素大多数 html 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level element, ...
HTML5 布局元素
元素类型块级元素独占一行,不和其他元素待在一起可以设置宽高用来对网页进行布局,承载内容行内元素不会独占一行,可以和其他元素待在一行不可以设置宽高,宽高由里面的内容决定行内块级元素不会 ...
HTML5布局—div布局和table布局
1.使用 <div> 元素的 HTML 布局注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. 这个例子使用了四个 <div> 元素 ...
[知识总结]HTML5布局之flex布局总结
#一布局几种方式 1.静态(自然)布局(没有任何(float,position等)修饰的布局) 2.浮动布局(float) 3.定位布局(position) 4.弹性布局(flex) 5.栅格布局( ...
网易邮箱登录页面html5布局,css实现tab效果仿163邮箱样式
复制代码代码如下: 163邮箱tab *{ margin: 0px; padding: 0px; } .dvTab { font-family: 'Microsoft Yahei',verdana; ...
移动设备HTML5页面布局
在HTML5标准添加的新元素中,用于常见页面结构的包括header footer footer nav aside aside article section hgroup . 下面简单介绍一下这个 ...

HTML5 ----- 布局

浮动布局

定位布局

HTML5 ----- 布局相关推荐

最新文章

热门文章