CSS定位

CSS中的3种定位机制:标准文档流,浮动,position定位

标准文档流:

从上到下,从左到右,输出文档内容。

由块级元素(从左到右撑满页面,独占一行,碰到页面边缘会自动换行)和行级元素(能在同一行内显示,不会改变HTML文档结构)组成。

行级标签有span,strong,img,input等

行级元素有内联元素(可通过display:inline设置 如span,strong等)和内联块级元素(可通过display:inline-block设置 如img,input)

内联元素和其他元素都在一行上;元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联块级元素和其他元素在一行上,元素的高度、宽度及顶部和底部边距可设置。

块级元素和行级元素都是盒子模型。

盒子模型的立体结构:从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。上层显示会覆盖下层的显示。

对盒子进行居中设置(可用于列布局):

设置一个固定宽度,然后margin:0 auto;  auto会根据浏览器的宽度自动地设置两边的外边距。

当设置了margin属性为auto的时候,不能再设置浮动或绝对定位属性。否则居中效果失效。

浮动:

浮动能够实现横向多列布局,通过float属性

特点:

1.元素会左、右移动直到触碰到包含它的容器或其它浮动元素为止,设置了浮动的元素仍然处于标准文档流中。

2.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。

3.元素设置浮动后,紧邻在其后的元素会受到影响。

清除浮动(一般是对受到浮动影响的元素设置,受到影响的也就是紧邻在浮动元素后的元素):

1.设置被影响元素clear属性---clear:both/left/right

2.被影响元素同时设置width:100%(或固定宽度)+overflow:hidden;

3.利用<br/>强制换行也可清除浮动对其后元素的影响,但不建议使用

Position属性:

position拥有三种定位形式:静态定位,相对定位,绝对定位。

可设置4个属性值:static,relative,absolute,fixed(固定定位也属于绝对定位)

relative相对定位特点:

相对于自身原有位置进行偏移,仍处于标准文档流中,随即拥有偏移属性(即top/left/right/bottom属性)和z-index属性。

absolute绝对定位特点:

建立了以包含块为基准的定位,完全脱离了标准文档流,随即拥有偏移属性的z-index属性。

当一个元素设置绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。

当未设置偏移量:

1.无论是否存在已定位祖先元素,都保持在元素初始位置

当设置了偏移量时偏移的参照基准:

1.无已定位祖先元素,以<html>为偏移参照基准

2.有已定位的祖先元素,会找最近的祖先元素进行偏移

Fixed定位也属于绝对定位,也会脱离标准文档流,但它有异于absolute,它的位置固定不变,兄弟元素会从其下穿过

1.未设置偏移量

有已定位祖先元素,以祖先元素为基准定位; 无已定位祖先元素,以浏览器窗口为基准定位

2.设置了偏移量

设置偏移量,有无已定位祖先元素,均以浏览器窗口为基准偏移


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值