这篇文章的内容主要围绕Css的浮动定位是怎样的进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获!
浮动定位:解决了多个块级元素能在一行内显示。
什么是浮动定位。可以用如下几个特点定义。
特点一:将元素排除在文档流之外,即元素脱离文档流,不受默认排列方式(从上到下或者从左往右)的控制
特点二:浮动起来的元素将不再占用页面的空间。(元素从浏览器上原地拔起,从上往下依旧能看到浮动元素),有可能会压住其他的元素。
特点三:元素会停靠在包含框(父层元素)的左边或左边,或者停靠在已经浮动的元素的左边或者右边
特点四:元素无论怎么浮动,最终还是在包含框之内。
特点五:块级浮动之后,宽度自适应不是100%
特点六:行内元素浮动后,除了具备以上特点,它将变成块级元素,行内元素设置浮动多数是为了改变宽和高。
浮动属性:
float:定义当前元素浮动
取值:
none(默认没浮动)
left(浮动方向左边)
right(浮动方向右边)
下面做一个小练习希望对web爱好者有一个小小的帮助。可以拿代码过去看效果哦!
<!DOCTYPE HTML> <html> <head> <title>文字属性</title> <meta charset="utf-8"> <style> div{ width:200px; height:200px; } #d1{ background-color:red; float:right; /*一共三个div块级元素上下排列,设置第一个div向右浮动,后面两个补上*/ } #d2{ background-color:yellow; } #d3{ background-color:green; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </body> </html>
css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
感谢你的阅读,相信你对“Css的浮动定位是怎样的”这一问题有一定的了解,快去动手实践吧,如果想了解更多相关知识点,可以关注亿速云网站!小编会继续为大家带来更好的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。