`
qq17906
  • 浏览: 54194 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一、布局和定位

阅读更多

布局和定位:搭建一个可视框架,框架在页面的显示位置和浮动方式。
CSS布局方式有两种:浮动布局和定位布局
了解Div
 Div是XHTML中指定的、专门用于布局设计的容器对象。
 Div对象本身是占据整行的一种对象,不允许其它对象与之共存一行中;

 PS:XHTML中的对象类型:
       block块状对象-当前对象显示为一个方块。默认显示状态下,它将占据整行,其它的对象只能在下一行显示。
       in-line行间对象(内联对象)-它允许下一个对象与之共享一行显示。

一列固定宽度、一列宽度自适应
 #layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;margin:0px auto;}
 #layout{background-color:#cccccc;border:2px solid #333333;width:80%;height:300px;}

 

二列固定宽度、二列宽度自适应
 #left{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;float:left;}

 

 #left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:70%;height:300px;float:left;}

 

两列右列宽度自适应 
 #left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;height:300px;}

 

二列固定宽度居中
 #layout{margin:0px auto;width:408px;}
 #left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}

 

 <div id="layout">
  <div id="left">Left</div>
  <div id="right">Right</div>
 </div>

 

三列浮动中间列宽度自适应
     #left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;positon:absolute;top:0px;left:0px;}
    #right{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;right:0px;top:0px;}
    #center{background-color:#cccccc;border:2px solid #333333;height:300px;margin-left:104px;margin-right:104px;}
 
 <div id="left">Left</div>
 <div id="center">center</div>
 <div id="right">right</div> 

 

   Clear 浮动:

     #left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;clear:float;}

 

高度自适应
     一个对象的高度是否可以使用百分比显示,取决于对象的父级对象。
 #left{background-color:#cccccc;width:300px;height:100px;float:float;}

 

盒模型详解(Box Model)
 盒模型-是由一组属性值组合而成;包括:高度、宽度、内边距(padding)、外边距(margin)、边框(border)
 ie6/ie7/firefox的最终宽度=左外边距 + 左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽 + 右外边距

深入浮动(Float)
 一种常用的布局方式,能够改变页面中对象的前后流动顺序,使排版更具有良好的伸缩性
 文档流-对于一个HTML网页,body元素下的任意元素,根据其前后顺序,组成一个个上下关系
 浮动布局打破“文档流”模式;
 何时选用浮动定位:对分辨率及内容大小的适应能力有较强要求。

 

绝对定位与相对定位
 绝对定位-通过设置对象的top、right、bottom和left四个方向的边距值来实现

 #a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px

0px;float:left;}
 #b{position:absolute;top:80px;left:100px;z-index:1;}
 #d{position:absolute;top:80px;left:210px;z-index:0;}

 

 相对定位使得被设置元素保持与其原始位置相对,并不破坏其原始位置的信息
 占位相对定位
 #a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px

0px;float:left;}
 #b{position:relative;left:50px;top:50px;}


 不占位的相对定位
 #divGroup{margin:50px 0 0 50px;position:relative;border:1px solid #000;width:400px;height:200px;}
 #a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px

0px;float:left;}
 #b{position:absolute;left:100px;right:100px;}

分享到:
评论

相关推荐

    HTML基本布局定位

    通过合理的布局和定位,可以有效地提高用户体验,使得网页更加美观且易于使用。 #### 二、网页基本结构 网页的基本结构通常包括以下几个部分: 1. **`&lt;head&gt;`**:包含文档的元数据,如字符集设置、标题等。 2. **...

    CSS网页布局教程:绝对定位和相对定位

    绝对定位和相对定位是两种常用的定位技术,它们在网页设计中扮演着至关重要的角色。本教程将深入探讨这两个概念,以及如何在实践中有效利用它们。 ### 绝对定位 绝对定位允许一个元素相对于其最近的非静态定位祖先...

    CSS布局实例[绝对定位:一栏固定,一栏自适应]

    本实例聚焦于一种常见的布局模式:一栏固定宽度,另一栏自适应宽度,通常应用于内容展示和侧边栏导航等场景。这种布局通过CSS的绝对定位技术来实现,下面我们将详细探讨这一技术。 首先,我们了解基本的CSS布局模型...

    Dw网页布局和定位技术PPT课件.pptx

    表格适合数据展示和简单的布局,框架适用于需要多个独立内容区域的情况,而层则提供更自由的元素定位和交互设计。在专业网站设计中,色彩搭配、布局结构以及对各种布局技术的运用都会直接影响用户体验和网站的整体...

    固定定位布局

    固定定位布局是网页设计中的一种常见布局方式,它在CSS(层叠样式表)中扮演着重要的角色。这种布局模式允许元素的位置独立于文档流,即使在页面滚动时也能保持在屏幕上的固定位置。这对于创建导航栏、侧边栏、悬浮...

    Dw网页布局和定位技术PPT学习教案.pptx

    Dreamweaver(简称DW)是一款常用的网页设计工具,提供了多种布局和定位方法,如表格、层(Layer)以及框架(Frame)。这些技术都有各自的特点和适用场景。 1. **表格布局**:表格是最基础的布局技术,可以通过表格...

    css布局定位.zip

    本资料包“css布局定位.zip”可能包含了一系列有关CSS布局定位的教程、示例代码和实践指南。下面,我们将深入探讨这个主题。 首先,CSS布局的基础概念包括盒模型、定位模式和流体布局。盒模型是指每个HTML元素都被...

    js的一些定位方法,常用于页面布局的使用

    以上介绍了四种JavaScript中常用的页面布局定位方法:`getLeft`、`getTop`、`getHeight` 和 `getWidth`。这些方法在实际开发中非常有用,可以帮助开发者更好地控制页面元素的位置和尺寸,从而实现更灵活、更美观的...

    深入理解css布局之定位与浮动

    在CSS布局中,定位和浮动是两个非常关键的概念,它们能够帮助开发者实现复杂的网页布局和设计效果。本文将详细介绍这两个概念以及它们在实际应用中的工作原理。 1. **文档流** - **文档流** 是网页元素按照HTML...

    1.05 css定位布局

    在 CSS 中,定位(position)是指元素在网页中的位置和布局方式。CSS 提供了多种定位方式,包括 static、relative、absolute、fixed 等。不同的定位方式将元素在网页中的位置和布局方式进行调整。 ### 5.1 定位...

    Android 五大布局之(一) 线性布局和相对布局

    相对布局,相比之下更为复杂,但提供了更高级的对齐和定位选项。在相对布局中,子视图的位置相对于其他子视图或父布局的边缘来确定,通过`android:layout_alignParentTop`、`android:layout_toRightOf`等属性实现。...

    css-layout-and-positioning-css布局与定位

    在网页设计中,CSS(Cascading Style Sheets)...在“css-layout-and-positioning-master”这个压缩包中,可能包含了一系列关于CSS布局与定位的实例和教程,通过学习和操作这些文件,你可以更好地理解和应用这些概念。

    Div CSS网站布局视频教程第10课_理解CSS定位与div布局

    7. **div布局**:div是HTML中最常用的布局容器,通过CSS设置div的宽高、定位和浮动,可以创建复杂的多列布局、响应式布局等。 8. **Flexbox布局**:虽然不是传统div布局的一部分,但现代CSS中Flexbox(弹性盒模型)...

    网页制作中层相对定位的实现方法

    此外,还可以通过清空`left`和`top`属性值的方式,让层根据其上一级元素的位置自动调整,从而实现相对定位的效果。 ### 2. 利用菜单实现层相对定位的设置 在网页设计软件中,如Dreamweaver等,可以通过菜单选项来...

    Android线性布局和相对布局的界面效果

    相对布局则更加灵活,它允许子视图相对于其他子视图或布局边缘定位。相对布局的主要属性有`layout_alignParent`系列、`layout_toLeftOf`、`layout_toRightOf`、`layout_above`、`layout_below`等。这些属性使得...

    HTML页面简单布局,页面布局分布与定位浮动

    HTML页面简单布局,页面布局分布与定位浮动

    div+css布局大全

    4. **定位机制**:CSS提供了多种定位机制,包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认定位,其他三种定位则允许开发者精确控制元素的位置。 5. **浮动布局**:在早期的Web开发中,浮动布局...

    Dw网页布局与定位技术PPT课件.pptx

    - **表格的定位**:在DW的布局视图下,可以直接绘制表格和单元格,这种方式非常适合进行精细调整。 #### 二、利用表格进行数据的规则排列 - **导入表格式数据**:对于已经整理好的数据列表,可以直接通过“插入/...

    html+css:主要运用了flex布局和绝对定位

    绝对定位是CSS定位模型的一部分,通过设置`position`属性为`absolute`,元素会脱离正常文档流,然后通过`top`, `bottom`, `left`和`right`属性相对于最近的非 static 定位祖先元素进行定位。如果找不到这样的祖先,...

Global site tag (gtag.js) - Google Analytics