资讯专栏INFORMATION COLUMN

css/day08

wujl596 / 1352人阅读

摘要:定位布局静态默认非定位元素定位元素相对定位参照点原先所在的位置特性不脱离文档流宽度默认为为,原来在文档流的位置不会被抢占,但是可以覆盖在其他元素上定位元素绝对定位参照点距离它最近的父定位元素,如果没有,参照视口特性脱离文档流宽度由内容决定,

定位布局

    position 
        static        静态(默认)     非定位元素

        relative     定位元素(相对定位)
            参照点:原先所在的位置
            特性:不脱离文档流(宽度默认为为100%,原来在文档流的位置不会被抢占),但是可以覆盖在其他元素上

        absolute     定位元素(绝对定位)
            参照点:距离它最近的父定位元素,如果没有,参照视口
            特性:脱离文档流(宽度由内容决定,原来在文档流的位置被其他元素抢占)

        fixed         定位元素(固定定位)
            特性:脱离文档流
            参照点:相对于浏览器视口,并且不会随着网页的滚动而滚动

        sticky         定位元素(粘滞定位 【CSS3新特性】)
            特性:不脱离文档流
            是relative与fixed的集合,使用top/left/right/bottom设置过渡点,当超过了这个临界点,就提现fixe固定在网页中的特性

    只能定位元素才能使用定位属性
        top 、left、bottom、right
    改变定位元素在z轴中的位置
        z-index 
            默认为0,值越小越靠下

伸缩盒
    作用:主要应用在响应式(网页可以随着终端的屏幕尺寸合理调整布局)布局中
    应用:
        1. 父元素(宽高都需要明确)
            display:flex
            flex-direction:row/column
            flex-wrap:nowrap/wrap
        2. 子元素
            flex-basic
            flex-grow:
            flex-shrink:
            flex:grow shrin basic;
            flex:grow;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116211.html

相关文章

  • html/css day03

    摘要:表单元素单行文本框密码框单选按钮复选按钮附件提交按钮拓展搜索框,日期框,数字框,框的属性参数的不能缺省参数的按钮的时候不能缺省提示语用在单选按钮和复选按钮中表示默认选中用在下拉菜单中表示默认选中注意和可以为单值属性下拉菜单山西江西甘肃甘肃中 表单元素 1. input 单行文本框 密码框 ...

    Binguner 评论0 收藏0
  • html/css day03

    摘要:表单元素单行文本框密码框单选按钮复选按钮附件提交按钮拓展搜索框,日期框,数字框,框的属性参数的不能缺省参数的按钮的时候不能缺省提示语用在单选按钮和复选按钮中表示默认选中用在下拉菜单中表示默认选中注意和可以为单值属性下拉菜单山西江西甘肃甘肃中 表单元素 1. input 单行文本框 密码框 ...

    haitiancoder 评论0 收藏0
  • CSS day06

    摘要:布局使用块元素搭建网页结构改变默认文档流的方式,让其在一行中显示多列。 布局 使用块元素搭建网页结构,改变默认文档流的方式,让其在一行中显示多列。【让块在一行中显示】 浮动布局 float float:left/right 可以使块元素脱离当前的文档流 ...

    or0fun 评论0 收藏0
  • 基于supervisor秒级Laravel定时任务

    摘要:背景介绍公司需要实现分钟内每隔秒轮训某个接口,自带的貌似只精确到分钟,虽然可以到精确到秒,但是并不满足需求。选型公司项目都是基于框架,所以这个没得选。 背景介绍 公司需要实现X分钟内每隔Y秒轮训某个接口,Linux自带的crontab貌似只精确到分钟,虽然可以到精确到秒,但是并不满足需求。 选型 公司项目都是 基于 Laravel 框架,所以这个没得选。守护进程用的 superviso...

    leeon 评论0 收藏0

发表评论

0条评论

wujl596

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<