一、设计网页的思想

拿到需求之后我们先对各个模块（盒子）进行划分，然后从外到内进行设计（1）设计一个盒子最基本的设计大致包括背景颜色（其实用于识别），宽，高，边界浮动流还是标准流.

（2）然后盒子和盒子之间的外边距margin

（3）然后在进入到小盒子中，进一步划分盒子，这样再重复第一二步

注意点：我们用背景颜色可以识别出各个模块的具体划分，然后在进入到小盒子进行划分，别忘记最后把原来的大盒子背景颜色去掉。（边界无色为none）

二、浮动元素的高度问题

1.在标准流中内容的高度可以撑起父元素的高度。

2.在浮动流中浮动的元素是不可以撑起父元素的高度的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D129_FloatExcriseXia</title>

    <style>

        .fuyuansu,.fuyuansu1{

            border:2px black solid;

        }

        .biaozhun{

            width:100px;

            height: 100px;

            background-color: red;

        }

        .fudong{

            width:100px;

            height: 100px;

            background-color: yellow;

            float:left;

        }

</style>

</head>

<body>

<div class="fuyuansu1">

    <div class="biaozhun"></div>

</div>

<hr>

<div class="fuyuansu">

    <div class="fudong"></div>

</div>

</body>

</html>

三、源码：

D129_FloatExcriseXia.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D129_FloatExcriseXia.html​

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载47-设计思想、浮动元素高度问题的更多相关文章

  1. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  2. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  3. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  4. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...

  5. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

  6. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  7. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  8. Volley设计思想和流程分析

    本文是对Volley思路的整体整理,并不是Volley教程,建议有Volley使用经验,但是对Volley整体不是很清楚的同学阅读. 我认为,弄清整体的流程很重要,以避免一叶障目不见泰山的囧境,而对于 ...

  9. MapReduce原理与设计思想

    简单解释 MapReduce 算法 一个有趣的例子 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查并且数出有多少张是黑桃? MapReduce方法则是: 给在座的所有玩家中分配这摞牌 让每个玩家 ...

随机推荐

  1. 使用“npm init”初始化项目

    使用npm init初始化项目 为什么要使用npm init初始化项目 在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我 ...

  2. Samba共享文件

    1 安装samba yum install -y samba* 2 添加用户 useradd smbuser 3 设置共享文件用户的密码 smbpasswd -a smbuser 4 创建公共共享文件 ...

  3. Ubuntu下配置IP地址

    17.10版本之前: Ubuntu的网卡配置文件跟CentOS的不一样,Ubuntu的网卡配置文件是/etc/network/interfaces.我们用vi /etc/network/interfa ...

  4. 攻防世界Web新手练习区（1-6）

    第一题 view_source 获取在线场景查看网页 打开页面之后首先考虑查看源代码,发现不能右击 根据题目的提示考虑使用view-source查看源代码,发现flag 第二题 get_post 获取 ...

  5. angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  6. 架构组件：基于Shard-Jdbc分库分表，数据库扩容方案

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据库扩容 1.业务场景 互联网项目中有很多"数据量大,业务复杂度高,需要分库分表"的业务场景. 这样分层的架构 (1 ...

  7. Nginx安装及配置反向代理

    本片博客记录在ubuntu16下安装nginx,以及如何实现负载均衡 安装nginx 如果是新机器,安装相关依赖环境 sudo apt install build-essential sudo apt ...

  8. Java题库——Chapter9 String的用法

    1)Which code fragment would correctly identify the number of arguments passed via the command line t ...

  9. oracle将时间加一天，加小时，加分，加秒

    前言 oracle 时间类型可以直接相加,但加的是天,以天为单位,我们了解了这个,加一天,一小时,一分,一秒就都简单了. 加一天 select to_date('2019-08-15 22:03:10 ...

  10. IO多路复用?我所理解的IO模式

    1:IO的过程 当我们调用系统函数read时,一般会经历两个阶段: 1:等待数据准备(waiting for the data be ready) 2:将数组从内核拷贝到进程(从内核态到用户态)(co ...