css页面布局基础

容器块:

1、根元素(html)创建的容器块叫做“初始化容器块”;

2、对于被设置为静态或者相对定位的非根元素,容器块是它最近的父级元素、表格单元的内容区的边缘;

3、对于如果祖先元素是内嵌元素,容器块为内容区的边缘。

相对定位:

使用position:relative;声明

当设置了position:relative时,层的层叠级别高于默认的文本流级别;同等级别下将会按照文本流的顺序层叠显示。

绝对定位:

1、使用position:absolute;声明;

2、默认被设置为auto;

3、绝对定位的元素完全从文档流中脱离出来,所占据的空间不保留,不再影响其他元素。

指定裁剪区域

绝对定位的元素溢出时可以设置overflow属性为hidden、scroll或者auto

裁剪图片:

img{
position:absolute;
clip:rect(50px 200px auto auto
}


处理溢出:

1、overflow属性的取值有:visible是默认的,不裁剪内容,不添加滚动条,强制显示元素内容

2、hidden表示裁剪内容,并不显示超出对象尺寸的内容

3、scroll表示裁剪内容,同时提供滚动条

4、auto表示只有在必要时才裁剪内容并添加滚动条

设置元素的可见性:

display属性的取值包括:

1、none元素在页面上隐藏起来,元素也将退出当前的页面布局层,不占用任何的空间;

2、强制将XHTML中的内嵌元素变为块级元素;

3、inline:块级元素变为内嵌元素

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值