css的入门——布局

最新推荐文章于 2021-05-31 14:55:32 发布

anjiu9433

最新推荐文章于 2021-05-31 14:55:32 发布

阅读量136

点赞数

原文链接：http://www.cnblogs.com/banbianfengxue/p/10925351.html

版权

布局

1.关于元素定位的核心概念

块级元素：换行显示，例如<h1>,<p>,<ul>,<li>

内联元素：在周围的文本之间流动，例如：<img>,<b>,<i>

构建块：CSS采用黑子模型来出来每个HTML元素，盒子可以是一个“块级”盒子，也可以是一个“内联”盒子。块级盒子另起一行显示，并且它在布局中就像是主体构建块；而内联盒子则在其周围的文本间浮动。你可以通过设置每个盒子的宽度来控制其所占用的控件。要将不同的盒子分开，你可以使用边框，外边距，内边距和背景颜色。

包含元素：如果一个块级元素位于另一个块级元素内部，那么这个外部的框架就成为包含元素或者父级元素。人们通常将若干个元素集中在一个<div>元素（或其他块级元素）中。例如，你可能将站点标头位置的所有元素集中起来，而包含这组元素的<div>元素就被称为包含元素。一个盒子可能被嵌套在其他多个块级元素中，但包含元素只能是它的直接父元素。

2.控制元素的位置

　　CSS中包含以下三种用于控制页面布局的定位机制：普通流，相对定位和绝对定位。在CSS中通过position属性表明定位机制。还可以使用float属性来让元素浮动。

普通流：每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下面。即使你指定了盒子的宽度，并且也有足够的空间让两个元素并排显示，它们也不会出现在一起，这是浏览器的默认行为。

相对定位：相对定位将一个元素从它在普通流中所处位置上移动，在他原来的位置向上，下，左，右移动。这种移动不会影响周围元素的位置，它们还是位于在普通流中所处位置。

绝对定位：绝对定位的元素的位置相对于他的包含元素。它完全脱离了普通流，也就是说不会影响到周围任何元素的位置（就像是直接忽略掉它所占据的空间）。使用绝对定位的元素随着页面的滚动而移动。

　　为了确定一个盒子的位置，可能还要使用盒子位移属性将盒子与上，下，左，右的距离告诉浏览器。

固定定位：固定定位使绝对定位的一种形式，它相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。固定定位的元素不会影响周围元素的位置，而且当页面上下滚动时，他不会移动。

浮动元素：浮动一个元素可以让其脱离普通流，并定位到其包含盒子的最左边或最右边的位置。这个浮动的元素会成为一个周围可以浮动其他内容的块级元素。

　　任何元素从普通流脱离时，盒子都会产生重叠。可以使用z-index属性来控制将哪个盒子显示在上层。

3.普通流 position：static

　　在普通流中，每个块级元素都砸下一个元素的上方。由于这是浏览器处理HTML元素的默认方式，所以你不必使用CSS属性表明元素应该出现在普通流中，但还是存在相应的语法：position：static；

<head>
    <title>static</title>
    <link rel="stylesheet" href="test01.css">
</head>
<body>
    <h1>The Evolution of the Bicycle</h1>
    <p>In 1817 Baron von Drais invented a
        walking machine that would help him get
        around the royal gardens faster ....
    </p>
</body>

body{
    width: 750px;
    font-family: Arial,Verdana, sans-serif;
    color: #665544;
}
h1{
    background-color: #efefef;
    padding: 10px;
}
p{
    width: 450px;
}

　　标题元素的width属性违背制定的情况下，你可以看到他的宽度延伸至浏览器窗口。段落的宽度被限制为450像素，尽管这些元素没有沾满整个浏览器窗口，但它们在普通流中仍然另起一行显示。

4.相对定位 position：relative

相对定位的元素以其在普通流中所处的位置为起点进行移动。例如，可以把一个元素从其在普通流中所处的位置向下移动10像素，或是向右移动20%的距离。通过将一个元素的position属性设置为relative，就可以指定该元素进行相对定位。然后使用唯一属性（top或bottom以及left或right）指定该元素需要从其普通流中的位置移动多少距离。盒子的位移属性值通常设置为像素值，百分数或em值。

<body>
    <h1>The Ecolution of the Bicycle</h1>
    <p class="example">In 1817 Baron von Drais invented a 
        walking machine that would help him get
        around the royal gardens faster...
    </p>

p.example{
    position: relative;
    top: 10px;
    left: 100px;
    background-color: red;
}

5.绝对定位 position：absolute

　　如果将一个盒子的position属性值设置为absolute，那么他就会脱离普通流，不再影响页面中其他元素的位置。盒子的唯一属性用于指定元素相对于它的包含元素应该显示在什么位置。

<body>
    <h1>The Evolution of the Bicycle</h1>
    <p>
        In 1817 Baron von Drais invented a 
        walking machine that would help him get
        around the royal gardens faster...
    </p>
</body>

h1{
    position: absolute;
    top: 0px;
    left: 500px;
    width: 250px;
}
p{
    width: 450px;
}

6.固定定位 position：fixed

　　固定定位是绝对定位的一种类型，将position属性值设置为fixed就表示固定定位。固定定位是指元素相对于浏览器窗口进行定位。因此，当用户滚动页面时，这类元素的位置保持不变。要控制使用了固定定位的盒子相对于浏览器窗口的位置，就需要使用盒子的位移属性。

<body>
    <h1>The Evolution of the Bicycle</h1>
    <p>In 1817 Baron von Drais invented a 
        walking machine that would help him get
        around the royal gardens faster...</p>
</body>

h1{
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    background-color: #efefef;
}
p{
    margin-top: 100px;
}

7.重叠元素 z-index

　　当你使用相对定位，固定定位或者绝对定位时，盒子是可以重叠的。如果盒子出现重叠，那么再HTML代码中，后出现的元素将位于页面中线出现的元素上层。如果要控制元素的层次，可使用z-index属性。该属性的值是一个数字，数值越大，元素的层次就越靠前。

8.浮动元素 float

　　float属性允许妮将普通流中的元素在它的包含元素内尽可能地向左或向右排列。位于包含元素中的其他内容会在浮动元素的周围流动。使用float属性的同时，你还应该使用width属性来指定浮动元素的宽度，否则，显示效果就会不一致，浮动的盒子可能会沾满其包含元素的整个宽度。

<body>
    <h1>The Evolution of the Bicycle</h1>
    <blockquote>"Life is like riding a Bicycle.
        To keep your balance you must keep
        moving"--Albert Einstein</blockquote>
        <p>In 1817 Baron von Drais invented a ...</p>
</body>

blockquote{
    float: right;
    width: 275px;
    font-size: 130%;
    font-style: italic;
    font-family: Georgia, Times, serif;
    margin: 0px 0px 10px 10px;
    padding: 10px;
    border-top: 1px solid #665544;
    border-bottom: 1px solid #665544;
}

9.使用浮动将元素并排

　　许多布局都将盒子并排到一起。通常利用float属性来完成这些布局。当元素浮动时，相应盒子的高度就会对后面元素的位置产生影响。为解决这一问题，就需要使用clear属性。

10.清除浮动 clear

　　clear属性用于表明一个盒子的左侧或者右侧不允许浮动元素（在同一个包含元素内）。该属性可以选用同以下值：

left：盒子的左侧不能接触同一个包含元素的其他任何元素。

right：盒子的右侧不能接触同一个包含元素内的其他任何元素。

both：盒子的左侧和右侧都不能接触同一个包含元素内的其他任何元素。

none：盒子的两侧可以接触元素。

11.利用浮动来创建多列式布局

　　许多网页都采用多列式的设计。这种设计的每一列都用一个<div>元素表示。下面三种属性用来将多个列并排到一起。

width：该属性用于设置列宽。

float：该属性用于多列并排。

margin：该属性用于在列之间创建空隙。

　　每个<div>元素都可以包含标题，段落，图像以及其他<div>元素。

12.固定宽度布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="test06.css">
    <title>Document</title>
</head>
    <body>
        <div id="header">
            <h1>Logo</h1>
            <div id="nav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Products</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="feature">
                <p>Feature</p>
            </div>
            <div class="article column1">
                <p>Column One</p>
            </div>
            <div class="article column2">
                <p>Column Two</p>
            </div>
            <div class="article column3">
                <p>Column Three</p>
            </div>
        </div>
        <div id="footer">
            <p>&copy;Copyright 2019</p>
        </div>
    </body>
</html>

body{
    width: 960px;
    margin: 0 auto;
}
#content{
    overflow: auto;
    height: 100%;
}
#nav,#feature,#footer{
    background-color: #efefef;
    padding: 10px;
    margin: 10px;
    text-align: center;
}
li{
    display: inline;
    padding: 5px;
}
.column1,.column2,.column3{
    background-color: #efefef;
    width: 300px;
    float: left;
    margin: 10px;
}
p{
    text-align: center;
}
h1{
    text-align: center;
}

13.流体布局示例

HTML语句同上

body{
    width: 90%;
    margin: 0 auto;
}
#content{
    overflow: auto
}
#nav,#feature,#footer{
    margin: 1%;
}
.column1,.column2,.column3{
    width: 31.3%;
    float: left;
    margin: 1%;
}
.column3{
    margin-right: 0%;
}
li{
    display: inline;
    padding: 0.5em;
}
#nav,#footer{
    background-color: #efefef;
    padding: 0.5em 0;
}
#feature,.article{
    height: 10em;
    margin-bottom: 1em;
    background-color: #efefef;
}
p,h1,#nav{
    text-align: center;
}