css_文档流、display、overflow

た入场券 2022-05-25 05:06 258阅读 0赞

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;\}

![20180508154142922][]

![20180508154150948][]

![20180508154158112][]

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

![20180508154318470][]

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

3) overflow属性

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

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

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

参数介绍：

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

如：

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;\}

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

![20180508155022684][]

**使用hidden：**

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

overflow:hidden;\}

![20180508155046546][]

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

.overflow\{

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

overflow:scroll;

![20180508155108464][]

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

.overflow\{

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

overflow:auto;

![20180508155130919][]

[20180508154142922]: /images/20220525/08f24f007fd54fec88ab58acbc9f5fd4.png
[20180508154150948]: /images/20220525/6ff122ac359c444c9edfca887820fc90.png
[20180508154158112]: /images/20220525/01d50f1f353141799df4c7a2c73f5902.png
[20180508154318470]: /images/20220525/b4a54bba52424ce186562a7a5ec402ca.png
[20180508155022684]: /images/20220525/95a67e34c0d7433b8358f55290e7c79d.png
[20180508155046546]: /images/20220525/dbd70d9dbde74b6c8eb355ff2f3f1463.png
[20180508155108464]: /images/20220525/f8383524e3cc4885a1fb306bc47a7fce.png
[20180508155130919]: /images/20220525/0d5245549e6f4002adf4058774dd7d62.png