CSS-标签表现形式、浮动、定位

1.标签表现形式:display

1.1 块标记(block):p,div,table

    特点:
    a.独占一行
    b.可以设置宽度和高度
    c.可以通过margin:auto左右居中
    d.快标签默认的宽度是100%,高度是0,除非通过height,可以通过内部的内容撑开

1.2 行内标记(inline):span a

    特点:
    a.在一行中,不会自动换行
    b.无法设置宽度和高度
    c.设置文本居中 text-align对自己是没有作用,需要依赖于父类块标签
    d:可以设置左右的外边距,无法设置上下的
    e:上下的内边距有效果,但是整个文字内容不会超出父类的块标记
      左右的内边距是有效果的
    f:通过设置line-height=父块标签的高度,达到上下居中的效果

1.3 行内块标记(inline-block):img

    特点
    a:width和height可以设置?
    b:不能独占一行?行内的元素默认排在一行
    c:居中和行内标签一样
    d:外边距和块标签一致
    e:内边距和块标签也一直

1.4 三种标签的切换

    可以通过过display属性进行切换,达到一些行内元素变成块元素的特点
     display: none;//隐藏
     display: block;//块元素
     display: inline;//行内标签/内联标签
     display: inline-block;//行内块标签

2.浮动: float

每一个元素都有自己对应的文档流(产权)
默认元素的float:none,可以设置左右浮动
1.浮动是不会覆盖文字:文字环绕的效果
2.一旦元素设置浮动以后,会丢失文档流(产权)
3.浮动不能不超超过前面没有设置浮动的盒子
4.浮动的元素不会覆盖在其前面设置浮动元素的上面,最多和他一样高

3.定位 - postion

3.1 偏移量FF

   偏移的属性:上(top)下(bottom)左(left)右(right)

3.2 相对定位

   position: relative;
   a.偏移量的目标:目前的自己
   b.相对定位不会丢失文档流
   c.相对定位如果出现重叠现象,会覆盖在其他元素上面

3.3 绝对定位

   position: absolute;
   a.偏移量的目标:相对于他的包含块进行偏移的,并且包含块必须要设置position属性,
                 如果父标签没有设置,就一直往上找到,直到找到一个设置position的属性祖先标签
                 假设都没有设置,最终就会以浏览器作为偏移目标

   b.绝对定位会丢失文档流
   c.如果出现重叠现象,元素的层级会提高,覆盖在其他元素上面

3.4 固定定位

   position: fixed;
   a.偏移量的目标:浏览器
   b.也会丢失文档流
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值