文档章节

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 布局模块

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

楠木楠
2016/12/06
84
0
[布局概念] 关于CSS-BFC深入理解

写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本...

OB丶Koro1
2017/05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nexus Repository Manager 搭建私有docker仓库

Nexus Repository Manager 搭建私有docker仓库 2018年05月08日 14:44:23 阅读数:115 1.下载nexus3的镜像: docker pull sonatype/nexus3 2.使用镜像启动一个容器: docker run -d --name n...

linjin200
9分钟前
0
0
大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术 将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
11分钟前
1
0
谷歌浏览器插件入门示例

实现:任何网址实现图片下载和获取当前域名的cookies的json字符串。 图片下载是给小白用的,可以选中批量下载,获取cookies 是为了方便程序员调试用。 获取cookies: git地址: https://gite...

NLGBZJ
13分钟前
2
0
152. Maximum Product Subarray - LeetCode

Question 152. Maximum Product Subarray Solution 题目大意:求数列中连续子序列的最大连乘积 思路:动态规划实现,现在动态规划理解的还不透,照着公式往上套的,这个问题要注意正负,需要...

yysue
14分钟前
0
0
IDEA工具 jdk,tomcat,maven 配置

设置JDK、tomcat、maven的版本 一、JDK      如果下拉列表没有,SDKS ---> + ----> 选择下载的JDK目录 ---> APPLY OK    二、tomcat 三、Maven    四、生成 git 本地创库...

君千殇520
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部