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 默认值。允许浮动元素出现在两侧。
相关推荐
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
本人整理的css定位
normalize-rails, Normalize.css 是CSS重置的替代方案 标准化 rails集成 normalize.css 和 Rails 资产管道。Normalize.css 是一个可以定制的CSS文件,使浏览器能够... 为了精确定位需要规范化的样式,我们研究了默认浏
1. CSS入门教程——CSS简介 2. CSS入门教程——基本语法(一) 3. CSS入门教程——基本语法(二) 4. CSS入门教程——加入方式 5. CSS入门教程——文字属性 ...11. CSS入门教程——定位 12. CSS入门教程——链接
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
教程名称:后盾网DIV CSS系列视频教程(24集)课程目录:0.DIVCSS视频教程之css_11.DIVCSS视频教程之position定位属性Z_INDEX堆迭顺序10 DIV CSS视频教程之css背景属性11.DIV.CSS视频教程-表格样式12.DIV.CSS视频...
什么是css定位?css定位怎么使用.docx
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
css的绝对定位,相对定位,浮动的规则。等等等
介绍了css的定位属性,position的相对定位,绝对定位等,里面的内容并不是很全,希望可以给你提供一些帮助。
CSS第六天-定位.md
CSS+Js定位与相对定位
css定位布局.html
css定位
2、css(块级元素、行内元素、标准流盒子模型、浮动定位); 3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom编程详解...
css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状,它原本所占的空间仍保留。 css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在她所在的...
CCS学习资料css项目源码和文档资料: ...position定位.pdf position源码.rar z-inde(教辅)x.pdf 圣杯布局和双飞翼布局.pdf 盒子模型(ppt).pdf 盒子模型(源代码).rar 网页布局基础.rar 页面width属性.pdf
这是我自己学习html和css定位(position)时做的练习,仅供初学者学习参考,特别是对定位理解不熟悉的可以参考一下!
css有几种定位方式,分别是如何实现定位的
*定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left right top bottom指定的坐标 (2)absolute 绝对定位: a : ...