day12 html5

      day12

定位 position:属性值:
1. static 静态定位
2. relative 相对定位
3. absolute 绝对定位
4.fixed 固定定位
5.sticky 粘性定位
position:fixed; 固定定位
1: 参照物:浏览器窗口。
2: 不占据空间,脱离布局流。

让一个元素在浏览器窗口左右上下居中?
    第一种方法:
        position:fixed;
        left:50%;top:50%;
        margin-left:-元素宽度一半;
        margin-top:-元素高度的一半;

    第二种方法:
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
         margin:auto;
         
    粘性定位:
    position:sticky;
   执行逻辑:
    默认情况下:当浏览器窗口滚动条不滚动,当前元素没有超出整个浏览器窗口的时候
    执行的position:relative;如果元素超出当前窗口则应用的position:fixed;
    
定位 总结
       脱离布局流:
       position:absolute
       position:fixed;

注:如果块状元素没有设置宽度的时候,添加position:absolute || position:fixed
出现宽度被内容撑开

锚点:
超链接的一种。
作用:能实现在同一个页面内实现不同位置的跳转。
描述:让锚点绑定id名称的元素回到浏览器窗口的最顶端。
<标签 id=""></标签>

高度自适应第一种情况:
    当元素height不去设置或者是设置成height:auto;
    元素的高度是被内容撑开的。
    需求1:当内容增加的时候,内容能把容器撑开。
    需求2:当内容极少或者没有内容的时候,让容器保持一个最小高度。
  • 最小高度的设置:
    min-height:
    能满足1:当内容增加的时候,内容能把容器撑开。
    能满足2:当内容极少或者没有内容的时候,让容器保持一个最小高度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值