您现在的位置:首页 >> 前端 >> 内容

浮动与定位

时间:2017/7/7 10:40:49 点击:

  核心提示:浮动与定位浮动浮动元素会以某种方式从文档的正常流中删除,再按照属性值移动到制定的位置,浮动元素从某种意义上来说自成一派,但是他仍会对文档布局产生影响。注意事项a.如果要对一个非替换元素进行浮动,那么必...

浮动与定位
浮动
浮动元素会以某种方式从文档的正常流中删除,再按照属性值移动到制定的位置,浮动元素从某种意义上来说自成一派,但是他仍会对文档布局产生影响。
注意事项
a.如果要对一个非替换元素进行浮动,那么必须为该元素声明一个宽度,否则,根据CSS规则,元素宽度近似为0,元素布局将会出现意想不到的结果。
b.元素声明为浮动属性之后,将会生成一个块级元素框,无论之前是否是块级元素。
c.浮动元素的左(右)边界必须是之前浮动元素的右(左)边界,在垂直方向上要尽可能地高,但是顶端不能比之前所有浮动元素,块级元素以及父元素的顶端高。从而充分保证了浮动元素不会重叠。
d.行内框与浮动元素重叠时,其边框、背景和内容都在浮动元素之上显示(也就是说浮动元素会被覆盖);而块级框与浮动元素重叠时,其边框和背景在浮动元素之下显示,内容在浮动元素之上显示(边框和背景被覆盖,内容不会被覆盖)
小技巧:子元素浮动,父元素高度为auto时,并没有获取到值,只需要加上空p,并将其clear设置为both,即

 

 

定位
position包括static、relative、absolute、fixed和inherit五个属性值。
static:元素默认属性。
relative:元素偏移,但保留其原本所占的空间。
absolute:元素从文档流中删除,定位后生成一个块级框,无论他原来是什么类型。
fixed:性质与absolute类似,但他相对于视窗定位,比如打开网页时右下角总会固定出现广告。
元素(非根元素)的position值relative与absolute都是相对于包含块定位的,下面对包含块进行介绍。
1.对于relative,包含块由最近的块级框、表单元格或者行内块祖先框的内容边界构成。
2.对于absolute,包含块设置为最近的position不是static的祖先元素。如果祖先是块级元素,包含块则设置为该元素的内边距边界;如果祖先元素是行内元素,包含块则设置为该祖先元素的内容边界;如果没有祖先,则设置为初始包含块。

作者:网络 来源:无辜的胡萝卜的博客
  • 上一篇:Git解析
  • 下一篇:vue.js传入图片问题