您好，欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题

• 首 页
• jrs看球网直播吧
• 低调看直播体育app软件下载
• 低调看体育直播
• 数据库jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 设计jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 操作系统
• 网站运营
• 手机学院
• 开网店jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 软件jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 信息工程

ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码

当前位置：首页 >> 低调看体育直播 >> CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 >> position属性 CSS的position属性完全解析

栏目分类

• HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• Dreamweaverjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• FrontPagesjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• web前端

position属性热门排行

• css3 svg 背景图 data:image/svg+xml;base64
• Sublime text3配置LiveReload 实时预览、无需刷新
• vscode 配置 markdownmd 预览
• 纯css实现刻度尺列表样式
• 【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化
• webstorm增加less开发插件
• 很漂亮的用户登录界面HTML模板
• Frozen UI中提取的半像素边框
• 中英文字体对照表
• 使用纯CSS实现发抖的效果

position属性最近更新

• 高德地图WEB版基础控件展示 原创
• CSS实现div的全屏自适应显示
• 一份纯CSS loading动画效果代码示例
• css 实现文字过长自动隐藏功能
• 详解CSS3 rem设置字体大小 jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播
• 解决css中hover做遮盖罩闪动问题推荐
• CSS: hover选择器的使用详解
• 20 个 CSS 高级技巧汇总推荐
• CSS实现图片背景填充的六边形的示例代码
• css实现六边形图片的示例代码
• 浅谈css3中的渐进增强和优雅降级
• 浅谈css3新单位vw、vh、vmin、vmax的使用详解
• CSS经典三栏布局方案（6种方法）
• 浅谈css3中calc在less编译时被计算的解决办法
• css解决font-weight:blod跳动问题的解决

position属性 CSS的position属性完全解析(3/6)

来源：网络整理     时间:2016-06-20     关键词:position属性

本篇文章主要介绍了"position属性 CSS的position属性完全解析"，主要涉及到position属性方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 一、定位基本原理对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓po...

1.   
2.     
3.       
4.         
5.      <>"text/css" media="screen">   
6.        body { height: 8.5in }   
7.        #header {   
8.          position: fixed;   
9.          width: 100%;   
10.          height: 15%;   
11.          top: 0;   
12.          rightright: 0;   
13.          bottombottom: auto;   
14.          left: 0;   
15.        }   
16.        #sidebar {   
17.          position: fixed;   
18.          width: 10em;   
19.          height: auto;   
20.          top: 15%;   
21.          rightright: auto;   
22.          bottombottom: 100px;   
23.          left: 0;   
24.        }   
25.        #main {   
26.          position: fixed;   
27.          width: auto;   
28.          height: auto;   
29.          top: 15%;   
30.          rightright: 0;   
31.          bottombottom: 100px;   
32.          left: 10em;   
33.        }   
34.        #footer {   
35.          position: fixed;   
36.          width: 100%;   
37.          height: 100px;   
38.          top: auto;   
39.          rightright: 0;   
40.          bottombottom: 0;   
41.          left: 0;   
42.        }   
43.         
44.       
45.       
46.      <>"header"> ...  

  

     <>"sidebar"> ...  

  

     <>"main"> ...  

  

     <>"footer"> ...  

  

   

在浏览器中显示的布局大致是：

代码中，使用了auto的属性有: #header bottom, #sidebar right, #footer top. 而对于#main呢，它的height和width都是auto，也就是说main的长宽是自适应的，自动填充可用空间，这也就好理解了，所谓的auto，也就是使元素的上右下左距离能够根据相关联的，或者说共同父元素的子元素之间的关系自动调整。

四、Normal Flow

前面提到了很多次“常规文档流”，实际上也就是W3C文档中的Normal Flow，也可称为常规流。常规流的理解，主要围绕着两个方面，分别是格式化上下文(Formatting Context)和相对定位(Relative Positioning)。

格式化上下文，按照W3C文档的解释，分为Block Formatting Contexts(BFC)和Inline Farmatting Contexts(IFC)，这里我觉得没有什么翻译成中文的必要了，因为如果我说“块级格式化上下文”的话，诸位能理解是什么意思吗，所以，叫BFC和IFC就挺好。

所谓BFC，文档上解释得挺啰嗦，简单来说，就是块级box顺次垂直排列。当然也不能这么简单，原因是块级box的内部还会产生BFC，也就是说可以嵌套。

CSS Code复制内容到剪贴板

1.   
2.   
3.        
4.            
5.         <>"utf-8" />   
6.        
7.        
8.         <>"width: 400px; height: 300px; background: blue;">   
9.             <>"width: 200px; height: 100px; background: red;">   
10.             <>"width: 100px; height: 150px; background: green;">   
11.            
12.        
13.   

但是，当块级box内部都是行内box的时候，就不会产生BFC，而是产生IFC，但只要子元素中有一个块级box，就会产生BFC。Attention! 文档中指出，如果外层块级box的overflow: visible; 的话，不会产生BFC甚至IFC。

下面来看看IFC，IFC中包括文字以及行内元素，对于文字来说，排版实际上有很多名堂，尤其是对于英文字符，或者说字母类文本，如果各位对文字排版有兴趣的话，推荐各位一部视频jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播，由美国着名IT教学网站lynda.com出品的网页设计排版视频jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播《Typography.for.Web.Designers》，至于下载方法，这里就不多说了，相信大家各显神通都有办法。

如果在行内元素中同时包含文字的话，情况会比较复杂：

CSS Code复制内容到剪贴板

1.   
2.   
3.        
4.            
5.         <>"utf-8" />   
6.        
7.        
8.         <>"width: 400px; height: 300px; background: blue; overflow: visible;">   
9.             <>"font-size: 20px;">Something   
10.             <>"display: inline-block; width: 200px; height: 100px; background: red;">   
11.            
12.        
13.   

注意观察span和div的底部对齐差异。

行内框在行框垂直方向的对齐：

行框高度总是足够包含其容纳的所有框，它可能会高于它包含的最高的框。在这里会跟vertical-align属性相关：

vertical-align可能的取值：

baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit

举一个例子：

CSS Code复制内容到剪贴板

1.   
2.   
3.        
4.            
5.         <>"utf-8" />   
6.        
7.        
8.         <>"background: grey; width: 600px;">   
9.             <>"font-size: 50px; border: 1px solid red;">hello   
10.             <>"font-size: 30px; border: 1px solid green; vertical-align: top;">world   
11.            
12.        
13.   

在水平方向上的对齐：

行内框宽度总和小于包含框的宽时，水平方向的对齐取决于text-align属性。

五、POSITION和OVERFLOW的关系
父节点设置overflow:scroll,但是不管滚动条如果滚动，但是子节点一直都不动。当父节点不设置position情况下，子节点position的四种值的分析：示例1.1:

CSS Code复制内容到剪贴板

1. body{   
2. A {overflow: scroll;}   
3. A-1 {}   
4. }  

效果：A-1会根据A滚动条的滚动而滚动分析：A-1的默认position设置为static，当position为static时，A-1元素还是遵循正常的文档流，因此A-1会受它父节点属性的影响示例1.2:

CSS Code复制内容到剪贴板

1. body{   
2. A {overflow: scroll;}   
3. A-1 {position: relative;}   
4. }  

position属性相关图片

position属性相关文章