HTML连载47-设计思想、浮动元素高度问题
一、设计网页的思想
拿到需求之后我们先对各个模块(盒子)进行划分,然后从外到内进行设计(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-设计思想、浮动元素高度问题的更多相关文章
- 如何解决浮动元素高度塌陷---CSS
解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...
- float浮动问题:会造成父级元素高度坍塌;
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...
- css浮动中避免包含元素高度为0的4种解决方法
问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both (W3C推荐方法,兼容性较 ...
- float浮动导致父元素高度坍塌的原因及清除浮动方法
一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- Volley设计思想和流程分析
本文是对Volley思路的整体整理,并不是Volley教程,建议有Volley使用经验,但是对Volley整体不是很清楚的同学阅读. 我认为,弄清整体的流程很重要,以避免一叶障目不见泰山的囧境,而对于 ...
- MapReduce原理与设计思想
简单解释 MapReduce 算法 一个有趣的例子 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查并且数出有多少张是黑桃? MapReduce方法则是: 给在座的所有玩家中分配这摞牌 让每个玩家 ...
随机推荐
- sql server一些快捷方式和操作技巧
1.注释(ctrl+k+c) 和 取消注释(ctrl+k+u) 2.行号显示,如图:
- SQL Server获取索引创建时间&重建时间&重组时间
之前写过一篇博客"SQL Server中是否可以准确获取最后一次索引重建的时间?",里面主要讲述了三个问题:我们能否找到索引的创建时间?最后一次索引重建(Index Rebuild ...
- YourSQLDba的共享路径备份遭遇重启问题
如果YourSQLDba设置过共享路径备份(具体参考博客YourSQLDba设置共享路径备份),有时候服务器重启后,备份就会出错,具体错误信息类似如下所示: Date 2019/9/25 ...
- SSH的 Write failed: Broken pipe 问题
问题现象: 表示连接管道已经断开 解决方法: 方法一:客户端配置 在客户端的 ~/.ssh/ config文件(如不存在请自行创建)中添加下面内容: ServerAliveInterval 60 方法 ...
- 安装oracle11g客户端
1.将压缩包instantclient_11_2 解压到数据库安装目录下(D:\app\hisoft\product\11.2.0),即与dbhome_1同级目录 2.添加环境变量 至此,oracle ...
- fiddler添加IP列
willow一个规则管理插件 Ctrl+F查找“static function Main()”字符串,然后添加以下代码: FiddlerObject.UI.lvSessions.AddBoundCol ...
- C++ std::stack 基本用法
#include <iostream> #include <string> #include <stack> // https://zh.cppreference. ...
- python大作业二
一.存入csv 上次爬取到了所需要的内容,但是没有存入到csv中,这次存入了csv文件中,代码如下: import requests from bs4 import BeautifulSoup imp ...
- 阿里云搭建wordpress博客教程
一 :搭建环境 1.安装Apache环境 在线安装Apache yum install httpd 启动Apache服务 service httpd start 设置开机自启动 chkconfig h ...
- vue定义data的三种方式与区别
在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2. ...