页面布局基础

元素浮动

 float特性:none不浮动
          left/right:向左/向右浮动

熟练理解w3school中对浮动的讲解

定位

固定定位(fixed)

位置是相对于浏览器窗口变动的

相对定位(relative)

相对于它本身的位置进行位置变化的

绝对定位(absolute)

相对于第一个定过位的父元素(不包含使用margin等方式确定位置)位置进行定位的;当其父元素都没有定过位,则以body的位置开始定位。


1.在绝对定位中,要将元素内容放在某形状中,用到clip
clip(1px 2px 3px 4px)---依次表示上右下左方向的值
注意:上,左的值越大,形状越小,被裁减的越多;下,右的值越大,形状越大,被裁减的越少。
2.绝对定位中,处理溢出采用overflow,它的值有
visible(不裁剪,默认)
hidden(裁剪从而不显示超出部分的内容),
scroll(提供滚动条)
 auto.(自动)

bfc(块级格式化上下文)和ifc(行级格式化上下文)环境

bfc

布局规则:

 1.内部所有盒子按照垂直方向放置。
 2.相邻的盒子 垂直方向上margin值会重叠。
 3.与浮动相同,内部盒子会以bfc的左/右边线接触。
 4.BFC的区域不会与浮动盒子重叠。
 5.bfc环境中的子元素与外界分离,不会影响外面的元素,外面的元素也不会对立面的元素产生影响。
 6.bfc中的浮动元素会参与计算。

触发方式:

 1.float的值不为none
 2.定位方式为绝对定位以及固定定位
 3,display:值为inline-block;table-cell;table-caption;flex;inline-flex;
 4.overflow不为visible.

ifc

布局规则:

 1.内部所有盒子按照水平直方向放置。
 2.一行上的所有元素会形成一个行框。
 3.行框的宽度为包含框的宽度,高度则是以行框中元素最高的高度为准。
 4.浮动元素不会在行框中,且浮动元素会压缩行框的高度。
 5.当行框的宽度容纳不了子元素时,子元素会自动换到下一行,并且在下一行又形成一个行框。
 6.行框内的元素遵循水平和垂直方向的对齐方式。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值