CSS彻底研究(3)-浮动,定位 - jerrylsxu

CSS彻底研究(3)-浮动,定位

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

II . 演示规则

准备代码

<code class="hljs django"><span class="xml"><span class="hljs-tag">html</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/1999/xhtml"</span>></span>
<span class="hljs-tag">head</span>>
    <span class="hljs-tag">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span> />
    <span class="hljs-tag">title</span>><span class="hljs-tag"><span class="hljs-name">title</span>></span>
    <span class="hljs-tag">style</span>><span class="css">
        <span class="hljs-selector-tag">body</span>
        {
            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
        }

        <span class="hljs-selector-id">#father</span>
        {
            <span class="hljs-attribute">background-color</span>: cyan;

            <span class="hljs-comment">/*父级div 没有定位 造成子div的margin-top传递给父级*/</span>
            <span class="hljs-attribute">position</span>: absolute;
        }

            <span class="hljs-selector-id">#father</span> *
            {
                <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;
                <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
                <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> dashed red;
            }

        <span class="hljs-selector-id">#son1</span>
        {
        }

        <span class="hljs-selector-id">#son2</span>
        {
        }

        <span class="hljs-selector-id">#son3</span>
        {
        }
    </span><span class="hljs-tag"><span class="hljs-name">style</span>></span>
<span class="hljs-tag"><span class="hljs-name">head</span>></span>
<span class="hljs-tag">body</span>>
    <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"father"</span>>
        <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"son1"</span>>#son1<span class="hljs-tag"><span class="hljs-name">div</span>></span>
        <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"son2"</span>>#son2<span class="hljs-tag"><span class="hljs-name">div</span>></span>
        <span class="hljs-tag">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"son3"</span>>#son3-son3son3son3<span class="hljs-tag"><span class="hljs-name">div</span>></span>
        <span class="hljs-tag">p</span>>
        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
        <span class="hljs-tag"><span class="hljs-name">p</span>></span>
    <span class="hljs-tag"><span class="hljs-name">div</span>></span>
<span class="hljs-tag"><span class="hljs-name">body</span>></span>
<span class="hljs-tag"><span class="hljs-name">html</span>></span></code>

1. 中间给#father加上position:absolute,是为了消除未定位父div的margin-top传递问题,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
   显示效果为
   
2. 1,2的float分别为left right时,有
   
   可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合
3. 当1,2,3全都float left时
   
   文字围绕着float过的div
4. 1,2左浮动，3右浮动，当窗口宽度减小时，3会被挤下来
   
   当3左浮动，2右浮动的时候，显示为
   
   当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2么？
   
   答案还是son3，规则为 ： 写在html文件中后面的会被挤下来，在html文件中，son3在son2后面，因此总是son3先挤下来。
5. 增加son1高度，son3挤下来时会卡在那里
   
6. 删除盒子中的文字，3个子div全部左浮动
   显示为
   
   父div中的三个子div全部脱离标准流了,父div就缩成一条线了,可以用clear来修正
   加一个margin-padding-border全为0,clear为both的空div,来撑大父div
   

III . clear清除浮动

如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

---

二 . 定位position

position取值有static absolute relative fixed

1. static

这个是默认的,即标准流排下来,就是static定位方式.

2. fixed

在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩

<code class="sourceCode html hljs xml"><span class="kw"><span class="hljs-tag"><<span class="hljs-name">div</span></span></span><span class="ot"><span class="hljs-tag"> <span class="hljs-attr">id</span>=</span></span><span class="st"><span class="hljs-tag"><span class="hljs-string">"backToTop"</span></span></span><span class="kw"><span class="hljs-tag">></span></span>
    回到顶部
<span class="kw"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></code>

<code class="sourceCode css hljs"><span class="fl"><span class="hljs-selector-id">#backToTop</span></span>
<span class="kw">{</span>
    <span class="kw"><span class="hljs-attribute">width</span>:</span> <span class="dt"><span class="hljs-number">100px</span></span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">height</span>:</span> <span class="dt"><span class="hljs-number">50px</span></span><span class="kw">;</span>


    <span class="kw"><span class="hljs-attribute">background-color</span>:</span> <span class="dt">red</span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">color</span>:</span> <span class="dt">white</span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">cursor</span>:</span> <span class="dt">pointer</span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">border-radius</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">25px</span></span> <span class="dt"><span class="hljs-number">0</span></span> <span class="dt"><span class="hljs-number">0</span></span> <span class="dt"><span class="hljs-number">25px</span></span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">padding-left</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">20px</span></span><span class="kw">;</span>


    <span class="kw"><span class="hljs-attribute">text-align</span>:</span> <span class="dt">center</span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">line-height</span>:</span> <span class="dt"><span class="hljs-number">50px</span></span><span class="kw">;</span>

    <span class="kw"><span class="hljs-attribute">position</span></span><span class="kw">:</span> <span class="dt">fixed</span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">bottom</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">80px</span></span><span class="kw">;</span>
    <span class="kw"><span class="hljs-attribute">right</span></span><span class="kw">:</span> <span class="dt"><span class="hljs-number">0</span></span><span class="kw">;</span>
<span class="kw">}</span></code>

显示效果

3. relative相对定位

相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

4. absolute绝对定位

根据别的已定位元素进行定位,应用absolute规则的脱离标准流

• 这个别的元素:
  离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
• 已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.

Trick
只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

---

三 . display

display取值有inline block none
设置为none，即可将其隐藏，像inline-block等新添加的，参考http://www.w3school.com.cn/cssref/pr_class_display.asp