前端开发 布局问题_浮动

上海张江前端开发薪资|web前端开发可以自学吗|前端开发和网页设计一样吗

第一,左侧定宽,右侧自适应。
html 代码

<!doctype html>
<head>
    <title>前端开发所学专业能力要求</title>
    <meta charset=”UTF-8″>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .main {
        width: 100%;
        overflow: hidden;
    }
    .main div {
        min-height: 200px;
    }
    .fl {
        float: left;
        width: 200px;
        background: pink;
    }
    .fr {
        width: auto;
        min-height: 200px;
        background: blue;
        overflow: hidden;
    }
</style>
<body>
    <div class=”main”>
        <div class=”fl”></div>
        <div class=”fr”></div>
    </div>
</body>
</html>

反思:在我运用这个浮动时,我脑海中的印象是我需要把左右两边的div都增加float:left这个属性。
但是实际上,当我加上float的时候,这个就出现问题了。
html 代码

<!doctype html>
<html>
<head>
    <title>硕士web前端开发 薪资</title>
    <meta charset=”UTF-8″>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .main {
        width: 100%;
        overflow: hidden;
    }
    .main div {
        min-height: 200px;
    }
    .fl {
        float: left;
        width: 200px;
        background: pink;
    }
    .fr {
        float: left;
        width: auto;
        min-height: 200px;
        background: blue;
        overflow: hidden;
    }
</style>
<body>
    <div class=”main”>
        <div class=”fl”></div>
        <div class=”fr”></div>
    </div>
</body>
</html>

原先一直想不通,不是说加了浮动就可以在同一行上显示了吗?为什么会出现这样的情况?
然后,询问了群里的大神们,发现一些以前忽略的东西。
关于float属性,所有主流浏览器都支持浮动,但是任何的版本的IE(包括IE8)都不支持属性值:“inherit”;在 css 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

第二,两边定宽,中间自适应。
正确姿势:
html 代码

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset=”UTF-8″>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .main {
        width: 100%;
        overflow: hidden;
    }
    .main div {
        min-height: 200px;
    }
    /*两边定宽 中间自适应*/
    .fl2 {
        float: left;
        width: 200px;
        background: #0968DE;
    }
    .fr2 {
        float: right;
        width: 200px;
        background: #32EF64;
    }
    .cen2 {
        margin-left: 200px;
        margin-right: 200px;
        background: red;
    }
</style>
<body>
    <div class=”main”>
        <div class=”fl2″></div>
        <div class=”fr2″></div>
        <div class=”cen2″></div>
    </div>
</body>
</html>

仔细看看上面的html,是不是看到不一样的东西了?不一样的地方就是我刚刚接触这个布局不懂的地方。一般来说,我写html,都是从上到下,从左到右的;但是在这个布局中把位于中间部分的div写在了最后的部分。
按照我的理解,按照顺序写div,会造成下面的这种后果:
html 代码

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset=”UTF-8″>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .main {
        width: 100%;
        overflow: hidden;
    }
    .main div {
        min-height: 200px;
    }
    /*两边定宽 中间自适应*/
    .fl2 {
        float: left;
        width: 200px;
        background: #0968DE;
    }
    .fr2 {
        float: right;
        width: 200px;
        background: #32EF64;
    }
    .cen2 {
        margin-left: 200px;
        margin-right: 200px;
        background: red;
    }
</style>
<body>
    <div class=”main”>
        <div class=”fl2″></div>
        <div class=”cen2″></div>
        <div class=”fr2″></div>
    </div>
</body>
</html>

关于div标签,所有的主流浏览器都支持;在默认情况下,一个div会显示一行,俗的来说就是,每个div在默认下都会自动换行。

前端开发笔试题一套|indexof/ .zip web前端开发规范手册|前端开发编码规范

» 本文来自:前端开发者 » 《前端开发 布局问题_浮动》
» 本文链接地址:https://www.rokub.com/4966.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!