扫码关注官方订阅号
在css文件中经常看到下面两种式样
display:block;
和
float:left;
感觉看了写资料和写了demo还是没能理解这两个式样具体的作用,一般什么时候需要用到这两个式样呢?请各位大大们不吝赐教
走同样的路,发现不同的人生
display: block;
此元素将显示为块级元素,此元素前后会带有换行符。
换行符
display: none;
此元素不会被显示。
display: inline;
默认。此元素会被显示为内联元素,元素前后没有换行符。
float: left
例子:segmentfault 的导航栏,撰写和消息可以使用float: left,当然之前可以定下整个的宽度。
撰写
消息
可以去了解下,页面的整体布局,块状元素;浮动也是css重要的概念,也要注意什么时候清除浮动。
补充一个知识点,float:left/right,会把元素强制转换为块级元素也就是display:block了。
楼主不明白这两个属性是做什么的,可能是基础只是没有理解,实战不够,建议先理解CSS中的盒模型
网页中的所有元素,也就是HTML中的p, h1, p, 等等元素,都可以理解成一个盒子;有些盒子的宽度默认是100%(block, 块),有的盒子的宽度是根据其中内容的宽度自适应的(inline, 行内); 当然,display: none, 就把这个元素隐藏了;
p
h1
block
inline
display: none
display是个很重要的属性,这个属性有很多值,像block, inline, inline-block(兼), table, table-cell, table-row, none;
display
inline-block
table
table-cell
table-row
none
如果你理解了浏览器的渲染机制, float就很容易理解了, float, position: absolute|fixed等几个常用的属性,都会使元素脱离正常的文档流, 你可以将浏览器渲染想成一张纸, HTML元素根据自身的特性一个一个画到纸上,但是当遇到float等元素的时候, 就在纸的"上"面, 不在纸上画.....不明白再问吧.....
float
position: absolute|fixed
display 是设置显示方式,float是设置浮动、例如左右浮动。例如,导航就经常用到这两个,导航一般都用无需列表来做,设置float就可以把导航横放,再设置子菜单display:none,当hover的时候display就显示。
display:block,把元素的显示方式修改为块级元素,即元素独占一行,同时可以设定宽高; float:left ,是设置元素的浮动为左浮动
display:block和display:inline对应,通俗点说,block不需要撑开,能直接设置margin或是width或height,而inline则不能做到,float:left一般用在横向导航条中,当然也可以用display:inline-block实现
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
此元素将显示为块级元素,此元素前后会带有
换行符。此元素不会被显示。
默认。此元素会被显示为内联元素,元素前后没有换行符。
例子:segmentfault 的导航栏,
撰写和消息可以使用float: left,当然之前可以定下整个的宽度。可以去了解下,页面的整体布局,块状元素;浮动也是css重要的概念,也要注意什么时候清除浮动。
补充一个知识点,float:left/right,会把元素强制转换为块级元素也就是display:block了。
楼主不明白这两个属性是做什么的,可能是基础只是没有理解,实战不够,建议先理解CSS中的盒模型
网页中的所有元素,也就是HTML中的
p,h1,p, 等等元素,都可以理解成一个盒子;有些盒子的宽度默认是100%(block, 块),有的盒子的宽度是根据其中内容的宽度自适应的(inline, 行内); 当然,display: none, 就把这个元素隐藏了;display是个很重要的属性,这个属性有很多值,像block,inline,inline-block(兼),table,table-cell,table-row,none;如果你理解了浏览器的渲染机制,
float就很容易理解了,float,position: absolute|fixed等几个常用的属性,都会使元素脱离正常的文档流, 你可以将浏览器渲染想成一张纸, HTML元素根据自身的特性一个一个画到纸上,但是当遇到float等元素的时候, 就在纸的"上"面, 不在纸上画.....不明白再问吧.....display 是设置显示方式,float是设置浮动、例如左右浮动。例如,导航就经常用到这两个,导航一般都用无需列表来做,设置float就可以把导航横放,再设置子菜单display:none,当hover的时候display就显示。
display:block,把元素的显示方式修改为块级元素,即元素独占一行,同时可以设定宽高;
float:left ,是设置元素的浮动为左浮动
display:block和display:inline对应,通俗点说,block不需要撑开,能直接设置margin或是width或height,而inline则不能做到,float:left一般用在横向导航条中,当然也可以用display:inline-block实现