文档章节

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
以淘宝新版首页为实例讲述网页布局

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

the3musketeers的博客
2017/12/16
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

Java程序员的书籍清单

我自己一路来,看过的书籍,都是经典,我自己也在不断地回溯,在这里分享给大家(排名不分先后,这里仅仅是我自己购买这些书籍的时间顺序排列): 《高效程序员的45个习惯 敏捷开发修炼之道》...

ChinaHYF
15分钟前
0
0
DeepMind 开源图神经网络的代码

用于支持论文《Relational inductive biases, deep learning, and graph networks》。 github A graph network takes a graph as input and returns a graph as output. The input graph has......

shengjuntu
37分钟前
1
0
python2编码详解、一

以前使用python3没觉的什么,跟着公司使用python2后被编码问题折磨的痛不欲生,好好研究了一下编码问题,参考了很多博文,加入自己的理解,这里只是对编码的介绍,下一篇是python2中编码问题...

hc321
46分钟前
1
0
基于OpenSSL的一些常用加密签名算法

目前包括:MD5、SHA512、DES、RSA加解密、RSA+MD5签名验证算法,在openssl基础上再进行封装,使用简单,头文件需要包含openssl库,可以使用vcpkg自动管理,省去繁琐的配置工程的过程。 该RSA...

LoSingSang
54分钟前
1
0
spring Data JPA

什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述【对象-关系表】之间的映射关系,并将实体对象持久化到数据库中。 为我们提供了: 1)ORM映射元数据:JPA支持XML和注解两种元...

狼王黄师傅
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部