HTML连载47-设计思想、浮动元素高度问题

嵌入式移动开发 2019-11-03

一、设计网页的思想

拿到需求之后我们先对各个模块（盒子）进行划分，然后从外到内进行设计（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>

HTML连载47-设计思想、浮动元素高度问题

三、源码：

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-设计思想、浮动元素高度问题

嵌入式移动开发

嵌入式移动开发

相关推荐

paddle设计思想

　　python被组织成一个ProgramDesc，用户通过调用paddle提供算子来向Program添加tensor以及对变量的操作Operators，用户只需描述前向计算，原始的programDesc转化为一个中间语言Transplier。　　一个pa

uileader / 0评论 2020-06-21

关于接口测试——自动化框架的设计与实现

在大部分测试人员眼中只要沾上“框架”，就感觉非常神秘，非常遥远。其实不然，真正的自动化测试框架不是一个模式，而是一种思想和方法的集合，通俗的讲就是一个架构。以上仅仅是代表了一种自动化测试的思想，并不能定义为框架。不同的是测试库框架把待测应用程序分解为过程和

maxelliot / 0评论 2020-06-21

手把手教你阅读mybatis核心源码，掌握底层工作原理与设计思想

Mybatis目前作为互联网公司Java体系开源ORM框架的首选，它有着天然的优势，很多同学只关注其公司业务CRUD程序的编写，忽略了其源码阅读的重要性。下面来看一段使用Mybatis API写的代码示例：。接下来按照示例代码的步骤一步一步地来分析代码的运

Justagreenonion / 0评论 2020-05-30

spring设计模式之applicationContext.getBean(\"beanName\")思想

在实际开发中我们会经常遇到不同的业务类型对应不同的业务处理,而这个业务类型又是经常变动的;在修改的过程中甚至将原来的弄错......最后总结这样的代码违反了开闭原则,好的代码设计思想应该是对修改关闭,对扩展开放;大家可想想象一下,spring的getBea

yourFriend / 0评论 2020-05-29

SRAM灵敏放大器的类型及设计思想

本篇文章内容宇芯电子主要介绍关于SRAM芯片中灵敏放大器的类型以及设计。差分放大器因其具有抗干扰能力强、电压摆幅大、偏置电路简单和线性度高的优点，多用在CMOS 存储器读出放大单元的设计中，如SRAM、DRAM 等。所以该结构一般不应用于SRAM 中。在已

gougouzhang / 0评论 2020-05-12

《驱动设计的思想：面向对象—分层—分离》

　　在linux内核中，所谓的面向对象可以理解为用结构体来表示某个对象。　　以led驱动为例子，硬件驱动中，对某个led的开关就是针对固定的地址进行操作，如果要还成另外一个led就必须更换这些地址，就很麻烦。　　复制文档上面的：实际情况是。。。。。。　　可

随心而作 / 0评论 2020-01-07

动态规划的设计思想与实例（最大子段和、最长公共子序列、0-1背包、编辑距离）

动态规划算法与分治法类似，其基本思想是将总问题分解成若干个子问题，先求解子问题，再结合这些子问题的解得到原问题的解。与分治法不同的是，动态规划求解的问题经分解得到的子问题往往不是相互独立的。　　写递归表达式，即子问题的答案中最合适的应该满足哪些条件 总问题

VanTYS / 0评论 2019-12-15

最基本 几个设计模式思想

1算法 排序 选择排序 冒泡排序 希尔排序2数据结构 数组 集合 队列 栈 先进后出 堆 完全二叉树 平衡二叉树 红黑树。3设计模式 工厂模式 单例模式 代理模式 策略模式 迭代器模式

gougouzhang / 0评论 2019-12-13

Linux/Unix 设计思想 摘记

良好的程序员写出优秀的软件，优秀的程序员“偷窃”优秀的软件。NIH综合征的特点就是人们会为了证明自己能够提供更加卓越的解决方案而放弃其他开发人员已经完成的工作。

xiatianbzh / 0评论 2019-11-27

杨晓峰：保守的设计思想也许是 Java 的最大优势

Java 是最流行的编程语言之一，它经历了几个发展阶段 ？未来的发展前景如何？Java 9 将推迟到 2017 年发布，最受关注的特性如何？杨晓峰，OpenJDK Committer，Oracle 首席工程师，Java 核心类库北京团队 leader。加入

Omega / 0评论 2019-11-08

各语言设计思想的独特之处：C/C++、Java、Python、Objective C

另外，C++还有类指针是其它语言没有的，在Objective C是用selector代替，Python、Java中是用引用，不过C++也有引用。

Joyliness / 0评论 2019-08-03

ARM设计思想与高效C编程

ARM内核采用RISC体系结构。RISC是一种设计思想，其目标是设计出一套能在高时钟频率下单周期执行，简单而有效的指令集。RISC的设计重点在于由硬件执行的指令的复杂度，这是因为软件比硬件容易提供更大的灵活性和更高的智能。因此，RISC设计对编译器有更高的

upzhai / 0评论 2011-12-19

jquery 设计思想

　　jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。　　使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()，然后得到被选中的元素。　　$.

homesmile / 0评论 2016-04-28

SPA和MVVM设计思想

前端实现mvvm设计思想的框架，其目的都是为了高度封装view-model的交互过程，让开发这只关心页面构成和数据构成，无需花费大量时间关心数据和页面的状态关系。欢迎关注达叔小生的简书！

xcolin / 0评论 2019-09-07

关于接口测试——自动化框架的设计与实现

在大部分测试人员眼中只要沾上“框架”，就感觉非常神秘，非常遥远。其实不然，真正的自动化测试框架不是一个模式，而是一种思想和方法的集合，通俗的讲就是一个架构。以上仅仅是代表了一种自动化测试的思想，并不能定义为框架。

冰晶云梦 / 0评论 2019-09-06

php命名空间设计思想、用法与缺点分析

本文实例讲述了php命名空间设计思想、用法与缺点。分享给大家供大家参考，具体如下：。相比C#等语言，你可以在php函数里面随意定义变量并赋值，而不用担心覆盖了全局变量，或者类变量；你也可以随意的定义类变量，而不用担心会和函数名冲突，因为变量前面都有个$。p

klarclm / 0评论 2019-07-17

分布式日志，调用链的监控设计思想

A 独立的第三方服务：一但进入客户端设置好的切面，进入拦截器，校验有没有此注解，有的话向日志服务端发送需要记录的日志。B 每个系统中集成消息插件，在调用下游之前通过消息服务记录这一级的invoker数据+id（一般为了减轻业务系统的压力，会采用异步的机制，

chenyanyan / 0评论 2018-11-07

数据仓库设计基本思想

联机事务处理系统 OLTP系统：也称为生产系统，它是事件驱动、面向需求的，比如银行的储蓄系统就是一个典型的OLTP系统。OLTP在使用过程中积累了大量数据。对响应时间要求非常高;对用户数量非常宠大，主要是操作人员；不同的行业会有不同的主题域划分方式。

laj0 / 0评论 2017-03-13

浅析COM的思想及原理_面相组件的程序框架设计_组件对象模型

COM--Component ObjectModel，即组件对象模型，它是微软提出的一套开发软件的方法与规范。而COM的出现，又引出了面向组件的思想。(这里说一点题外话，COM其实是一套规范或者说一套标准，但是在我看来，COM的核心还在于它的思想，也就是面

特 / 0评论 2019-05-20

从jQuery核心源码学习设计思想和JS特性

文章作为学习笔记的形式，记录学习的一点体会和原理知识，如有错误欢迎指正。本文根据一些简单的jQuery源码入手分析一个框架从哪方面入手，js在底层做了那些事，读设计过程中更容易了解js的一些原理。匿名自执行函数和闭合包。//1.匿名自执行函数和闭合包 这里

ArthursL / 0评论 2019-08-22

Restful webservice 数据安全解决方案

之前在设计Restfulwebservice时安全问题，一直在找一个合适的方案。常用的HTTP方法POST，GET，PUT，DELETE对应着资源的CRUD，Create，Retrieve，Update，Delete，这是Restful初始的设计思想。参数

zhuyonge / 0评论 2016-05-19

大型网站动态应用系统架构设计思想

大型动态应用系统平台主要是针对于大流量、高并发网站建立的底层系统架构。大型网站的运行需要一个可靠、安全、可扩展、易维护的应用系统平台做为支撑，以保证网站应用的平稳运行。服务器对开发人员是透明的，不需要开发人员介入服务器管理。　　2、减轻对数据库及存储集服务

hitxiaya / 0评论 2011-02-22

拆解XLNet模型设计，回顾语言表征学习的思想演进

在预训练语言模型 BERT 对自然语言处理的冲击还未平息时，CMU 和 Google 的研究员又放出了一个猛料：在 20 多项任务上全线碾压 BERT 的 XLNet。深度学习的基本单元是向量。这里的 h 就是我们说的表征 ，它是一个向量，描述了我们的建模

yanglin / 0评论 2019-07-01

len(x) 击败 x.len()，从内置函数看 Python 的设计思想

内置函数是 Python 的一大特色，用极简的语法实现很多常用的操作。它们预先定义在内置命名空间中，开箱即用，所见即所得。Python 被公认是一种新手友好型的语言，这种说法能够成立，内置函数在其中起到了极关键的作用。举个例子，求字符串 x 的长度，Pyt

chaigang / 0评论 2019-07-01

浅析阿里分布式事务组件 fescar 2pc 的设计思想

二阶段提交协议的由来X/Open 组织提出了分布式事务处理的规范 DTP 模型，该模型中主要定义了三个基本组件，分别是。一般，我们称 TM 为事务的协调者，而称 RM 为事务的参与者。TM 与 RM 之间的通信接口，则由 XA 规范来约定。

lizhiyong / 0评论 2019-07-01

从Express到Nestjs，谈谈Nestjs的设计思想和使用方法

最近已经使用过一段时间的nestjs,让人写着有一种java spring的感觉，nestjs可以使用express的所有中间件，此外完美的支持typescript,与数据库关系映射typeorm配合使用可以快速的编写一个接口网关。本文会介绍一下作为一款企

lizhiyong / 0评论 2019-06-30

Java PlugIn 设计思想

ps开发组设计好一种支持效果装饰功能的接口。而在photoshop方面，开发组只需要定义好接口，只需要负责自己的主程序，也不需要把社会上所 有的开发的插件都加到主程序里面全部一次性的编译，并且发布。首先建立一个interface类，然后导出成一个jar包。

CherrylinORC / 0评论 2015-07-24

转：以用户为中心的设计思想要素或层面

以用户为中心的设计被定义为 “创建高效且引人入胜用户体验的方法” 在前面一篇文章里我们将其设计思想归结为一句简单而朴素的语言即：在开发产品的每一个步骤中，都把用户列入考虑范围。但这个简单思想之下的含义却出乎意料的复杂，究竟该遵循什么步骤或方法，如何才能实现

wangcaipang / 0评论 2014-08-15

数据可视化之clay:设计思想和建立初衷

项目背景随着大数据的发展和数据本身在日常生活中日益增长的价值，以更加友好的方式把数据呈现给用户显得越来越重要，而其中，可交互的图表目前看来会是一个不错的选择。然而，clay.js的设计思想和他们不同，是包容而非竞争。和别的库不同的是，clay关注的重点是绘

石山下 / 0评论 2019-06-29

揭秘jbpm流程引擎内核设计思想及构架

3什么是流程引擎内核？流程引擎内核仅是“满足Process基本运行”的最微小结构，而整个引擎则要复杂很多，包括“状态存储”、“事件处理”、“组织适配”、“时间调度”、“消息服务”等等外围的服务性功能。引擎内核，仅包含最基本的对象和服务，以及用于解决流程运行

CherrylinORC / 0评论 2012-07-31

jquery 设计思想

jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()，然后得到被选中的元素。$.not; /

81497307 / 0评论 2016-04-28

设计思想

如果有这样的业务场景，业务只能被创建他的member删除，那么必须要加member_id。比如洗衣机，可以把它认为是领域模型，它提供洗衣，脱水的方法。如果不对领域模型细化就会得到合同,账户这种过于抽象的领域模型，最后成了众矢之的。

zhounan00 / 0评论 2011-10-17

揭秘jbpm流程引擎内核设计思想及构架

3什么是流程引擎内核？所以在此之前，国内尚未有一篇技术文章探讨工作流引擎内核的实现，当然也没有探讨jbpm引擎内核的文章了。本篇就是以jbpm为实例，来诠释工作流引擎的内核设计思路和结构。相比较而言，jbpm的模型比较复杂，而引擎内核实现的比较“精简”，非

特 / 0评论 2011-10-12

Redux设计思想与使用场景

然而，当触及最根本的问题，为什么要使用 Redux 的时候，很多人是说不清楚的。本文尝试解读 Redux 的设计初衷，并结合 React 谈谈实际的使用场景。本文只谈理论，不会对 Redux 的使用作过多的介绍。Redux is a predictable

lizhiyong / 0评论 2019-06-27

高级 Java 必须突破的 10 个知识点！

工作多少年了，还在传统公司写if / for 等简单的代码？那你就真的要被社会淘汰了，工作多年其实你与初级工程师又有多少区别呢？那么作为一个高级Java攻城狮需要突破哪些知识点呢？

anqier / 0评论 2019-06-27

MVC设计思想

Java开发者对MVC框架一定不陌生，从Struts到WebWork，JavaMVC框架层出不穷。我们已经习惯了处理*.do或*.action风格的URL，为每一个URL编写一个控制器，并继承一个Action或者Controller接口。然而，流行的Web

wangcaipang / 0评论 2011-03-21

揭秘jbpm流程引擎内核设计思想及构架

引擎内核，仅包含最基本的对象和服务，以及用于解决流程运行问题的调度机制和执行机制。所以在此之前，国内尚未有一篇技术文章探讨工作流引擎内核的实现，当然也没有探讨jBpm引擎内核的文章了。比如基于Activity Diagram模型的jBpm和基于FSM模型的

wangcaipang / 0评论 2011-02-23

jQuery设计思想

目前，互联网上最好的jQuery入门教材，是RebeccaMurphey写的《jQuery基础》。在Google里搜索"jQuery培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。我对它做了一个详细的笔记

83453065 / 0评论 2014-08-04

揭秘jbpm流程引擎内核设计思想及构架

　3什么是流程引擎内核？流程引擎内核仅是“满足Process基本运行”的最微小结构，而整个引擎则要复杂很多，包括“状态存储”、“事件处理”、“组织适配”、“时间调度”、“消息服务”等等外围的服务性功能。引擎内核，仅包含最基本的对象和服务，以及用于解决流程运

CherrylinORC / 0评论 2010-12-22

Spring DAO层的设计思想

Spring对多个持久化技术提供了集成的支持，包括Hibernate、iBatis、JDO、JPA、TopLink，此外，还通过SpringJDBC框架对JDBCAPI进行简化。Spring面向DAO制定了一个通用的异常体系，屏蔽具体持久化技术的异常，使业

haidaoxianzi / 0评论 2010-11-08

从 setState promise 化的探讨 体会 React 团队设计思想

从 setState 那个众所周知的小秘密说起...在 React 组件中，调用 this.setState() 是最基本的场景。这个方法描述了 state 的变化、触发了组件 re-rendering。但是，也许看似平常的 this.setState()

titans / 0评论 2019-06-21

聊聊 React Router v4 的设计思想

React Router v4 发布已经有几个月了，但好像并没有得到太多人的青睐，大家还是习惯使用v2、v3版本。React Router v4 最大的变更，不是API的变更，而是从静态路由到动态路由的变化。不管是前端开发，还是后端开发，只要涉及到路由，大

baohuanlove / 0评论 2019-06-21

DDD(领域驱动设计)<一>

领域驱动设计把业务层分为应用层和领域层。应用层只是一种指挥的角色，无状态转换，无实体的层。而领域层包含po，vo，service。

精于心敏于行 / 0评论 2010-01-26

面向对象分析和设计

这本书讲得内容是UML和模式的应用，这本书和任何一本书一样，只是工具，通过工具的学习，了解其背后的思想，本书想你传达的是对象思想，学习和锻炼对象思想，是进行所有其他事物的前提，我们怎么到达呢，想老子的大道一样，也是有一个分析和领悟的过程，这本工具书也就是帮

dream00csdn / 0评论 2010-01-25

jdbc数据源

数据源设计思想和数据库连接池设计思想基本相似。大家知道在操作数据库程序时，创建连接所占用时间最多，为了提高程序的效率，便出现了数据库连接池技术。数据库连接池实现原理：在系统启动时便创建一定数量连接，将它们放在线程安全的集合中，当某段程序要连接数据库时，不必

Jhonse技术 / 0评论 2010-01-20

架构师之路系列一 - OO思想与设计模式前章！！！

----能够正视失败和错误，而不回避和掩盖，正是职业架构师的宝贵素养！！！自己写这篇博文的目的，是希望和大家一同分享设计模式的美感，进行有效地模式挖掘。作为引子，我们必须精通OO理念，也为后续设计模式的学习，打下良好的基础。违反其中的任何一个原则，都有可能

dream00csdn / 0评论 2009-09-05

思想驱动架构！

只有具备了足够是架构思想才能设计出好的系统架构出来。架构思想是人们在实践过程中的一种典范，是经过不断总结形成的一种最佳应用，例如设计模式就是其中一种，架构是多种设计综合在一起用来解决目前遇到的问题的一种组合。目前我实践中应用到的前端架构就包括了：strut

fandong / 0评论 2009-08-06

Javascript继承机制的设计思想

转自：

homesmile / 0评论 2012-04-25

java远程设计思想

以上三个步骤是最原始的屏幕监视设计思路，然后我们再将以上三个步骤循环的有序执行，再添加上将监控端的鼠标和键盘的操作传送到被控端，并且执行就可以了。

cgnine / 0评论 2011-12-07