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>

HTML 学习笔记 CSS样式（定位）的更多相关文章

HTML 学习笔记 CSS样式（相对定位绝对定位）
CSS相对定位设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
HTML 学习笔记 CSS样式（边框）
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式宽度和颜色 CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
HTML 学习笔记 CSS样式（框模型）
CSS框模型( Box Model)规定了元素框处理元素的内容内边距边框和外边距的方式 CSS框模型概述可以用下面的模型图概述
HTML 学习笔记 CSS样式（链接）
我们能够以不同的方法为链接设置样式. 设置链接的样式能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...
HTML 学习笔记 CSS样式（字体）
css字体属性定义文本的字体系列大小加粗风格和变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列在css中有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
HTML 学习笔记 CSS样式（文本）
CSS文本属性可以定义文本的外观通过文本属性您可以改变文本的颜色字符间距文本对齐装饰文本对文本进行缩进等等. 缩进文本把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
HTML 学习笔记 CSS样式（背景）
背景色可以使用background-color属性为元素设置背景色这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复如果需要在页面上对背 ...
HTML 学习笔记 CSS样式（简介和语法）
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中是为了解决内容与表现分离的问题外部 ...
学习笔记 css样式
大小 width:宽度 height:高度背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...

随机推荐

设置UIImage的渲染模式：UIImage.renderingMode
设置UIImage的渲染模式:UIImage.renderingMode 着色(Tint Color)是iOS7界面中的一个.设置UIImage的渲染模式:UIImage.renderingMode重 ...
app名字后面的描述怎么加？
构建一个最新的版本更改一下名称即可
【代码笔记】iOS-单项选择框
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
【VLC-Android】LibVLC API简介（相当于VLC的MediaPlayer）
前言学新东西API很重要,这里抛砖引玉整理了一下,欢迎反馈! 声明欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over14 ...
Config文件
这个是以前的笔记. web.config文件是一个XML文件,它的根结点是<configuration>. 1<appSettings>节点主要用来放asp.net应用程序的配 ...
redis配置文件参数说明及命令操作
redis下载地址:https://github.com/MSOpenTech/redis/releases. Redis 的配置文件位于 Redis 安装目录下,文件名为redis.windows. ...
art.dialog 返回提示
<form target="_top" /> 1 如果加 target="_top" 提示跳出子页面 2 如果不加则在子页面提示
Hello BIEE
这篇文章提供了一个Hello World式的例子,讲述如何创建一个最简单的BIEE资料库.本文使用的示例数据可以在从此链接下载:http://www.zw1840.com . 目录创建资料库创 ...
MongoDB 常用故障排查工具
1.profile profiling levels: 0,关闭profile:1,只抓取slow查询:2,抓取所有数据. 启动profile并且设置Profile级别: 可以通过mongo shel ...
0006 《SQL必知必会》笔记02-计算字段与函数
1.从数据库中检索出的数据往往并不是最后要展示的格式,可以在数据库端或者客户端应用程序中完成转换和格式化,但一般说来,在数据库服务器中完成要快很多. 2.拼接字段:将几个值连接到一起构成单个值.Ora ...

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

HTML 学习笔记 CSS样式（定位）的更多相关文章

随机推荐

热门专题