CSS的定位，浮动与清除浮动，position的定位

2019独角兽企业重金招聘Python工程师标准>>>

CSS中的三种定位：1.标准文档流定位；2.float浮动；3.absolute定位

盒子模型的3D效果：第一层:border;第二层:center+padding;第三层:background-image;第四层:background-color;最后一层:margin;

盒子模型的尺寸:content+padding+border+margin;

盒子模型的自动居中：margin{0 auto};左右外边距设置auto即可，同时还要给width设置值，但是不可以同时各float,absolute一起使用。一般盒子元素不设置高度，随着内容进行撑高

浮动会对父级元素造成影响，因为父容器正常情况下会自动扩高，但是子元素加了浮动后位置不保留，父容器就感觉它不存在了，所以不会扩高，解决方式：给父容器加overflow:hidden解决即可。

浮动同时会给他的下一个相邻元素造成影响，使用clear:both来清楚浮动。

相对定位：relative的特点：相对于自身原有的位置进行偏移；仍然处于文档流中；原来的位置依旧占有位置

绝对定位：abosulte的特点：相对于离自己最近的的已定位的祖先元素进行偏移【一般设置他的父元素为position:relative,因为relative定位仍然处于文档流中。】；不处于文档流中；当一个元素设置了absolute以后，没有设置宽度，他的宽度会以自身的内容的尺寸进行调节；原来的位置不占有位置，已经脱离文档流。

绝对定位主要适用于：横向两列布局中的一列宽度固定，一列宽度自适应的情况，需要注意的是：设置绝对定位的这列的高度必须要小于未设置定位的那一列的高度，因为设置了绝对定位不占文档流，高度不会撑起父元素的高度

 

 

转载于:https://my.oschina.net/u/2870118/blog/899291