21_css布局3_定位布局.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>css布局3-定位布局</title>

<style type="text/css">

div{

margin:0;

padding:0;

}

div{

width:100px;

height:100px;

}

#one{

background:red;

}

#two{

background:blue;

position:absolute;

top:50px;

left:150px;

}

#three{

background:green;

}

</style>

</head>

<body>

<div id="one">1</div>

<div id="two">2</div>

<div id="three">3</div>

</body>

</html>

				
时间: 2024-08-11 09:49:44

21_css布局3_定位布局.html的相关文章

前端(七)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则

24_css定位布局_相对定位.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html万能排版布局插件,web视图定位布局创意技术演示页

html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>web视图定位布局创意技术演示页</title> <meta content="width=device-width,initial-scale=1.0,m

13_定位布局.txt

定位布局position position:static/absolute/relative static静态定位,默认值,一般不用. absolute绝对定位,将对象从文档流中分离出来,通过设置left,right,top,bottom四个方向 相对于父级对象进行绝对定位.如果不存在这样的父对象,则依据body对象. relative相对定位,对象不从文档流中分离,通过设置left,right,top,bottom四个方向 相对于自身位置进行相对定位. 当我们要想使用绝对定位时,必须要有两个条

奇妙的CSS之布局与定位

关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼.下面根据我的学习和编程经验来谈一下这方面的要点. 要想完美的实现自己的布局,那首先一定要把盒模型搞清楚.盒模型由内容区.内边距(padding).边框(border)和外边距(margin)构成.这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性.我们平时设置的

CSS之定位布局(position,定位布局技巧)

css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置. 2.各个属性值的描述: static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,在普通流中,各个元素默认的属性. relative(相对定位) 对象不可层叠.不脱离文

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

文档布局与定位梳理

背景: Web Excel项目在继续,坑爹的项目,从前到后都需要我搞(o(╯□╰)o)!一会儿写JS一会儿写Java,还得附带美工.产品的技能!思维真的难以转换,经常在JS中写int num =0,JS还检测不出来.今天研究梳理的是Web前端技术,文档定位以及Box-sizing属性,因为项目中关于这块儿的控制很多. 我感觉Web前端最难的就是文档定位的这一块儿,用起来感觉要比Swing和WPF困难,在Swing中可以使用多种布局,比如BorderLayout / GridLayout / Bo

前端3 浮动布局,固定定位,绝对定位,相对定位

浮动布局: 让块级标签在父级的宽度限制下同行显示,一行显示不下,自动换行 注意:要达到一行显示个数固定,一定要固定父级的宽度 语法: 子级:{float:left|right} 问题:子级不再撑开父级高度(不完全脱离文档流) 脱离文档流:层次结构会上移,覆盖有位置重叠且没脱离文档流的标签 不完全:浮动布局后,可以重新让子级撑开父级高度 清浮动:让不完全脱离文档流的子级重新撑开父级的高度,这种做法就叫做清浮动 语法: 父级:after{ content:""; display:block