zoukankan      html  css  js  c++  java
  • 关于CSS三列Float布局任务

    任务目标

    • 掌握HTML/CSS布局的概念
    • 掌握盒模型的概念
    • 掌握position与float的概念以及在布局时的用法

    任务描述

    • 使用 HTML 与 CSS 按照示意图;实现三栏式布局。
    • 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

    任务注意事项

    • 尝试 position 和 float 的效果,思考它们的异同和应用场景。
    • 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。        

    个人心得体会:        、

    1. 当子DIV中含有绝对属性时,因为脱离了文档流,无法做到父元素高度随子元素最大高度变化而变化;
    2. DIV_LEFT设置左浮动,DIV_RIGHT设置右浮动,再设置CENTER段落,会自动填充到中间列;      
    3. 关于父DIV随子DIV中的最大高度变化,给父元素属性中添加 overflow:hidden;属性
                              
  • 相关阅读:
    Linux调整时区和同步时间
    wget命令
    apt-get损坏修复
    apt-get卸载命令
    apt-get命令
    ps命令
    卸载Ambari
    YARN Registry DNS启动提示“53端口被占用”错误的解决方法
    反转链表,时间复杂度O(n),空间复杂度O(1)
    简易版之最短距离
  • 原文地址:https://www.cnblogs.com/Tobenew/p/5551405.html
Copyright © 2011-2022 走看看