梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > CSS3基础教程-浮动定位、float元素使用方法【附免费视频教程】

CSS3基础教程-浮动定位、float元素使用方法【附免费视频教程】

时间:2018-08-09 21:41 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

1、浮动
1、定位
1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为 文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列
 
<body>
<div id="d1">Hello</div>
<div id="d2">World</div>
<span>Hello</span>
<span>World</span>
</body>
4、浮动定位
1、什么是浮动定位
如果将元素的定位方式设定为浮动定位的话,那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流,不占据页面空间,其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边,或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示
2、属性
属性:float
取值:
1、none
默认值,无浮动定位
2、left
左浮动,让元素停靠在父元素的左边,或紧挨着左侧已有的浮动元素
3、right
右浮动,让元素停靠在父元素的右边,或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时,那么最后一个子元素将换行显示
2、元素一旦浮动起来之后,元素的宽度将变成自适应(内容决定宽度),前提:不指定元素宽度的情况下
3、元素一旦浮动起来之后,都将变成块级元素,尤其对行内元素影响较大
块级元素:允许修改尺寸
行内元素:不允许修改尺寸
4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的。
6、清除浮动影响
属性:clear
取值:
1、none
默认值,不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流,所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话,那么该元素的高度将变成0
解决方案:
1、直接设置父元素高度
弊端:必须要知道父元素高度是多少
2、设置父元素也浮动
弊端:对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值:hidden 或 auto
弊端:如果有内容要以溢出的方式显示的话,也一同被隐藏了。
4、在父元素中,追加空子级块级元素,并设置其clear属性值为 both
 

CSS3基础入门-浮动定位、float元素使用方法【附免费视频教程】


 
本文标签:

版权声明:本文:CSS3基础教程-浮动定位、float元素使用方法【附免费视频教程】 由重庆网站制作公司(www.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部