文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

第五节 关于浮动和清除浮动的解说，以及两个大坑不要踩

1489394897277012185.png 发现问题了吗，各位？本来是一个p元素，当我在它里面放一个div元素的时候，一个p元素竟然被分成了两个，同学们，这样是不是很危险啊？...那么，有没有什么办法，让多个块级元素在同一行显示呢？当然是有的，我们可以采用浮动布局，也就是说，让这些div元素“飘起来”，注意哦，飘起来以后，有两个方向，一个是向左漂浮，另一个则是向右漂浮。...1489392103105078631.png 为什么呀，刚才我们是不是已经说了呀，当我们给一个行内元素设置宽度和高度，是不是没有用的呀？...首先，为了方便起见，我们把float：left，float:right这两个样式也封装一下，作为一个通用的工具样式，先把上一节课的tool.css拷贝过来： ?...1489393077777071613.png 这样的好处就是，我们不必单独写浮动的样式表了，在box中，把浮动样式删掉： ?

1.1K70

React 函数组件不是有状态吗，为什么还要说他是纯函数

，但问题就在于，我们写的组件是有内部状态，这样的函数就不是纯函数了，这怎么能算是函数式编程呢？...UI = f(state) 0、hook 的特性 我们在声明一个函数式组件时，常常会使用到 hook 来声明一些状态或者方法，但是我们在使用 hook 时，你会发现 hook 会有一些奇怪的规则，那么就是不能把...但这真的是设计缺陷吗？ 我们只需要换个思路，你就能对这个现象豁然开朗。 1、hook 存在哪？...在初学阶段，我们会很自然的认为，当我们使用 useState 在函数内部定义了一个状态时，那么这个状态一定是保存在这个函数内部的 function Demo() { const [count, setCount...这个时候代码逻辑中，就会把第二个参数当成第一个参数去使用，这不就乱了吗？ 当我们调用 setState 时，表示入参正在发生变化，函数自然也会重新执行。

20910
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    初识Linux · 文件系统

    前言： 前文我们介绍了磁盘，介绍磁盘的原因是因为我们需要在理解文件系统之前，通过磁盘的了解，介绍一些文件相关的内容，比如文件是如何在磁盘里面存储的，什么是CHS定址法，为什么OS不使用CHS定址法，什么是...这种查找数据的方法叫做ext2文件系统，我们目前大多数使用的都是ext2，还有ext3 ext4等。 所以对于inode结构体我们就知道了个所以然，那么inode bitmap？那不就是同理了吗！！...对于剩下的两个，比如GDT，也就是Group Descriptor table，翻译过来叫做块组描述符，描述的是块组的属性信息，其实就是这个块的信息了，这更加体现了一种分治的思想。...那么提问，既然是记录所有的结构信息，为什么要整这么多个呢？ 因为磁盘是可能损坏的，如果损坏的时候，刚好磁头给一个超级块的内容消除了，那么这不就完蛋了吗？？所有多存储几个，增加了容错率！！...到了这里，相信同学们能理解为什么一个目录下不能创建多个同名文件了吧？因为如果创建了同名文件，映射关系一乱，整个文件系统就瘫痪了。 可是！！当我们修改目录的时候，用的还是目录名啊！！

    11110

    密码安全与会话安全

    系统服务器需要存储用户密码，才能在用户登录时验证密码的正确性，但存储就会有泄露的风险，比如数据库被偷，服务器被入侵，内部员工泄露数据，被撞库等风险。因此我们需要认真地考虑如何安全存储用户密码。...这也就是所谓的彩虹表攻击。 解决被彩虹表攻击的问题对密码也有一定的要求，比如要求密码的复杂度，需要不同类型的字符进行组合，在生成摘要时加点盐来防止穷举破解密码。但这就安全了吗？还不够。...（很多可以通过MD5/SHA值进行反向查询，都是已经存储了大量的彩虹表） 密码传输安全 解决了密码存储安全，再来看密码传输安全。有人会说使用https就能解决网络传输的安全问题，但这还是不够。...当然无密码肯定是比有密码使用上更方便快捷，随着技术的发展，这些问题也都会解决，只是也会有更多的安全问题。 我们再来看会话安全（密码安全还有各种各样的问题，篇幅有限，不再聊了）。...举个例子，当我在浏览器中登录了某银行的网站，进行了转账操作，浏览器调用了https://www.xxx.com/transfer?

    1.3K10

    我为什么红包越抢越穷？

    基尼系数来判断 我们注意到，在游戏最开始的时候，大家的资金都是一样的50元，而在100次接力之后，几家欢喜几家愁，贫富差距被拉大了。于是我们有两个很自然的问题： 1）如何量化这种贫富差距？...基尼系数通常被用来衡量一个国家居民收入的公平性，其取值在0到1之间，越大表示贫富差距越大，即少部分的人掌握了这个经济体大部分的收入。...可以看出，按照贫富差距排序，从大到小分别是：玩法5>玩法2>玩法1>玩法3>玩法4。 怎么样，你猜对了吗？ 我相信你一定被4和5之间的“天壤之别”惊呆了。为什么一个是最大，而另一个甚至是平坦的呢？...其实，规则里面4和5这两个系数非常关键。在α=2、分10个包的条件下，第一名平均能拿到红包金额的23%左右。4乘以23%得到0.92块钱封顶，会让每个红包稳定在30元附近，因此贫富差距就按照“正常”的趋势逐渐加大了。

    44020

    Web前端最全面试宝典- CSS篇

    4.页面导入样式时，使用link和@import有什么区别？...引用的CSS会等到页面被加载完再加载; 3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; 5.你能描述一下渐进增强和优雅降级之间的不同吗?...折叠结果遵循下列计算规则： 1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。...3）两个外边距一正一负时，折叠结果是两者的相加的和。 7. Sass、LESS是什么？大家为什么要使用他们？ 他们是CSS预处理器。他是CSS上的一种抽象层。...LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。 为什么要使用它们？ 1）结构清晰，便于扩展。

    1.1K10

    MySQL索引底层实现原理（B树和B+树）

    -树索引，一种是哈希索引，B-树和哈希表在数据查询时的效率是非常高的。...用B树来存储2千万的索引，假如m取500： 最多3层，最多3次磁盘I/O就可以了 在真实项目中，由于数据库表的数据数量会有所控制，构建的B+树也都不会超过3层，B树则可能会有4-5层 我们在student...表中把uid设置为主键，会自动创建索引，当我们进行查询查询操作的时候 select * from student where uid=3; 使用索引查找过程：MySQL应用程序一看过滤条件的属性有索引，...而B+树将所有的叶子节点都串在链表上，做区间搜索以及整表遍历比平衡树快 当我们回答问题的时候，不要1 2 3这样把答案背出来，这样效果是很差的，我们回答索引的底层原理的时候可以这样回答： 当我们select...甚至还可以解释一下为什么使用B+树而不使用B树。

    2.1K30

    【大牛经验】给新人程序员一些经验

    然后就是投简历找工作，我预想的是有了工作经验再找工作应该不像当年刚毕业找工作那么难了吧，实际上却是当我拿着3年工作经验的简历面试了一些公司之后发现，其实我的能力对于胜任3年工作经验的工程师岗位还是有些差距的...，如redis mongodb membase 等等 　　你需要掌握基本使用，和根据业务逻辑设计表，索引，视图，存储过程，函数等 5....前端开发基础 html css js 　　如果你不是专攻服务器编程的话，你一定会接触前端开发，这其中html你需要掌握各种标签的使用，css首先你得看得懂是吧，js 目前来看属于一门独立的程序设计语言...，也是前端中非常重要的一块，需要掌握其语法和一些常用框架如jquery，extjs等的使用（我之前的公司前端只负责切html和css，js啥的都是我们自己来） 8....虽然感觉平常的工作中用到的不多，但还是觉得这是一个内功的东西，不会这两样也许你也可以完成很多开发工作，但是如果你精通这两样，你的思想境界和思考问题的高度就不是一般人能比的了，如果想要在程序员这条路上继续走下去

    1K80

    CSS预编译技术之SASS学习经验小结

    [FungLeo原创]CSS预编译技术之SASS学习经验小结 前言 接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些...我是先接触的less,用了一年多,感觉还好.一直没有研究得多深,但是写起来也确实方便.直到去年,来到目前这家公司,要求,全面转入sass.当我正是用sass书写css一个星期之后,我决定,忘记less,...因为sass分为两个版本,一个是sass,其特点是使用严格的缩进来控制,省略掉了分号和花括号(肯定是Python程序员的主意-_-); 另一个版本是scss,这个版本,是使用花括号和分号的,更接近我们这些本来就是前端工程师的人的使用习惯...如果你看了上面的给出的入门教程,或者本身就会sass你可能会有一个疑问,为什么是.cf ,不应该是 %cf 吗? 你说的没错....在移动端的支持非常好,但是,还是不能滥用这个属性,因为安卓4.4以下不支持 calc\vw\vh 等属性,并且,即便你的手机是最新的系统,但如果你使用某些国产浏览器,还可能不支持这些东西.比如猎豹和某些微信版本自带的浏览器

    47220

    抢红包统计学（技术贴，知道为啥自己越抢越穷了吧）

    基尼系数来判断 我们注意到，在游戏最开始的时候，大家的资金都是一样的50元，而在100次接力之后，几家欢喜几家愁，贫富差距被拉大了。于是我们有两个很自然的问题： 1）如何量化这种贫富差距？...基尼系数通常被用来衡量一个国家居民收入的公平性，其取值在0到1之间，越大表示贫富差距越大，即少部分的人掌握了这个经济体大部分的收入。...可以看出，按照贫富差距排序，从大到小分别是：玩法5>玩法2>玩法1>玩法3>玩法4。 怎么样，你猜对了吗？ 我相信你一定被4和5之间的“天壤之别”惊呆了。为什么一个是最大，而另一个甚至是平坦的呢？...其实，规则里面4和5这两个系数非常关键。在α=2、分10个包的条件下，第一名平均能拿到红包金额的23%左右。4乘以23%得到0.92块钱封顶，会让每个红包稳定在30元附近，因此贫富差距就按照“正常”的趋势逐渐加大了。

    1.4K50

    CSS 不变性

    每当我给客户和研讨班学生提出下面这个建议时，他们都会非常震惊： 我推荐使用 !important。 大多数情况下，大家的第一反应是厌恶—— !...如果我们知道某个东西永远保持不变，那写起代码来不就轻松多了吗？我真的超级喜欢不变性！ 不过在 CSS 中想实现不变性难度很大，因为 CSS 是基于继承设计的，其中大量应用到可变性。...简而言之，这就是为什么我们应该在工具样式中使用 !important。我们希望工具样式是不变的；无论在什么情况下，当我们使用 u-text-center的时候，一定是想要让文字居中。 给工具类加上 !...{} .c-btn--large {} 它们会有一个作用域（也就是BEM中的一个块），并且被封装起来。...这样做的好处是在 HTML 中可以清楚地看出类之间的关系（在函数式 CSS 中这很难——或者说不可能——办到），如下所示： <blockquote class="o-media c-testimonial

    56620

    【HTTP】请求“报头”（Host、Content-LengthContent-Type、User-Agent（简称 UA））

    Host 表示服务器主机的地址和端口号 URL 里面不是已经有 Host 了吗，为什么还要写一次？...指向的是代理服务器的 IP；Host 中的 IP 指向的是最终目标的地址 Content-Length/Content-Type 这俩都和 body 密切相关，如果你这个数据包没有 body，也就不会有这两个字段...这个格式的特点，认为是把 query string 放到 body 中了 multipart /form-data 上传文件时使用的 第二种格式也是可以的 响应中： text / plain，纯文本...quote] 抓的包是灰色的 由于浏览器和服务器之间要进行多次网络交互，整体的过程是比较低效的 为了提升效率，就会把一些固定不变的内容在浏览器本地的机器硬盘上进行缓存（css、图片、js 很少发生改变...描述了用户在使用什么样的设备在上网 上古时期，UA 是非常关键的部分，不同用户使用的上网的设备差异很大（当年计算机发展日新月异），在同一个时间段内，新的和旧的会同时存在 最老的浏览器，只能显示文本 之后能显示图片

    17710

    理解 CSS 布局和 BFC

    在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。...什么是 BFC 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。...这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...折叠的结果按照如下规则计算： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。...overflow或其他的方法创建BFC时会有两个问题。

    1.2K00

    《CSS 世界》读书笔记-流与宽高

    作为前端新手，经常会坐在显示器前花很多很多时间去 “追” 视觉稿，也经常会在 “为什么这个属性不生效” 和 “为什么这个属性生效了但是不是我想要的效果” 之间摇摆，直到我开始看张鑫旭老师的《CSS 世界...因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇读书笔记。...之前讨论的块级元素和内联元素，当我们在谈论它们是在一行还是换行显示时，实际上是谈论的外在盒子。而内在盒子实际是负责了元素的宽高和内容。...但这种宽设定却让流动性消失了，当我们给定元素设定 width: auto，元素的宽就会 “自适应” 地铺满容器，而给定了 width 值会让这种流动性消失。...总结 在这篇笔记中，主要总结了流与宽高之间是如何相互影响的，同时还探索了部分盒模型的问题。希望能给大家在平常开发时，带来一定的启发。 紧追技术前沿，深挖专业领域 扫码关注我们吧！

    1.3K20

    理解 Css 布局和 BFC

    在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。...什么是 BFC 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。...删除一些文本 这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...折叠的结果按照如下规则计算： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。...创建 BFC 的新方式 使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。

    1.4K00

    CSS中重要的BFC概念

    CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。...垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。...比如下面栗子的特殊情况 使用BFC阻止多列布局最后一列换行 5.4 阻止相邻元素的margin合并 属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl...所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。...这里问题来了： 我们知道设置position和float会让元素脱离文档流并且又创建新的BFC，所以两个元素就不是相邻元素了，因此可以阻止相邻元素margin合并，但是inline-block、inline-flex

    1.4K11

    2022 年最受瞩目的新特性 CSS @layer 到底是个啥？

    当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。 同时，当样式优先级感到难以控制时，开发者习惯滥用 !...@layer 级联层如何使用呢？ # 通过 @layer 级联层管理样式优先级 @layer 级联层最大的功能，就是用于控制不同样式之间的优先级。...大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即页面主题，可以理解为页面作者样式 用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验，自定义用户偏好，可以理解为用户样式...important 样式 在比较 !important 规则时，优先级顺序与正常规则相反，在正常状态下优先级越低的，在 !...polyfill 初步使用它，相信在不久的将来，它将会成为业务 CSS 代码中必不可少的一部分。

    48510

    2022 年最受瞩目的新特性 CSS @layer 到底是个啥？

    当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。 同时，当样式优先级感到难以控制时，开发者习惯滥用 !...@layer 级联层如何使用呢？ 通过 @layer 级联层管理样式优先级 @layer 级联层最大的功能，就是用于控制不同样式之间的优先级。...大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即页面主题，可以理解为页面作者样式 用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验，自定义用户偏好，可以理解为用户样式...important 样式 在比较 !important 规则时，优先级顺序与正常规则相反，在正常状态下优先级越低的，在 !...polyfill 初步使用它，相信在不久的将来，它将会成为业务 CSS 代码中必不可少的一部分。

    67310
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券