float、border、position属性

最新推荐文章于 2022-07-24 08:58:49 发布

solo_ocean

最新推荐文章于 2022-07-24 08:58:49 发布

阅读量645

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/solo_ocean/article/details/28454767

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

position属性：

1.static：元素正常生成，在文档中出现在它应该存在的位置

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

2.relative：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，relative对象是其父容器

<head>
<meta charset="utf-8">
<style>
#sub1 {background-color:green;height:500px;width:500px;position:relative;left:50px;}
#sub2 {background-color:red;height:200px;width:200px;position:relative;left:100px;}
</style>
</head>
<body>
<div id="sub1"> //sub1左悬浮50px
<div id="sub2"></div> //sub2是基于父容器sub1的relative100px，实际偏移50px+100px=150px
</div>
</body>

正常位置：

relative：相对定位是基于在文档中应该最在的位置（初始位置）进行定位，普通流定位的一部分

absolute：相对于最近的已定位祖先，如果没有，则基于最初的包含块，元素的位置与普通文档流无关，因此不占据空间。普通文档流的布局就像绝对定位的元素不存在时一样。（为什么黄色一定覆盖绿色？）

3.absolute

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

绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。

当设定position:absolute

如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

当设定position: relative
则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。

<head>
<meta charset="utf-8">
<style>
#sub1 {background-color:green;height:500px;width:500px;position:relative;left:50px;}
#sub2 {background-color:red;height:200px;width:200px;position:absolute;left:100px;}
</style>
</head>
<body>
<div id="sub1">//sub1左悬浮50px
<div id="sub2"></div>//sub2是基于父容器sub1的absolute100px，实际偏移50px+100px=150px
</div>
</body>

<html>

<head>
<meta charset="utf-8">
<style>
#sub1 {background-color:green;height:500px;width:500px;position:absolute;left:50px;}
#sub2 {background-color:red;height:200px;width:200px;position:absolute;left:100px;}
</style>
</head>
<body>
<div id="sub1"></div>
<div id="sub2"></div>//sub2是基于父容器body的absolute100px，实际偏移100px
</body>
</html>

4.fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

将上例中所有position都设置为fixed，结果如下：

<html>
<head>
<meta charset="utf-8">
<style>
#sub1 {background-color:green;height:500px;width:500px;position:fixed;left:50px;}
#sub2 {background-color:red;height:200px;width:200px;position:fixed;left:100px;}
</style>
</head>
<body>
<div id="sub1">
<div id="sub2"></div>//虽然sub1是sub2的父容器，但是fixed是基于浏览器窗口的，偏移仍为100px
</div>
</body>
</html>

参考：http://www.divcss5.com/rumen/r403.shtml

http://www.jb51.net/article/16461.htm

http://www.qianduan.net/css-position.html(tips:需要研究)

float属性：

• 可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加的方便。通过设置float属性来完成另一种脱离文档流的行为就是浮动，分为左、右浮动。浮动是脱离文档流的，也就是其他元素视他不见，并且它是浮在文档流元素上方。
• 浮动什么时候停止呢？
1. 当遇到一个浮动元素后会停止
2. 遇到父级元素后会停止
• 多个盒子都浮动后，就产生了块级元素水平排列的效果
• 多个浮动元素不会相互覆盖
• 若包含的容器太窄（哪怕只是窄了一个像素），无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动 ,但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住。

清除浮动
– clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示
– 清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾

参考：http://paranimage.com/css-float-attribute/

http://www.nixi8.com/css-float-property.html

http://www.cnblogs.com/chenfz/archive/2011/02/17/1956899.html

border属性

1.border-style:

dotted:点状

solid：实线

double：双线

dashed：虚线

.........

2.border-width,

3.border-height

4.border-color

5.border-top-style等组合

6.border-style: dotted solid double dashed;(顺时针顺序)

下如果没有，则遵从上，左如果没有则遵从右，右如果没有则遵从上

border-style: dotted solid double ;(顺时针顺序)

其中上：dotted 左和右：solid 下：double

扩充：CSS sprite

加速的关键，不是降低质量，而是减少个数！CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

基本的原理，就是利用 background-postion的负值来进行调节。

当我们定位于background-position:-50px -50px; 时发现图片向左上，移动了，也就以DIV的左上角为中心，图向左移动了50PX，向右也移动了50PX．