首页 > 其他分享 >display和浮动

display和浮动

时间:2023-09-09 11:33:05浏览次数:31  
标签:浮动 行内 span 元素 div display

div:块级元素

span:行内元素

span   display:block

 

 

 

 

 

 

 

 

display:inline-block   既是行内元素,也是块级元素

inline可以把div转为行内

 浮动,可以左右浮动

两个向左,两个向右

 

clear:清除浮动

 因为两侧都不允许有浮动元素,所以layer4另起一行

 

 

 

 理解为下面的div不允许浮动,把四个都顶上去了

 overflow:超出范围形成滚动条

 

解决父级元素塌陷(只加overflow:hidden,因为它的高度由子元素撑起来,自己本身没有高度

通过伪类:避免增加空div,原理和2一样

 

 

标签:浮动,行内,span,元素,div,display
From: https://www.cnblogs.com/zhaowang888/p/display_float.html

相关文章

  • Vue简单浮动标签(simple floating labels)
    简介及使用教程Vue简单浮动标签(simplefloatinglabels)是一个基于Vue.js的简单浮动表单标签组件,支持自定义颜色、边框及错误信息。安装npmivue-simple-floating-labels使用引入组件importFloatingLabelfrom'vue-simple-floating-labels'exportdefault{......
  • ios开发之--UISearchDisplayController的简单使用
    控件就不介绍了,UISearchDisplayController就是把searbar和tableview结合到一块了,直接上代码:.h#import<UIKit/UIKit.h>@interfaceThirdViewController:UIViewController<UITableViewDelegate,UITableViewDataSource>{NSArray*_array;NSArray*_filterData;UI......
  • CSS基础-浮动
    浮动浮动是为了元素标签的并排显示问题。我们在浏览网页的时候,经常会看到几个div块是可以并排显示的,浮动就是解决这样问题的方法之一。float属性有以下的值float:left;左浮动float:right右浮动浮动的特点浮动主要针对的是并排显示的盒子而言。在一个父容器的盒......
  • CSS中clear:both清除元素的浮动
    作用是清除元素的浮动,当一个元素的浮动属性被设置为clear:both时,它将不再受到其他元素的影响,而是被放置在文档流的最下方clear:both的运用场景clear:both的运用场景主要有以下几种:1、当两个块级元素并排放置时,可以使用clear:both来清除浮动,以使得两个元素不会互相影响。2、当一个块......
  • 使用虚拟界面的方式,解决“xhost: unable to open display.
    背景最近在做一个项目,需求是将windows开发的ocx控件移植到linux。该需求的解决方案想的是:在linux中部署docker,在docker中安装wine容器,通过wine容器启动windwos程序。由于ocx控件依赖windows的控件,因此在使用wine命令时,需要传入$DISPLAY。一开始,在给linux安装好GUI界面后,按照上......
  • 对于img跟其他标签总是有点间距的问题——将img改成display:block
    问题在学习前端的时候,设置其他元素跟img的间距,结果F12发现有一点间距在给img添加display:block后虽然还是有点,但基本大差不差,顺利解决......
  • 因为子元素的浮动,导致父元素的边框变成一条线
    因为子元素的浮动,导致父元素的边框变成一条线,如下:<style>.container{width:500px;border:1pxsolid#ccc;}p{float:left;}</style><body><divclass="container">......
  • android12 display
    实现"android12display"的步骤为了帮助这位刚入行的小白实现"android12display",我们需要按照以下步骤进行操作。下面是整件事情的流程:步骤描述1创建一个新的Android项目2在项目中添加必要的依赖3创建一个新的Activity,并在布局文件中添加一个TextView4在A......
  • 建立模型类的方法学习 DecimalField ,models.SmallIntegerField ,get_pay_type_display(
    1. total_amount=models.DecimalField(max_digits=10,decimal_places=2,verbose_name="订单总价",default=0)DecimalField:这是一个Django模型字段类型,用于存储十进制数值,通常用于表示货币和其他需要高精度计算的数值max_digits=10:这是DecimalField中的一个参数,用于指......
  • CSS2.1规范笔记——9.5 浮动
    浮动一个浮动盒会向左或向右移动,直到其外边界挨到包含块边界或者另一个浮动盒的外边界。如果存在行框,浮动盒的上外(边界)会与当前行框的上(边界)对齐。如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者再没出现过其他浮动。因为浮动盒不在常规流内,在浮动盒之前或者之后创......