金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > float是如何工作的,十步图解CSS的position

float是如何工作的,十步图解CSS的position

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 01:15

前面的元素会将浮动元素向下推

虽然浮动元素会尽量靠近父元素的顶部,然而文档中浮动元素前面的兄弟元素会把浮动元素向下推。无论前面的元素是内联元素还是块元素。

也就是说如果我们在浮动元素之前或之后有一个段落,会得到不同的结果。

图片 1

段落在浮动元素之后

图片 2

段落在浮动元素之前

第十步:扩展阅读

上面只是简单的介绍了一下CSS中的position的基础知识。如果大家对这一块知识感兴趣的话,可以点击下面的相关连接:

  1. The position declaration
  2. Absolute Positioning Inside Relative Positioning
  3. CSS Positioning 101
  4. Css position: position static, absolute, relative and fixed of an element
  5. Making the absolute, relative
  6. floatutorial
  7. CSS Floats 101
  8. All About Floats
  9. float

 

 

 

 

 

赞 2 收藏 1 评论

图片 3

$("div.scrollable").scrollable({
        size: 3,
        vertical:false,
        //clickable:false,
        loop:true,//设置是否自动跳转(根据间隔时间)
        //interval: 1000,//设置间歇时间间隔
        //speed:2000,
        items: '#thumbs',
        //prev:'.prev',//跳转到上一项
        //next:'.next'//跳转到下一项
        prevPage:'.prev',//跳转到上一页
        nextPage:'.next',//跳转到下一页
        hoverClass: 'hover',
        easing:'linear'
    });    

FROM:

左浮动/右浮动元素会尽量接近父元素的顶部和左边/右边

这是左浮动/右浮动元素试图实现的“最佳”位置

十步图解CSS的position

2013/10/12 · CSS · 1 评论 · CSS

原文出处: barelyfitz   译文出处:w3cplus   

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。

在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考:

HTML Markup

XHTML

<div id="example"> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p> </div> <div id="div-1c"> <p>id = div-1c</p> </div> </div> </div> <div id="div-after"> <p>id = div-after</p> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c">
<p>id = div-1c</p>
</div>
</div>
</div>
<div id="div-after">
<p>id = div-after</p>
</div>
</div>

CSS Code

简单的运用一点样式:

CSS

#example { float: right; } #example p { margin: 0 0.25em; padding: 0.25em 0; } #div-before, #div-after { background-color: #88d; color: #000; } #div-1 { width: 400px; background-color: #000; color: #fff; } #div-1-padding { padding: 10px; } #div-1a { background-color: #d33; color: #fff; } #div-1b { background-color: #3d3; color: #fff; } #div-1c { background-color: #33d; color: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#example {
float: right;
}
 
#example p {
margin: 0 0.25em;
padding: 0.25em 0;
}
#div-before,
#div-after {
background-color: #88d;
color: #000;
}
 
#div-1 {
width: 400px;
background-color: #000;
color: #fff;
}
 
#div-1-padding {
padding: 10px;
}
 
#div-1a {
background-color: #d33;
color: #fff;
}
 
#div-1b {
background-color: #3d3;
color: #fff;
}
 
#div-1c {
background-color: #33d;
color: #fff;
}

初步效果:

图片 4

为了后面能更好的了解相关知识点,我特将此例的DOM草图画出来:

图片 5

上面的DOM图,我想大家一定非常容易的理解,下面就一起来主要看position的使用。

  1. $("div.scrollable").scrollable//该方法为采用默认方法显示滚动栏
  2. $("div.scrollable").scrollable({config object}) //该方法通过配置对象来定制滚动栏显示内容及方式。
    以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):

 

扩展阅读

  • CSS的Float之一
  • CSS的Float之二
  • float深入剖析
  • Clear Float

    1 赞 1 收藏 评论

图片 6

第九步:清除浮动

为了让浮动元素的父元素不在处于塌陷状态下,我们需要对浮动元素进行清除浮动:

CSS

#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }

1
2
3
4
5
6
7
8
9
10
11
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

图片 7

浮动是在css中是一个很深的课题,这里只是轻描淡写了一下。前面在《CSS的Float之一》和《CSS的Float之二》也介绍了一些有关于float的相关知识,有关于清除浮动的,大家也可以点阅《Clear Float》。

下面对scrollable配置参数描述如下:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
  2 <html xmlns=";
  3 
  4 <head>
  5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  6 <title>Pure CSS folded-corner effect – Nicolas Gallaghe</title>
  7 <style type="text/css">
  8 /* ------------------------------------------
  9 PURE CSS FOLDED CORNER EFFECT
 10 by Nicolas Gallagher
 11 - 
 12 
 13 
 14 
 15 
 16 Created: 09 December 2010
 17 Version: 1.2 (Updated 14 December 2010)
 18 
 19 Dual licensed under MIT and GNU GPLv2   Nicolas Gallagher 
 20 ------------------------------------------ */
 21 
 22 
 23 /* ----------------------------------------------------------------------------------------------------------------------------
 24 == GENERAL STYLES
 25 ** ---------------------------------------------------------------------------------------------------------------------------- */
 26 
 27 html, body                             {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
 28 header, hgroup                         {display:block;}
 29 
 30 a:link, a:visited                      {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
 31 a:visited                              {border-bottom:1px solid #730800; color:#730800;}
 32 a:hover, a:focus, a:active             {border:0; color:#fff; background:#c55500;}
 33 a:visited:hover,
 34  a:visited:focus,
 35  a:visited:active                      {color:#fff; background:#730800;}
 36 
 37 .container                             {width:540px; padding:0 0 10px; margin:0 auto 30px;}
 38 .header                                {border-bottom:1px solid #ddd;}
 39 .footer                                {padding:10px 0 30px; border-top:1px solid #ddd; margin-bottom:0;}
 40 
 41 h1                                     {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
 42 h2                                     {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
 43 p                                      {margin:1em 0; line-height:1.4em;}
 44 
 45 pre                                    {margin:1.4em 0; font-size:12px; line-height:1.4em; white-space:pre-wrap; word-wrap:break-word;}
 46 
 47 .follow                                {clear:both; margin-top:2em; font-size:1.125em;}
 48 .follow span                           {font-weight:bold;}
 49 
 50 
 51 /* ----------------------------------------------------------------------------------------------------------------------------
 52 == FOLDED CORNERS
 53 ** ---------------------------------------------------------------------------------------------------------------------------- */
 54 
 55 .note {
 56     position:relative;
 57     width:480px;
 58     padding:1em 1.5em;
 59     margin:2em auto;
 60     color:#fff;
 61     background:#97C02F;
 62     overflow:hidden;
 63 }
 64 
 65 .note:before {
 66     content:"";
 67     position:absolute;
 68     top:0;
 69     right:0;
 70     border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
 71     border-style:solid;
 72     border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
 73     background:#658E15; /* For Opera when also applying a border-radius */
 74     display:block; width:0; /* Only for Firefox 3.0 damage limitation */
 75     /* Optional: shadow */
 76     -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
 77        -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
 78             box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
 79 }
 80 
 81 .note.red {background:#C93213;}
 82 .note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
 83 
 84 .note.blue {background:#53A3B4;}
 85 .note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}
 86 
 87 .note.taupe {background:#999868;}
 88 .note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}
 89 
 90 /* ROUNDED CORNERS VERSION
 91  * All modern browsers can produce this effect with a single pseudo-element.
 92  * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
 93  * As far as I can tell, this is the only cross-browser method for the moment.
 94  * Can't use this method for the simple effect because Opera 11 will only show backgrounds
 95  * through transparent borders if there is a border-radius applied.
 96  */
 97  
 98 .note.rounded {
 99     -webkit-border-radius:5px;
100     -moz-border-radius:5px;
101     border-radius:5px;
102 }
103 
104 .note.rounded:before {
105     border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
106     border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
107     -webkit-border-bottom-left-radius:5px;
108     -moz-border-radius:0 0 0 5px;
109     border-radius:0 0 0 5px;
110 }
111 
112 .note p {margin:0;}
113 .note p + p {margin:1.5em 0 0;}
114 </style>
115 </head>
116 
117 <body>
118 <div class="container header">
119     <header>
120         <hgroup>
121             <h1>Pure CSS folded-corner effect</h1>
122             <h2>By <a href=" Gallagher</a></h2>
123         </hgroup>
124 
125         <p><em>Known support</em>: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.</p>
126     </header>
127 </div>
128 
129 <div class="note">
130     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
131     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
132 </div>
133 
134 <div class="note red rounded">
135     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
136 </div>
137 
138 <div class="note blue">
139     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
140 </div>
141 
142 <div class="note taupe">
143     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
144 </div>
145 
146 <div class="container footer">
147     <p>Read the article: <a href=" CSS folded-corner effect</a>.</p>
148     <p class="follow"><a href=" can find me on <span>twitter</span></a>.</p>
149 </div>
150 
151 </body>
152 
153 </html>
154 

前面的浮动元素得到更“好”的位置

在规则2中讲到的“最佳”的位置将会给第一个被定义为浮动的元素。比如说,有多个右浮动元素,HTML中第一个定义的右浮动元素会最靠近右边, 因为那是最佳位置。

XHTML

<div class="container"> <div class="right">1</div> <div class="right">2</div> <div class="right">3</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div>

1
2
3
4
5
6
<div class="container">        
  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

图片 8

第四步:relative和absolute的结合

第二步中大家知道元素相对定位“relative”是相对于元素自身定位,而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的:“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是html”,这样一来,“relative”和“absolute”的结合就能起到很大的作用。

我们接下来看一个截图:

图片 9

上图做为一个实例来说明“relative”和“absolute”的关系,首先上图中共有三个div放在body内,而且他们三个div的关系是“div-1>div-2>div-3”,而且在div-3有这么一个绝对定位:

CSS

.div-3 { position: absolute; left:0; top:0; }

1
2
3
4
5
.div-3 {
position: absolute;
left:0;
top:0;
}

下面分几个情况来说明上图的意思:

1、div-1与div-2都没有设置“position:relative”,此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上;

2、现在我们在div-2元素中加设置一个“position: relative”,此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;

3、接下来把相对定位的设置换到div-1元素上,此时div-3绝对定位后就到了div-3b的位置。

花这么多心思,我只想说明一点:如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。这句话说起起来好像有点拗口,不知道大家能否明白我说的是什么?如果不明白大家可以参考上图或者下面这个实例效果:

回到上面的实例中,如果我们在“div-1”加一个“relative”:

CSS

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

1
2
3
4
5
6
7
8
9
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

现在我们相对点不在是第三步中的body了,而是“div-1”了,大家看看与第三步的变化:

图片 10

 第五步:relative和absolute实现布局效果

这一步只要想演示一下使用相对定位和绝对定位实现的两例布局。在前面的基础上,div-1进行相对定位,而div-1a和div-1b进行绝对定位,从而实现两列布局的效果:

CSS

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

图片 11

这样的制作只是用来说明absolute的作用,如果只能实现上面的效果,可能在实际制作中并不完美,为了让其更完美一些,在这个基础上我们在来看下面这一步。

复制代码 代码如下:

 

接近于父元素的顶部优先于左边/右边

当有多个浮动元素向同一个方向浮动时,随后的元素为了更接近父元素的顶部,将会选择远离父元素左边/右边的位置。

这就意味着多个浮动元素将尽可能并排排列,只有当父元素的宽度不能容纳它们,它们才会移动到下面。

图片 12

在这个例子中,元素2比元素3拥有更好的位置

第三步:绝对定位position:absolute

absolute是position中的第三个属性值,如果你给元素指定了absolute,整个元素就会漂出文档流,而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

我们来看一个实例,在div-1a元素上进行绝对定位:

CSS

#div-1a { position:absolute; top:0; right:0; width:200px; }

1
2
3
4
5
6
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

图片 13

此时元素“div-1a”不在当初的文档流中,而且其此时定位也是相对于html来进行定位,那么我们有时候并不是需要这样的效果,哪果我们元素div-1a还想在div-1是进行绝对定位,那要怎么办呢?此时就要发挥前面第二步的“relative”作用了。

代码如下: !-- navigator -- div class="navi"/div !-- prev link -- a class="prev"/a !-- root element for scrollable -- div class="scrollable" div id="thumbs" div img...

 

浮动的规则

浮动有四个属性值可以设置

CSS

.foo{ float: left | right | inherit | none }

1
2
3
.foo{
  float: left | right | inherit | none
}

每个属性值是如何影响浮动元素在其父元素或文档内的摆放,通常是由下面的规则决定的:

第七步:float

前两步,使用绝对定位都并不是很理想,那么我们可以考虑使用float来解决。我们可以在一个元素上使用float,让元素向左或向右,而且还可以使用文本围绕在这个元素的周边(这个作用在文本围绕图片特别有用)。下面来模拟一下:

CSS

#div-1a { float:left; width:200px; }

1
2
3
4
#div-1a {
float:left;
width:200px;
}

图片 14

<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<div>
<img src="" src="" />
<h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">60 sec</span>
</div>
<div>
<img src="" src="" />
<h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">80 sec</span>
</div>
<div>
<img src="" src="" />
<h3><em>3. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">100 sec</span>
</div>
<div>
<img src="" src="" />
<h3><em>4. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">120 sec</span>
</div>
<div>
<img src="" src="" />
<h3><em>5. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">140 sec</span>
</div>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />

图片 15图片 16代码

clearfix

先前有许多混乱而不合适的清浮动方法。特别是会在一些老旧浏览器导致问题。我用的一个流行的清浮动方案是用CSS实现的。下面的样式应用于浮动元素的父元素或紧随其后的兄弟元素。

CSS

.cf::after { content:""; display:table; clear:both; }

1
2
3
4
5
.cf::after {
  content:"";
  display:table;
  clear:both;
}

你可以看他们博客–为什么这样使用这些属性,不过这个方案本质上是创建了一个看不见的伪元素来清除浮动。

第六步:设置固定高度

为了让布局更适用一些,可以在div-1元素上设置固定高度,如:

CSS

#div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

图片 17

相比之下好一点,但我们并不知道元素内容高度将会是多少,所以在此设置一个固定高度也是我们实际中的一个死穴,个人不建议这样使用。如果为了需要,我们可以通过别的办法来实现。

对于scrollable方法及示例请参见jquery tools 之 scrollable(二)

浮动元素的父元素是不可见的

浮动元素会脱离文档流,不会继续停留在其父元素内。如果一个父元素只有一个子元素,那么它将会塌陷,就像是空的一样。就表现而言,就有点类似于子元素做了绝对定位。

CSS

.parent { position: relative; padding: 10px; } .child { float: left }

1
2
3
4
5
6
7
.parent {
   position: relative;
   padding: 10px;
}
.child {
   float: left
}

图片 18

第一步:position: static

在CSS中所有元素的“position”属性的默认值都是“static”,因为不需要显式的为每个元素设置“position:static”。此时大家会问,那这个属性值是不是没有任何意义呢?其实不是的,他在CSS中也会起着很大的作用。我们来看一个实例:

比如说你的两个页面,同时存在“div#div-1”,那么此时你在A面中需要对“div#div-1”进行绝对定位;而在B页面中“div#div-1”又不需要进行绝对定位。

A页面中“div#div-1”绝对定位:

CSS

#div-1 { position: absolute; }

1
2
3
#div-1 {
position: absolute;
}

此时在B页面中不想在进行绝对定位,那么我们就必须在你的样式中显式的重新设置“#div-1”的postion属性为“static”

CSS

body.B #div-1 { position: static; }

1
2
3
body.B #div-1 {
position: static;
}

 第二步:相对定位position:relative

relative称为相对定位,如果你给某个元素指定了postion的值为“relative”,那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。

使用relative时有几点需要注意:

  1. 元素设置了relative时,是相对于元素本身位置进行定位;
  2. 元素设置了relative后,可以通过“T-R-B-L”改变元素当前所在的位置,但元素移位后,同样点有当初的物理空间位;
  3. 元素设置了relative后,如果没有进行任何的“T-R-B-L”设置,元素不会进行任何位置改变。

上面三点第一点和第三点来说都是比较好理解,那么现在针对第二点,我们来看一个实例的操作:

在上面的基础上,我们对“div-1”进行向下移动20px;向左移动40px:

CSS

#div-1 { position:relative; top:20px; left:-40px; }

1
2
3
4
5
#div-1 {
position:relative;
top:20px;
left:-40px;
}

我们来看看效果:

图片 19

从效果图可以再次印证上面说的第二点。元素“div-1”向下移动了20px,向左移动了40px,本身位置变化了,而元素最初所占的物理空间依然还是存在,另外一点元素相对定位后并没有影响其他相邻的元素。

该功能是通过jqueryObject.scrollable()方法来实现的,其中scrollable方法提供以下两种方式:

float是如何工作的

2015/09/02 · CSS · float

原文出处: @bitsofcode   译文出处:风儿筝(@风儿筝2014)   

虽然现在很少使用浮动,但在某些情况下,浮动是唯一可行的解决方案。偶尔会觉得很沮丧,因为我觉得浮动应该起作用但是它并没有。所以我决定研究下浮动的工作原理以及如何正确的使用浮动。

第八步:多列浮动

上面展示的是一个列浮动,接下来看看多列的变化:

CSS

#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }

1
2
3
4
5
6
7
8
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

图片 20

浮动与绝对定位来相比,现在解决了其高度自适应的问题,但也存在一个问题,浮动也破坏了元素当初的文档流,使其父元素塌陷了,那么为了解决这个问题,我们有必要对其进行清除浮动。

属性
默认值
size 5
vertical FALSE
clickable TRUE
loop FALSE
interval 0
speed 400
keyboard TRUE
items ".items"
prev ".prev"
next ".next"
prevPage ".prevPage"
nextPage ".nextPage"
navi ".navi"
naviItem "a"
activeClass "active"
disabledClass "disabled"
hoverClass  
easing "swing"
api FALSE
onBeforeSeek  
onSeek  

浮动元素不能延伸到它的父元素外面

左浮动的元素不会延伸到父元素的左边缘外。

左浮动的元素不应该延伸到父元素的右外边缘外,除非父元素没有剩余的空间。

图片 21

复制代码 代码如下:

清除浮动

clear 属性与 float 密切相关。它可以消除元素浮动造成的文档流的改变。它有三个属性值:

CSS

.foo { clear: left | right | both }

1
2
3
.foo {
  clear: left | right | both
}

当一个元素设置为  clear:left ,这意味着清除浮动的元素的顶部边缘必须在左浮动元素底边的下面。如果该元素设置  clear:both ,那么它的顶部边缘一定会在所有浮动元素的下方。

图片 22

段落清除左浮动

如果一个元素只是清除左浮动或右浮动,另一方向浮动的元素不会受此影响。

<div class="container"> <div class="left">1</div> <div class="left">2</div> <div class="left">3</div> <div class="right">1</div> <div class="right">2</div> <div class="right">3</div> <p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="container">    
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
 
  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>
 
  <p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

图片 23

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:float是如何工作的,十步图解CSS的position

关键词: