`
jinhonglin001
  • 浏览: 15108 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

css的学习(二)

 
阅读更多



      css定位属性(Positioning)允许对元素进行定位

     css为定位和浮动提供了一些属性,利用这些属性可以建立列式布局,将布局的一部分和另一部分重叠。

      css有三种基本的定位机制:普通流、浮动流、绝对定位

      css position属性有四种不同类型的定位

      1、static

       元素框正常生成,

       2、relative

       元素框偏移某段距离,元素仍保持定位前形状,原本空间保留

      3、absolute

       元素从文档流完全删除,原本空间关闭,定位后生成一个块级框。

      4、fixed

       类似于absolute

相对定位:

<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>


<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>

<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

<p>相对定位会按照元素的原始位置对该元素进行移动。</p>

<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>

<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>


 结果:

这是位于正常位置的标题

这个标题相对于其正常位置向左移动

这个标题相对于其正常位置向右移动

相对定位会按照元素的原始位置对该元素进行移动。

样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。

样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

 

 

绝对定位:

<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位,元素可以放置到页面上的任何位置。
下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>


 结果:

 

 

 

 

 

  • 大小: 7.2 KB
分享到:
评论

相关推荐

    css样式工具 css学习工具

    本篇文章将围绕“CSS样式工具”和“CSS学习工具”这两个核心概念,详细介绍相关知识点。 一、CSS基础知识 1. 选择器:CSS选择器是用于选取HTML元素的方式,例如标签选择器(如`p`)、类选择器(如`.myClass`)和ID...

    CSS学习手册,CSS学习

    **CSS学习手册** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义网页元素的样式,包括颜色、字体、布局以及页面的呈现方式。本手册将帮助初学者深入理解和掌握CSS的基本概念和技术...

    CSS学习经典教程

    【CSS学习经典教程】是一份专为初学者和有一定基础的学习者设计的教程,旨在帮助他们深入理解并熟练掌握CSS(层叠样式表)技术。CSS是网页设计中不可或缺的一部分,用于控制网页元素的布局、颜色、字体、大小等视觉...

    css学习手册

    《CSS学习手册》 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它赋予了HTML或XML文档以样式和布局。本手册旨在深入解析CSS的相关知识,帮助初学者快速上手并掌握其核心概念。 一、CSS基础 ...

    css学习心得内容包括了所有css样式调整

    在这个"css学习心得"中,我们将详细探讨CSS的各个方面,帮助开发者更好地理解和应用这一技术。 首先,CSS的基础知识是必不可少的。这包括选择器,如类选择器(.class)、ID选择器(#id)和元素选择器(element),...

    CSS学习帮助文档(chm格式)

    这个“CSS学习帮助文档(chm格式)”显然是一个专门针对CSS技术的综合资源,包含了关于样式设计的各种信息,旨在帮助用户深入理解和掌握CSS。 **CSS基础** CSS的基础概念包括选择器、属性和值。选择器用于匹配HTML...

    CSS学习资料,初级

    本资源包“CSS学习资料,初级”专为初学者设计,旨在提供一个易于理解的学习平台,帮助初学者快速掌握CSS的基础知识。 **一、CSS简介** CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如...

    css学习大全(包括css生成器,各种经典样式,css学习文档)

    这个压缩包文件看起来是一个全面的CSS学习资源集合,包含了CSS生成器、各种经典的CSS样式示例以及CSS的学习文档。接下来,我们将深入探讨这些知识点。 首先,CSS生成器是一个在线工具,它允许用户通过图形用户界面...

    CSS学习 CSS+XHTML

    在"CSS学习"这个主题中,我们需要探讨以下几个关键知识点: 1. **CSS基础**:CSS的基本语法包括选择器、属性和值。选择器用于指定要应用样式的元素,比如`p`代表所有段落,`.class`代表具有特定类名的元素,`#id`...

    DIV+CSS学习文档

    【DIV+CSS学习文档】 网页设计与开发领域中,`DIV+CSS`是一种常见的布局技术,它极大地提升了网页的可维护性和效率。本学习文档旨在深入解析`DIV+CSS`的核心概念,帮助初学者理解并掌握这一技术。 一、什么是DIV?...

    css经典学习笔记.zip

    综上所述,《CSS经典学习笔记》旨在提供一个全面的CSS学习路径,无论你是初学者还是有经验的开发者,都能从中受益,提升你的CSS技能和网页设计能力。通过深入实践和不断探索,你会发现CSS不仅可以打造出美观的界面,...

    一个css学习打包网站

    这个名为“一个css学习打包网站”的资源,显然是为了帮助学习者深入理解和掌握这一技术。 首先,CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。它的主要功能是分离网页内容和表现,...

    css学习比较不错的资料

    这篇详尽的指南将针对标题"css学习比较不错的资料"和描述中的内容,提供关于CSS的基础知识,旨在让初级水平的学习者也能轻松理解和掌握。 首先,CSS是Web设计的核心技术之一,它负责定义网页的外观、布局和结构。...

    学习CSS必备 5日精通CSS EXE电子书.rar

    - Grid布局:学习CSS网格系统,用于创建二维布局。 5. CSS响应式设计: - 媒体查询:利用@media规则针对不同设备和屏幕尺寸设置不同的样式。 - 移动优先和流式布局:理解如何构建适应各种屏幕大小的网站。 6. ...

    DIV+css学习 精通CSS实例

    本教程“DIV+CSS学习 精通CSS实例”旨在帮助初学者掌握这一关键技术,通过20个精心设计的实例,深入浅出地讲解了CSS的布局原理和实际应用。 首先,我们要理解什么是CSS。CSS(Cascading Style Sheets)层叠样式表,...

    CSS学习手册

    **CSS学习手册** 在网页设计领域,层叠样式表(Cascading Style Sheets,简称CSS)是不可或缺的一部分,它赋予HTML或XML文档以视觉样式,让网页内容更加丰富多彩且易于维护。作为史上最全的CSS学习手册,我们将深入...

    电脑css学习教程电脑css学习教程

    电脑CSS学习教程是针对想要深入理解和掌握CSS技术的初学者或进阶者设计的一系列学习资料。 在CSS的学习过程中,你需要了解以下几个核心概念: 1. **选择器(Selectors)**:选择器用于定位HTML或XML文档中的特定...

    精通CSS第二版、CSS那些事、CSS权威指南 第3版

    这三本书合在一起,构成了一个全面的CSS学习路径。从基础到高级,从理论到实践,从解决常见问题到探索前沿技术,它们都能提供丰富的知识和洞察。无论你是刚开始接触CSS,还是想要提升现有技能,这些资源都将极大地...

    css学习《CSS设计彻底研究》

    以下是根据标题、描述以及压缩包文件名称所涉及到的CSS学习的相关知识点: 1. **CSS基础入门**: - **选择器**: CSS的核心在于选择器,如类选择器(.class)、ID选择器(#id)、元素选择器(element)、属性选择器...

Global site tag (gtag.js) - Google Analytics