zoukankan      html  css  js  c++  java
  • HTML>精通CSS DIV网页样式与布局>理解CSS定位和DIV布局>float属性的自我理解

    抱着对ASP.NET前台开发的热爱,今天上午特别看了float属性,说实话还挺复杂。

    先把我的例子放上来,自我理解都在这个例子里了。还有些不完美之处就是,clear属性没放上来。

    <html>
    <head><title>float属性的自我理解</title>
    <style type="text/css">
    .father
    {
        background-color
    :#fffea6;
        border
    :1px solid #111111;
        padding
    :25px;
    }

    .oldbrother
    {
        padding
    :10px;
        margin
    :5px;
        background-color
    :#70baff;
        border
    :1px dashed #111111;
        float
    :none;
    }
    .youngbrother
    {
        padding
    :5px;
        margin
    :0px;
        background-color
    :#ffd270;
        border
    :1px dashed #111111;
    }
    </style>
    <script type="text/javascript" src="JS/jquery-1.4.2-vsdoc.js"></script>
    <script type="text/javascript">
        $(
    function() {
            $(
    "#nofloat").click(function() {
                $(
    ".oldbrother").attr("style""float:none;");
                $(
    ".youngbrother").attr("style""float:none");
            });
            $(
    "#leftfloat1").click(function() {
                $(
    ".oldbrother").attr("style""float:left;");
            });
            $(
    "#rightfloat1").click(function() {
                $(
    ".oldbrother").attr("style""float:right;");
            });
            $(
    "#nofloat1").click(function() {
                $(
    ".oldbrother").attr("style""float:none;");
            });
            $(
    "#Fumargin").click(function() {
                $(
    ".oldbrother").attr("style""float:left;margin:5px 0 0 -35px;");
            });
            $(
    "#leftfloat2").click(function() {
                $(
    ".youngbrother").attr("style""float:left;");
            });
            $(
    "#rightfloat2").click(function() {
                $(
    ".youngbrother").attr("style""float:right;");
            });
        });
    </script>
    </head>
    <body>
    元素占用的空间有div块级(block),span行内级(inline)之分。block,占用一行空间,撑满父元素;inline,占用的空间仅仅是自身content+padding+border+margin。
    <br />
    要知道block,inline,都有float属性,即浮动。不设置浮动属性,默认float为none。
    <br />
    哥哥属性设置浮动后,其弟弟元素的内容包围哥哥元素,哥哥元素不再属于父元素。
    <br />
    弟弟元素设置浮动后,对哥哥元素没影响,但同样不属于父元素。
    <br /><br />
    <br />
    <div class="father">
    <div class="oldbrother">哥哥元素</div>
    <div class="youngbrother">弟弟元素</div>
    </div>
    <div style=" clear:both;">
    <input type="button" id="nofloat" value="设置哥哥弟弟元素为无浮动" /><br />
    <input type="button" id="nofloat1" value="设置哥哥元素为无浮动" />
    <input type="button" id="leftfloat1" value="设置哥哥元素为左浮动" />
    <input type="button" id="rightfloat1" value="设置哥哥元素为右浮动" />
    <input type="button" id="Fumargin" value="设置哥哥元素的margin属性为负数,左浮动" /><br />
    <input type="button" id="leftfloat2" value="设置弟弟元素为左浮动" />
    <input type="button" id="rightfloat2" value="设置弟弟元素为右浮动" />
    </div>
    <div style="float:left">这是block元素。</div>
    <div>这是块级元素。这是块级元素。这是块级元素。
    这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。
    </div>

    <span style="float:left; background-color:Gray;">这是inline元素。</span>
    <div style="border:dotted 1px black">这是块级元素。这是块级元素。这是块级元素。
    这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。这是块级元素。
    </div>

    </body>
    </html>

    当然,提供下载。 /Files/samwu/float属性的自我理解.rar

    合乎自然而生生不息。。。
  • 相关阅读:
    PHP观察者模式
    php减少损耗的方法之一 缓存对象
    php迭代器模式
    数据库安全措施的改进依据------未实践
    mysql利用phpmyadmin导入数据出现#1044错误 的可能原因
    两列布局的基本思路
    less1.5中的减错误
    ie63像素bug原因及解决办法不使用hack
    镜像翻转二叉树
    判断一个整数是否是 2 的幂次方
  • 原文地址:https://www.cnblogs.com/samwu/p/2093186.html
Copyright © 2011-2022 走看看