文档章节

CSS布局——定位概念理解(一)

sheilacat
 sheilacat
发布于 2015/04/09 22:53
字数 1004
阅读 25
收藏 0

#positioning概念理解

##CSS 定位机制 CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

##定位体系详解 框在布局时,根据三种定位体系定位。分别是,常规流、浮动和绝对定位。 Normal flow\Floats\Absolute positioning

参见:http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

所以说浮动元素是脱离常规流的。但文档流和文本流这个概念本身不清楚,或者说没有这样的说法。有的网站上说是脱离文档流的,但有人实践得出并没有脱离文档流。

##position 属性值的含义:

###static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 ###relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 ###absolute 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 ###fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

##文档流的理解 CSS2.1标准里面Visual Formatting那一章有讲元素分为三种,floats、absolute positioned还有normal flow。

##无名块框 块级元素的文本行会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。

  • 通过display可以改变生成的框的类型,比如块级元素可以生成行内框,但它依然是块级元素,只是表现出行内元素的行为。
  • display:none与visible:hidden的区别 display设为为none,该框及其所有内容就不再显示,不占用文档中的空间;但hidden虽然隐藏了元素内容,但占用的文档空间依然存在。 ##clear属性 ###定义和用法 clear属性规定元素的哪一侧不允许其他浮动元素。 ###说明 clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 ###取值 left right both none inherit 无继承性 默认为none

© 著作权归作者所有

共有 人打赏支持
sheilacat
粉丝 34
博文 75
码字总数 35249
作品 0
长沙
程序员
私信 提问
css定位——position和float的用法详解

网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。css的布局主要涉及两个属性——position和float。它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还...

小微
2012/10/18
0
4
CSS布局说——可能是最全的

前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。 其实,我们可能经常在聊组件化...

zimo
2017/09/26
0
0
css定位——position和float的用法详解

网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。css的布局主要涉及两个属性——position和float。它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还...

丶唄売
2013/06/04
0
0
CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性...

楠木楠
2016/12/06
84
0
以淘宝新版首页为实例讲述网页布局

一、以淘宝新版首页为实例讲述网页布局 1.1 流动性(自适应)布局 自适应布局,是指页面主体部分的宽度随着浏览器宽度的大小而发生改变 优点: 1. 显示器宽度利用率高,固定宽度的布局上,宽屏...

the3musketeers的博客
2017/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
21
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
17
0
my.ini

1

architect刘源源
今天
15
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
15
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部