HTML 学习笔记 CSS样式（定位）

CSS定位(Positioning)属性允许你对元素进行定位。

CSS定位和浮动

CSS为定位和浮动提供了一些属性，利用这些属性可以建立列式布局，将布局的一部分与另一部分重叠。还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素设置浏览器窗口本身的位置。显然这个功能非常强大。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

float 浮动会使元素脱离标准文档流

所以如果对一个行内元素使用浮动定位的话可以对这个行内元素设置宽高，因为已经脱离了标准文档流，不区分行内和块了.不用在使用display进行转换了

一旦一个元素浮动了就可以并排了，也可以接受宽高，无论他的出身(行内和块级)是什么

浮动的元素互相贴靠：

float 有字围效果浮动的元素能挡住盒子但是挡不住盒子里面的字可以看出来挡住了p盒子但是挡不住字 float 脱标贴靠字围

<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">
    <title>Document</title>
    <style type="text/css">
        div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: aqua
        }
    </style>
</head>
<body>
    <div></div>
    <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>

效果

使一个元素脱离标准文档流有三种方法:浮动，绝对定位固定定位

一切皆为框

div h1 或 p元素通常被称为块级元素它意味着这些元素显示为一块内容即 “块框” 与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

可以使用display属性改变生成的框的类型这意味着通过将display设置为block 可以让行内元素比如<a>标签表现的像块级元素一样还可以通过把display属性设置为none 让生成的元素基本没有框这样的话该框及所有内容就不在显示不占用文档中的空间。

但是另一种情况下即使没有进行显示定义也会创建块级元素这种情况发生在把一些文本添加到一个块级元素（div）的开头即使没有把这些文本定义为段落他也会被当作段落对待

<div>
some text
<p>Some more text.</p>
</div>

在这种情况下这个框被称为无名块框因为他不语专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS定位机制

CSS有三种基本的定位机制:普通流浮动和绝对定位

除非专门指定否则所有框都在普通流中定位也就是说普通流中的元素的位置由元素在HTML 中的位置决定

块级框从上到下一个接一个的排列框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置可以使用水平内边距边框外边距调整她们的间距但是垂直内边距边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度

CSS position属性

通过使用position属性我们可以选择4中不同类型的定位

static

元素框正常生成块级元素生成一个矩形框作为文档流的一部分行内元素则会创建一个或多个行框置于其父元素中。

relative:相对定位

元素框偏移某个距离元素仍保持为定位前的状况他原本所占的空间仍然保留。

absolute:绝对定位

元素框从文档流中完全删除并相对于某包含块定位包含块啃呢个是文档中的另一个元素或者是初包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：固定定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

实例：

1:相对定位

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            body {
                margin-left: 30px;
            }
            h2.pos_left {
                position: relative;
                left: -30px;
            }
            h2.pos_right {
                position: relative;
                left: 30px;
            }
        </style>
    </head>
    <body>
        <h2>这是位于正常位置的标题</h2>
        <h2 class="pos_left">这个标题相对于正常位置向左移动</h2>
        <h2 class="pos_right">这个标题相对于正常位置向右移动</h2>
        <p>相对定位会按照元素的原始位置对该元素进行移动</p>
        <p>样式"left:-20"从元素原始左侧位置减去 20像素</p>
        <p>样式 "right 20"从元素的原始左侧位置增加20像素</p>
    </body>
</html>

2:绝对定位

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            h2.pos_abs {
                position: absolute;
                top: 150px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <h2 class="pos_abs">这是带有绝对定位的标题</h2>
        <p>通过绝对定位 元素可以设置到页面上的任何位置 下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
    </body>
</html>

固定定位

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            p.pOne {
                position: fixed;
                left: 5px;
                top: 5px;
            }
            p.pTwo {
                position: fixed;
                right: 5px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <p class="pOne">一些文本</p>
        <p class="pTwo">更多的文本</p>
    </body>
</html>

使用固定定位设置图像的上边线

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            img.normal {
                position: absolute;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <img class="normal" src="img/HBuilder.png" />
        <p>一些文本 一些文本 一些文本 一些文本 一些文本 一些文本 一些文本 一些文本 一些文本</p>
        
    </body>
</html>

如果你能运行一下上面的代码你会发现图像覆盖了文本，这说明使用绝对定位的块级框已经脱离了文档流。

使用滚动条来显示元素内溢出的内容

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                overflow: scroll;
            }
            
        </style>
    </head>
    <body>
        
        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
        <div>
            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
            用户代理都会提供一种滚动机制。
            因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
        </div>

        
    </body>
</html>

overflow 有三个值 scroll 允许溢出的部分滚动显示 hidden 隐藏溢出的部分不显示 auto浏览器自己处理

设置元素的形状

<html>
    <head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            img {
                position: absolute;
                clip: rect(0px 50px 50px 30px);
            }
        </style>
    </head>
    <body>
        
        <p>clip 属性剪切了一副图像</p>
        <p><img src="img/HBuilder.png" / width="50px" height="100px"></p>    
    </body>
</html>

垂直排列图像

<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p> 

<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>

</body>

</html>