码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习笔记(float和盒子模型)

时间:2016-12-16 00:56:52      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:使用   包含   元素   定位   hid   没有   ima   固定   auto   

1、当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现。

2、盒子模型的三位立体结构图中从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

3、

设置了浮动属性(float)的元素:
1、会向指定方向(left或right)一直移动,直到容器边缘;
2、处于标准文档流中;
3、若不设置宽高,则以内容的宽高为准;
4、仅对紧邻的后续元素造成影响;

4、
清除浮动的常用方法
1、clear属性-常用clear:both;
2、clear:left,或者clear:right; 清除元素左侧或右侧的浮动 3、同时设置width:100%(或固定宽度)+overflow:hidden;也是可以清除浮动的。一般给受到浮动的元素设定的。 p{width:100%; overflow:hidden}或p{width:both}
4、在浮动元素的紧邻后续块元素之前加一个空标签(不推荐使用)
如果父包含层没有设置浮动,子包含层设置浮动,会对子包含层的父包含层和父包含层后面的会计元素产生影响!!所以要对父包含层设置清除浮动影响。
当父包含快缩成一条是,用clear:both清除浮动方法是无效的,clear:both一般用于紧邻后面的元素的清除浮动。
这种情况使用overflow:hidden会有效,
overflow:hidden 用来清除影响float对父级元素的浮动影响
clear:both;用来清除float对后面元素的浮动影响
 

CSS学习笔记(float和盒子模型)

标签:使用   包含   元素   定位   hid   没有   ima   固定   auto   

原文地址:http://www.cnblogs.com/fireporsche/p/6185288.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!