前端歌谣的刷题之路-第一百二十六题-浮动

前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣

题目

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流，所以文档流中的元素几乎认为浮动盒子不存在。
现在给"body"标签设置宽度为300px，再给类名为"left"、"center"、"right"的盒子（左、中、右盒子）皆设置宽度、高度且都为100px，三个盒子的颜色可以自定义以便于观测。继续给中间盒子设置"float: left"属性，此时中间盒子已经是一个浮动盒子，不再占据流中的位置空间，右盒子上升到了浮动盒子的区域并且被浮动盒子覆盖住了。现在再给左、右盒子皆设置"float: left"属性，此时三个盒子水平排列在一行上。重设左盒子的宽度、高度皆为120px，可以观察到因为"body"盒子较窄，所以右盒子被迫换行并且因为左盒子的高度超过了中间盒子，右盒子被卡在了中间盒子下方。
以上为浮动盒子的特性。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

核心代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title>
</head>
<style type="text/css">* {margin: 0;padding: 0;}body {width: 300px;}.left {float: left;width: 120px;height: 120px;background-color: pink;}.center {float: left;width: 100px;height: 100px;background-color: skyblue;}.right {float: left;width: 100px;height: 100px;background-color: green;}
</style><body><div class="left"></div><div class="center"></div><div class="right"></div>
</body></html>

前端歌谣的刷题之路-第一百二十六题-浮动相关推荐

前端歌谣的刷题之路-第一百三十九题-flex-order
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的 ...
第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
前端歌谣的刷题之路-第一百三十题-absolute
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的 ...
第一百二十六期:代码以外的生存之道，献给每位入了坑的码农
本篇内容主要是对这本书的一个总结概括,也希望能用作抛砖引玉,让读者在看完之后,对这本书有所兴趣,或者希望能让读者对代码以外的需要做的事情更加积极明朗一点. 作者:码农三哥前言最近刚刚读完了一本书, ...
第一卷第一百三十六章好白菜
第一卷第一百三十六章好白菜其实我最恨两种人,一种是始乱终弃的小白脸,一种就是生孩子不养活的臭娘们儿.** 提供本书txt电子书下载 **既然你能生就要能养啊,虽然我不知道井里的那个死孩子的母亲 ...
leecode第一百五十五题（最小栈）
class MinStack { public:stack<int> cur_stack;stack<int> cur_min;//用来存储最小值的栈int min_num;M ...
mysql入门到跑路_Mysql入门二十小题(DBA老司机带你删库到跑路)2018.11.26
1. 请介绍数据库管理系统的种类及代表产品 RDBMS: mysql oracle mssql NoSQL: redis mongoab memcache 2. 请简述数据库管理系统的作用数据存 ...
oracle从删库到跑路,Mysql入门二十小题(DBA老司机带你删库到跑路)2018.11.26
1. 请介绍数据库管理系统的种类及代表产品 RDBMS: mysql oracle mssql NoSQL: redis mongoab memcache 2. 请简述数据库管理系统的作用数据存 ...
leecode第一百七十四题（地下城游戏）
class Solution { public:int calculateMinimumHP(vector<vector<int>>& dungeon) {int le ...

前端歌谣的刷题之路-第一百二十六题-浮动

前言

题目

核心代码

前端歌谣的刷题之路-第一百二十六题-浮动相关推荐

最新文章

热门文章