`

四.CSS定位

 
阅读更多

1.定位
(1)CSS 定位和浮动
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
(2)一切皆为框 display
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
none    此元素不会被显示。也不占用空间           *
block   此元素将显示为块级元素,此元素前后会带有换行符。           *
inline  默认。此元素会被显示为内联元素,元素前后没有换行符。           *
inline-block    行内块元素。(CSS2.1 新增的值)
list-item   此元素会作为列表显示。
run-in  此元素会根据上下文作为块级元素或内联元素显示。
table   此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table    此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group     此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group  此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group  此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row   此元素会作为一个表格行显示(类似 <tr>)。
table-column-group  此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column    此元素会作为一个单元格列显示(类似 <col>)
table-cell  此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption   此元素会作为一个表格标题显示(类似 <caption>)
inherit     规定应该从父元素继承 display 属性的值。
(3)CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
(4)CSS position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 属性值的含义:

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。   

 

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
相对于其正常位置进行定位,生成相对定位的元素。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。                                               

 

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
相对于 static 定位以外的第一个父元素进行定位,生成绝对定位的元素。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

 

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 

相对于浏览器窗口进行定位,生成绝对定位的元素。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

其他定位有用属性!
left:设置定位元素左外边距边界与其包含块左边界之间的偏移。auto 默认值/%百分比可用负值/px,cm等单位可用负值
top:设置定位元素的上外边距边界与其包含块上边界之间的偏移。
right:设置定位元素右外边距边界与其包含块右边界之间的偏移。
bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移。
clip:clip 属性剪裁绝对定位元素。clip:rect(0px,60px,200px,0px);不伸拉元素
overflow:规定当内容溢出元素框时发生的事情。visible溢出(默认值)/hidden隐藏/scroll滚动条/auto滚动条
vertical-align:属性设置元素的垂直对齐方式。baseline基线上/sub对齐文本下标/super对齐文本上标/top与行中最高元素的顶端对齐/text-top与父元素字体的顶端对齐/middle父元素的中部/bottom与行中最低的元素的顶端对齐/text-bottom与父元素字体的底端对齐/%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
z-index:设置元素的堆叠顺序。默认的 z-index 是 0。Z-index -1 拥有更低的优先级。用于将图片放到文字后做背景。
img.x {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1
}   

2.相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。
然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
注意:只是原本占据的空间仍然存在,会覆盖后面的元素
#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

3.绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
注意:绝对定位后,原本占据的空间不存在了,原来的框属性失效了。
#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

4.浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
(1)CSS 浮动 float
left    元素向左浮动。
right   元素向右浮动。
none    默认值。元素不浮动,并会显示在其在文本中出现的位置。
(2)行框和清理clear
left    在左侧不允许浮动元素。
right   在右侧不允许浮动元素。
both    在左右两侧均不允许浮动元素。
none    默认值。允许浮动元素出现在两侧。

分享到:
评论

相关推荐

    bootstrap-theme.css.map

    这样,当在浏览器中遇到问题时,开发者可以在开发者工具中查看源映射,找到原始的CSS源文件,而不是压缩后的代码,从而方便地定位和修复问题。 总的来说,Bootstrap主题CSS源映射文件是开发和维护Bootstrap主题网站...

    CSS实验室.rar

    1.CSS背景试验1.doc 2.CSS背景试验2.doc 3.CSS颜色.doc ...10.CSS绝对定位.doc 11.CSS相对定位.doc 12.CSS垂直定位.doc 13.CSS尺寸.doc 14.CSS显示.doc 15.CSS可视性.doc 16.CSS浮动.doc 17.CSS清除浮动.doc

    网页布局-style.css

    "div+css"通常指的是利用`div`元素配合CSS定位技术来创建网页布局。以下是一些关键的CSS属性和技术: 1. **盒模型**:CSS盒模型是理解布局的基础,它包括内容(content)、内边距(padding)、边框(border)和外边...

    Web应用安全前端开发视频.zip

    22.CSS定位-1.mp4 23.CSS定位-2.mp4 24.CSS浮动.mp4 25.CSS项目-1.mp4 26.CSS项目-2.mp4 27.JavaScript简介.mp4 28.JavaScript基础.mp4 29.JavaScript变量.mp4 30.JavaScript数字.mp4 31.JavaScript字符串.mp4 ........

    joplin-theme:我的Joplin主题文件,包括userchrome.css和userstyles.css

    - **理解CSS选择器**: 学习并理解CSS选择器是如何定位HTML元素的。这将帮助你精确地找到需要修改的样式。 - **分析默认样式**: 查看Joplin的默认样式,了解哪些CSS规则控制了你想要改变的部分。 - **修改CSS规则**...

    2.CSS复习.zip

    4. **定位机制**:CSS提供了相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和静态定位(static)四种定位方式,以满足不同布局需求。 5. **Flexbox布局**:Flexbox是一种用于创建灵活、响应式的...

    CSS实例 OReilly.CSS.Cookbook (第二版)

    《CSS实例:OReilly.CSS.Cookbook(第二版)》是一本专注于CSS(层叠样式表)实践应用的专业书籍,旨在帮助Web开发者通过实际案例提升网页设计的可用性和美观度。这本书涵盖了丰富的CSS技术,从基础到高级,旨在使...

    SitePoint - Everything.You.Know.About.CSS.Is.Wrong.2008.rar

    四、浮动与定位 在CSS布局中,浮动和定位是两个至关重要的概念。书里详细讲解了浮动元素如何影响周围的元素,以及如何使用相对、绝对和固定定位来控制元素的位置。同时,也提醒读者注意清除浮动和防止布局塌陷的策略...

    曹鹏CSS视频教程-04.CSS规则解析.rar

    2. cpcss04.swf:这是一个SWF文件,很可能是曹鹏CSS教程的第四部分视频内容,以动画或交互式形式展示CSS规则解析的过程。 3. 下载说明.txt:这个文本文件可能包含了下载和使用教程的步骤,包括如何解压文件、播放...

    OReilly.CSS.The.Missing.Manual

    此外,CSS的定位机制是其核心部分,包括静态定位、相对定位、绝对定位和固定定位。书中会详细解释每种定位方式的工作原理,以及如何通过`position`、`top`、`bottom`、`left`、`right`等属性实现精确控制。 CSS的盒...

    OReilly.CSS.The.Missing.Manual.2nd.Edition

    3. **布局技巧**:讲解流体布局、网格系统、定位(相对定位、绝对定位和固定定位)以及Flexbox和Grid布局,帮助开发者实现复杂页面结构。 4. **响应式设计**:阐述如何使用媒体查询创建适应不同设备和屏幕尺寸的...

    前端项目-label.css.zip

    7. 定位:通过position属性进行绝对或相对定位。 8. 盒模型属性:如border-radius(圆角)、box-shadow(阴影)等。 通过这样的CSS文件,开发者可以精确地控制页面元素的显示,提升页面的视觉效果和交互体验。对于...

    normalize-rails, Normalize.css 是CSS重置的替代方案.zip

    normalize-rails, Normalize.css 是CSS重置的替代方案 标准化 rails集成 normalize.css 和 Rails 资产管道。Normalize.css 是一个可以定制的CSS文件,使浏览器能够... 为了精确定位需要规范化的样式,我们研究了默认浏

    Head.First.HTML.with.CSS.and.XHTML

    - **定位**:绝对定位、相对定位和固定定位可以精确控制元素的位置。 #### 七、高级CSS技巧 - **响应式设计**:使用媒体查询和流式布局等技术使网站适应不同屏幕尺寸。 - **动画效果**:通过CSS3可以为元素添加...

    品优购简单html+css.zip

    【标题】"品优购简单html+css.zip"是一个压缩包文件,包含了电子商务网站“品优购”的初级HTML和CSS代码。这个作业可能是为初学者设计的,让他们了解如何构建一个基本的网页布局,尤其是针对电商平台。 【描述】中...

    [精通DIV.CSS网页样式与布局].何丽.扫描版

    这本书的高清扫描版提供了完整的目录,方便读者快速定位到所需内容。 在网页设计中,DIV元素是一种通用的容器,用于组织和划分网页内容。它没有特定的语义,但通过CSS可以赋予其各种样式和布局特性,使其成为构建...

    OReilly.CSS.Cookbook

    3. **定位与对齐**:书中详细讲解了静态、相对、绝对和固定定位,以及如何使用display属性和float来控制元素的排列和对齐,这对于创建复杂的页面结构至关重要。 4. **响应式设计**:随着移动设备的普及,响应式设计...

    1.css常用公共样式 与bug解决方案

    四、实战技巧与最佳实践 1. CSS预处理器(如Sass, Less):提高代码组织性,支持变量、嵌套、混合等功能,提升开发效率。 2. BEM命名规范:Block-Element-Modifier,使CSS类名更具语义化,便于理解和维护。 3. CSS...

    CSS基础教程.rar

    1. CSS入门教程——CSS简介 2. CSS入门教程——基本语法(一) 3. CSS入门教程——基本语法(二) 4. CSS入门教程——加入方式 5. CSS入门教程——文字属性 ...11. CSS入门教程——定位 12. CSS入门教程——链接

Global site tag (gtag.js) - Google Analytics