css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐

Posted 知其黑、受其白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐相关的知识，希望对你有一定的参考价值。

阅读目录

CSS 布局 – Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

注意：overflow 属性只工作于指定高度的块元素上。

注意：在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

overflow: visible

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div 
            background-color: #eee;
            width: 220px;
            height: 50px;
            border: 1px dotted black;
            overflow: visible;
        
    </style>
</head>
<body>

    <div id="overflowTest">
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
    </div>

</body>
</html>

overflow: hidden

如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div 
            background-color: #eee;
            width: 220px;
            height: 50px;
            border: 1px dotted black;
            overflow: hidden;
        
    </style>
</head>
<body>

    <div id="overflowTest">
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
    </div>

</body>
</html>

overflow: scroll

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div 
            background-color: #eee;
            width: 220px;
            height: 150px;
            border: 1px dotted black;
            overflow: scroll;
        
    </style>
</head>
<body>

    <div id="overflowTest">
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
    </div>

</body>
</html>

overflow: auto

auto 值类似于 scroll，但是它仅在必要时添加滚动条：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div 
            overflow: auto;
        
    </style>
</head>
<body>

    <div id="overflowTest">
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
    </div>

</body>
</html>

verflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div 
            overflow-x: hidden; /* 隐藏水平滚动栏 */
            overflow-y: scroll; /* 添加垂直滚动栏 */
        
    </style>
</head>
<body>

    <div id="overflowTest">
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
        <p>这里的文本内容会溢出元素框。</p>
    </div>

</body>
</html>

所有 CSS Overflow 属性

属性描述
overflow规定如果内容溢出元素框会发生什么情况。
overflow-x规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y指定在元素的内容区域溢出时如何处理内容的上/下边缘。

CSS Float 浮动

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

   left – 元素浮动到其容器的左侧
  right – 元素浮动在其容器的右侧
   none – 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit – 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img 
            float: right;
        
    </style>
</head>
<body>

    <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="3.jpg" width="95" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    ...
    </p>

</body>
</html>

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .thumbnail 
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        
    </style>
</head>
<body>

    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="3.jpg" width="107" height="90">
    ...

</body>
</html>

清除浮动 – 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

什么是浮动布局

当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

浮动布局优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。

另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block 还是有一些区别的，第一个就是关于横向排序的时候，float 可以设置方向而 inline-block 方向是固定的；

还有一个就是 inline-block 在使用时有时会有空白间隙的问题。

浮动布局缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清除浮动的方式

1、添加额外标签

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

2、父级添加 overflow 属性，或者设置高度

<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>

3、建立伪类选择器清除浮动（推荐）

//在css中添加:after伪元素
.parent:after
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;

<div class="parent">
    <div class="f"></div>
</div>

CSS 布局 – 水平 垂直居中对齐

要水平居中对齐一个元素(如 <div> ), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .center 
            margin: auto;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
        
    </style>
</head>
<body>

    <div class="center">
        <p>div 元素是居中的</p>
    </div>

</body>
</html>

注意：如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .center 
            text-align: center;
            border: 3px solid green;
        
    </style>
</head>
<body>

    <h2>文本居中对齐</h2>
    <div class="center">
        <p>文本居中对齐。</p>
    </div>

</body>
</html>

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img 
            display: block;
            margin: 0 auto;
        
    </style>
</head>
<body>

    <img src="3.jpg" alt="Paris" style="width:40%">

</body>
</html>

左右对齐 – 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .right 
            position: absolute;
            right: 0px;
            width: 300px;
            border: 3px solid #73AD21;
            padding: 10px;
        
    </style>
</head>
<body>

    <div class="right">
        <p>人活得是心情，生活是一种态度~</p>
    </div>

</body>
</html>

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。
如果容器元素（在我们的案例中是 <div class=”container”> ）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。

这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

<!DOCTYPE html>
<html>
<
以上是关于css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐的主要内容，如果未能解决你的问题，请参考以下文章
 

 CSS样式表代码布局基础教程


 CSS 网页布局基础


 css [CSS静态布局]默认情况下使您的布局快速和静态。在每个元素的基础上启用基于内容的大小调整。 #CSS #tips


 一HTML和CSS基础--网页布局--实践


 css的定位


 前端基础CSS 属性