css_文档流、display、overflow

1) 文档流

将窗体自上而下分成一行一行, 并在每行中按从左至右的顺序排放元素,即为文档流 ;

l CSS的定位机制有3种：普通流、浮动和定位 ;

l 文档流：从上到下，从左到右，一个挨一个的简单的正常布局 ;

l 定位：（position）

Static：保持文档流 ;

Relative：相对本身的原始位置发生位移且保持文档流，占空间 ;

Absolute：脱离文档流，不占空间且相对于其包含块来定位 ;

l 浮动：（flaot）脱离文档流，不占空间 ;

 

2) display属性

简单的说就是控制元素显示的方式。

常用的属性值有：
　　 none ：此元素不会被显示。
　　 block ：此元素将显示为块级元素，此元素前后会带有换行符。
　　 list-item ：此元素会作为列表显示。
　 Inline： 默认值此元素会被显示为内联元素，元素前后没有换行符。

注：还有一个Inline-block属性，和block属性一样，都是将行内元素升级为块级元素，但是不同的是使用block后，标签会换行。使用inline-block后，标签不会换行。

 

例：

一个a标签自身是不能添加高宽的。

<a href="#">我是一个小小按钮</a>

a{

width:200px;

height:40px;

font-size:14px;

margin: 100px auto;

background:#69F;

color:#fff;

 

/*将a标签行内元素升级为块级元素*/

display:block;

 

/*左右居中*/

text-align:center;

/*设置高度，达到垂直居中的目的*/

line-height:40px;

/*去掉a标签的下划线*/

text-decoration:none;

/*边框改为圆形*/

border-radius:5px;

}

a:hover{background:#66F;}

 

 

 

当没有display：block;时，如下：

 

既没有居中显示，也没有高和宽。

 

3) overflow属性

overflow规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。

    如果值为 scroll，不论是否需要用户代理都会提供一种滚动机制;有可能即使元素框中可以放下所有内容也会出现滚动条;

参数介绍：

值	说明
visible	内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，但是浏览器不会显示供查看内容的滚动条
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	由浏览器决定如何显示。如果需要，则显示滚动条

如：

<div class="overflow">

Mobile Everything! 「移」生万物

2009年以来，GMIC一直走在移动互联网行业最前端，已经成为中国乃至全球最具影响力和话语权的行业大会。2016年4月28日到30日，一起与自全球超过60个国家的25000+名与会者，聆听领袖的观点、向业界宣传你的品牌、与最前沿的创新者碰撞思想，并建立与世界连接的纽带。

北京·国家会议中心 | 2016年4月28日-30日

</div>

.overflow{width:300px;height:150px;border:1px solid red;margin:100px auto;font-size:18px;}

效果：因为框内装不下，所以溢出了：

 

使用hidden：

.overflow{width:300px;height:150px;border:1px solid red;margin:100px auto;font-size:18px;

overflow:hidden;}

 

使用scroll：不论文字多少，一定会有滚动条。

.overflow{

width:300px;height:150px;border:1px solid red;margin:100px auto;font-size:18px;

overflow:scroll;

}

 

使用auto：需要时显示滚动条

.overflow{

width:300px;height:150px;border:1px solid red;margin:100px auto;font-size:18px;

overflow:auto;

}