CSS(2)——定位

最新推荐文章于 2024-10-13 17:00:37 发布

高新普惠_搬砖手

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量1k

点赞数

分类专栏： css 文章标签： css float div 浏览器 menu html

本文链接：https://blog.csdn.net/dananhai381/article/details/7763366

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS层叠样式：

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

一切皆为框

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

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

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

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

盒子模型

对于一个div或span来说，其box model基本为 margin> border> padding> content

1. 设置内边距

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位（像素、英寸、毫米或 em）或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;} 20%代表父容器的宽度计算

2. 设置边框

可以边框的style、width和color，分为 top ，right，bottom，left四部分。

样式控制则边框的显示

边框宽度有两种方法：可以指定长度值，比如 2px或 0.1em；或者使用 3个关键字之一，它们分别是 thin、medium（默认值）和 thick

透明边框：设置border-color：transparent。用处是能在你需要的使用使其可见，比如a.link是边框不显示，而a.hover是边框显示

3. 设置外边距

属性接受任何长度单位、百分数值甚至负值、

4. 外边距合并

边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

定位标记

主要使用div 和span与CSS 配合完成定位，大部分用.class和id与元素链接起来。

简单点来说就是div是换行,而span不是。

在编写网页时，尽量使用和样式无关的标记和属性，可以用CSS 实现的属性或标记效果尽量用CSS 实现，如以下属性禁用：

- Hr 使用CSS的border-top border-bottom属性和图片做这个效果会更好
- center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center，还有left、right和justify。
- menu用来创建菜单列表。它并没有ul做的完美，在因为无序列表更通用，ul高高地站在menu的尸体上。

CSS 定位机制

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

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

选择定位类型 position

position 属性值的含义：

static

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

relative

元素框偏移某个距离。

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

absolute

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

H4 { position: absolute; left: 100px; top: 43px }

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其父块是视窗本身。

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

CCS浮动

因为DIV是使用vertical进行排列，那如果要实现横向排列，就需要设置float属性。float是将一个元素移动到同一线的左边或右边

通过float属性设置，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，因此创建浮动框可以使文本围绕图像。

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

margin:0 auto;

按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。

如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。

通过margin:auto我们就可以轻易地使层自动居中了。

注意事项：

1、float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

2、float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

3、float元素谨慎指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此谨慎对float元素指定margin和padding属性。也可以使用hack方法为IE指定特别的值。关于此知识52CSS.com有详细介绍。

4、float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

区别

Position是确定框的位置；float是确定其从左到右、从右到左的排列

示例

1. 首字母浮于左侧，将首字母换成图片就是图文混排效果：

<html>

<head>

span

{

float:left;

width:0.7em;

font-size:400%;

font-family:algerian,courier;

line-height:80%;

}

</style>

</head>

<body>

<p>

<span>T</span>his is some text.

This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

<p>

在上面的段落中，文本的第一个字母包含在一个 span元素中。这个 span 元素的宽度是当前字体尺寸的 0.7倍。span 元素的字体尺寸是 400%，行高是 80%。span中的字母字体是 "Algerian"

</p>

</body>

</html>

效果：

2. 使用div+css进行布局

选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。

<html>

<head>

div.container

{

width:100%;

margin:0px;

border:1px solid gray;

line-height:150%;

}

div.header,div.footer

{

padding:0.5em;

color:white;

background-color:gray;

clear:left;

}

h1.header

{

padding:0;

margin:0;

}

div.left

{

float:left;

width:160px;

margin:0;

padding:1em;

}

div.content

{

margin-left:190px;

border-left:1px solid gray;

padding:1em;

}

</style>

</head>

<body>

<div class="header"><h1 class="header">csscss.org</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<h2>Free Web Building Tutorials</h2>

<p>At csscss.org you will find all the Web-building tutorials you need,

from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>

<p>csscss.org - The Largest Web Developers Site On The Net!</p></div>

</div>

</body>

</html>

效果