CSS编辑元素的浮动
2018-06-24 01:21:21来源:未知 阅读 ()
1.元素浮动:
1)使用 float:left; 这样的格式设置元素的浮动方式,属性值可以是left,right;
2)元素设置为左浮动时,元素将从原区域浮动到浏览器的左侧页面;右浮动时,就会附在右侧的区域,而且元素是按照第一个元素在右侧的第一个位置,依次往左排列;
3)设置了浮动后,该元素相当于直接脱离元素的原来放置层,漂浮在该层之上,该元素位置下方的元素将占用该元素的位置。
2.浮动的作用:
1)子级浮动导致父级元素的高度塌陷;
解决办法:
1 ul{ 2 /*重新设置高度*/ 3 padding:10px; 4 /*触发BFC*/ 5 overflow:hidden; 6 }
2)浮动具有包裹性(浮动之后只包含内容区域);
1 <p> 2 显示内容 3 </p> 4 5 p{ 6 background-color:red; 7 float:left; 8 }
执行以上代码后,只会在“显示内容”四个字的地方将背景色渲染成红色。
3)行内元素设置浮动后改变了display属性,也就可以设置相应的content的width和height值;
1 <a href="#">点一下</a> 2 3 a{ 4 float:left; 5 }
以上代码执行后,可以在审查时看见 a 的width和height均可以设置具体的值,不再是auto。
4)元素浮动不会穿过padding区域,只会在content区域中;
1 <div> 2 <em>内容</em> 3 </div> 4 5 div em{ 6 float:right; 7 }
在网页中可以看见“内容”只是从content原来的左侧区域移动到了右侧。
5)浮动会导致脱离文档流,影响到其他的元素。(如最上面的第三点,大家可以自己用两个div来验证)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash