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

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对后面元素的浮动影响
5、隐形改变display的类型:不管是什么类型的元素,只要设置其样式为:position:absolute;float:left/right后dispaly就变为了inline-block;这样就可以设置宽高了。
 
上一篇:CSS box-flex属性,然后弹性盒子模型简介


下一篇:Comet、SSE、技术