简单的定位布局

浮动布局

1.float
备注:
a.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
b.当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。
c.当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动。

2.清除浮动的常用方法
对受到影响的元素设置以下方法:
方法1
clear,常用clear:both或者clear:left或者clear:right
方法2
同时设置width:100%(或固定宽度)+ overflow:hidden。
方法3
使用换行标签<br>,但不建议使用。

positon定位

1.相对定位

positon:relative

相对于自身原有位置进行偏移,仍旧处于标准文档流中,拥有偏移属性和z-index(空间的层堆叠)属性。
2.绝对定位

position:absolute

使用absolute实现横向两列布局,常用于一列固定宽度,另一列宽度自适应的情况。
特点:
1)建立了以包含块为基准的定位,完全脱离了标准文档流,拥有偏移属性和z-index属性。
2)若绝对定位未设置偏移量,则无论是否存在已定位的祖先元素,都保持在该元素的初始位置,脱离了标准文档流。
3)若绝对定位设置了偏移量,偏移参照基准为:
a.若无已定位的祖先元素,以<html>(非<body>)为偏移参照基准。
b.若有已定位的祖先元素,以距离其最近的已定位祖先元素为偏移参照基准。
4)当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • ●自动居中——列布局 ·涉及知识点 标准文档流块级元素margin属性-设置居中对齐 ★知识点【margin属性-...
    越IT阅读 689评论 0 4
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,007评论 0 2
  • 1、CSS的三种定位机制 CSS 规定的定位机制有三种,分别是: 标准文档流(Normal flow): 特点:从...
    徐国军_plus阅读 611评论 0 3
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,264评论 0 6