display与float的区别

最新推荐文章于 2024-07-25 16:45:46 发布
最新推荐文章于 2024-07-25 16:45:46 发布
阅读量940 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43372535/article/details/121625053
版权

display

display属性

display特性

块级元素与行级元素的转变

控制块元素排到一行

控制元素的显示和隐藏

 float

float属性

 display：inline-block和float的区别

display可以让元素排在第一行，并且支持宽度和高度代码实现起来方便

位置方向不可控，会解析空格

IE6.IE7上不支持

float可以让元素排在一行并制作宽度和高度，可以决定排列方向

float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

hhhhhhhhhhyou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
‘display‘、‘position‘和‘float‘的相互关系？
weixin_47450807的博客
04-08 1142
一、这三种属性之间的关系和相互作用效果可以用下图表示： display转化表 设定值 转换后 inline-table table inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption table 其他 保持设定值 二、具体流程如下所示
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边 浮动的目的： 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性 1.任何申明为 float 的元素自动被设
CSS19：display和float对比
搬运工
02-25 457
display 和 float 都可以使元素在同一行，但是也各有缺点。 display：元素方向不可能控制 float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
浮动display和float
屿屿屿屿屿的博客
06-27 969
块级元素：独占一行 h1-h6 p div 列表…行内元素：不独占一行 span a img strong 3、float 1、左右浮动 float 4、父级边框塌陷问题(以float为例) 增加父级元素的高度 增加一个空的div标签，设置属性 父级元素增加属性 父类增加一个伪类 小结：**浮动元后面增加空div简单，代码中尽量避免空div设置父元素的高度简单，元素假设有了固定的高度，就会被限制overflow简单，下拉的一些场景避免使用父类添加一个伪类：after写法稍微复杂一
display和float的用法详解
weixin_50500741的博客
03-12 1277
目录 （1）块级元素（block) （2）行内元素（inline） 一、flaot的属性：实现元素的浮动 1、左浮动 （1）两者均未使用浮动时 （2）仅box1左浮动 （3）仅box2左浮动 （4）box1和box2均左浮动 2、右浮动 （1）仅box1右浮动 （2）仅box2右浮动 （3）box1和box2均右浮动 二、display的属性：规定元素应该生成的框的类型 (1)display: inline-block (2)覆盖默认的 Display 值 1...
display与position，float之间的关系
weixin_44392745的博客
06-26 811
positon 与 display 的相互关系 元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。 relative : 原来是什么类型的依旧是什么类型。 absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位 <span style=”position:absolute; width:100px; height:50px;”>sp
display:flex代替float
zzz19的博客
09-12 2071
昨天做一个css的东西，在开始用js的时候才发现被float占位了 因为float浮动起来了，我清除了浮动，但是还是占位 然后我同事就告诉我其实可以不用float来左右浮动 在父元素上用display...
css中display和float使用记录
生而为人我很抱歉
11-10 558
css中display和float使用记录
CSS display & float详解
兜兜88的博客
04-07 3192
一、display属性 　　display属性的作用是规定元素以什么方式渲染。常用的值如下： 　　　　none：不被渲染 　　　　block：以块级元素渲染 　　　　inline：以内联元素渲染 　　　　inline-block：以行内块渲染 　　　　inherit：继承父级容器的渲染方式 1．元素渲染类型 　　浏览器对每个html元素有默认的渲染类型，默认为块级元素的主要有：di
CSS display:inline和float:left两者区别探讨
09-25
`display:inline` 和 `float:left` 的主要区别在于： 1. **布局方式**：`display:inline` 保持元素在行内排列，而 `float:left` 则使元素脱离正常文档流并允许其他元素环绕它。 2. **宽度和高度**：内联元素不能...
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
网站基本布局CSS
m0_46608027的博客
07-24 791
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
贵林之恋的博客
07-24 292
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
css 作业 2
没有 bug 的代码是不完美的！
07-25 649
写完了
CSS 创建：从入门到精通
wjs2024的博客
07-24 380
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
智能编程，一触即发：使用AIGC优化CSS——提升前端开发效率与质量
最新发布
程序边界
07-25 3948
利用关键帧创建动画使用网格和Flexbox等布局技巧对表单元素进行样式化，包括单选按钮嵌入字体以及与排版相关的样式利用伪元素和媒体查询进行条件样式化Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。Michael Gearon是一位用户体验设计师和前端开发者，曾与许多知名品牌合作过。本书通过12个项目逐步引导设计师和开发者学习CSS。
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 286
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
CSS实现表格无限轮播
像鱼的博客
07-24 207
在React中，用CSS实现表格无线轮播
float与display:flex的区别
09-03
引用中提到，float和display:flex都可以实现元素横向排列，但存在一定的区别。float是CSS属性，用于将元素浮动到其容器的左侧或右侧，以便其他元素可以在其周围进行布局。而display:flex是一种CSS布局模型，用于将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值