当前位置: 首页 > Web前端 > HTML

漂浮相关问题(第一次)

时间:2023-04-03 01:12:47 HTML

这只是我个人看到的,如果大家补充,请不要吝啬当键盘侠,谢谢!可显示元素在单据流文档中的起始位置及其排列时所占的面积。因为页面上的元素分为不同的类型,它们会根据自己的特点进行展示,在页面上所占的区域也不尽相同。内容会按照从上到下,从左到右的顺序输出。浮动浮动的定义使元素脱离文档流向指定的方向移动。当它遇到父元素或相邻浮动元素的边框时会停止。当浮动没有完全移出文档流时。取值left,right,none特点1.块状元素可以一行显示2.指定方向移动,遇到父元素或相邻浮动元素的边框时停止3.内联元素支持宽高4.breakaway文档流5.块元素的默认宽度会改变(wrapping)6.父元素的高度塌陷(破坏性)子元素浮动后,父元素的高度不会自动展开。7、换行符不会被解析成空格。浮动元素会脱离文档流,所以不属于文档流中的结构,所以换行和空格与父级无关。Feature4.脱离文档示例:html部分divdemo1

divdemo02
hellocss部分div{向左飘浮;宽度:100px;高度:100px;背景:黄绿色;}跨度{浮动:正确;宽度:100px;高度:100px;border:1pxsolid#333;}特性5.块级元素默认高度会改变
helloworld
/*css代码部分*/.div{height:50px;向左飘浮;边框:1px实心#333;}特性6、父元素高度折叠实例doyourelaizesomething?
/*csscode*/.parent{/*float:left;*/border:1pxsolid#333;}.children{width:100px;高度:100px;向左飘浮;边框:1px实心#f00;background:#ccc}7.换行符不会被解析成空格boxboxbox/*csscode*/.parent{border:1pxsolid#f00;}.box{宽度:100px;高度:200px;背景:绿色;颜色:#fff;float:left;}outofdocumentflowoutofdocumentflow是指元素在页面中没有占据位置,定位完全脱离文档流示例:html代码表示该元素不再占据页面上的位置,但文档仍然占据该位置。表示元素不再占据页面上的位置,但文档仍然占据该位置。..元素在页面中不再占据一个位置,而是指元素在页面中不再占据一个位置,但是文档仍然占据一个位置。..它是一份文件,但仍然占有一席之地。..最重要的是元素不再占据页面的位置,但是文档仍然占据位置。..表示元素不再占据页面上的位置,但文档仍然占据该位置。..表示元素不再占据页面上的位置,但文档仍然占据该位置。..表示元素不再占据页面上的位置,但文档仍然占据该位置。..表示元素不再占据页面上的位置,但文档仍然占据该位置。..表示元素不再占据页面上的位置,但文档仍然占据该位置。..csscode.div1{宽度:100px;高度:50px;背景:绿色;颜色:#fff;边框:5px纯蓝色;向左飘浮;/*边距:20px;内边距:20px;*/}span{width:100px;height:50px;}float和inline-block的区别对于这个区别,除了前面文档流和父元素高度塌陷的区别外,还有一个区别:如果一行元素有不同的heights接下来,如果你想让它们按顺序排列,你可以选择inline-block实例:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
/*css代码*/ul{宽度:300px;字体大小:0;}li{列表样式:无;宽度:100px;高度:150px;背景:绿色;字体大小:40px;文本对齐:居中;行高:150px;颜色:#fff;/*float:left;*//*float:right;*/display:inline-block;}清浮的几种方法:清浮方法一、clear2、添加到parent有时候父级不能加高度,所以这个方法没用(当父级没有高度时)3.inline-block特性和前面的clearfloat一直一样,同时加完之后没有办法让这个元素居中4.overflow:hidden;如果child有定位,而这个定位超出了parent的范围,那么它是不可见的,所以不能加上这个命令。5、空标签和空标签内容,但其作用是清空浮动,所以不符合行为、风格、结构分离的标准。ie6下的标签最小高度为19px,解决后会有2个像素的偏差。6.br清除浮动和上面的问题是一样的7.after伪类清除浮动after表示被选元素的内容。lastafter伪类的内容默认为一个内联元素content设置的内容代码示例:/*csscode*/.parent{border:1pxsolid#f00;/*height:100px;*//*display:inline-block;margin:0auto;*//*溢出:隐藏;*/}.clearfix:after{内容:'';显示:块;clear:both;}.box{宽度:100px;高度:100px;背景:绿色;向左飘浮;}