HTML+CSS---进阶学习05

最新推荐文章于 2024-09-21 23:59:03 发布

不断进阶学习者

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量101

点赞数

分类专栏： HTML+CSS 文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/weixin_44857287/article/details/108986384

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、定位

1.相对定位

position: relative;
left: 50px;
top: -50px;

不脱离文档流
如果给一个标签只设置positon:relative , 不加关键词，就对该元素没有影响
配合top ， right , bottom , left 使用（可以为负值）
提升层级（可通过z-index设置它的层级）
相对于自己原来的位置进行定位

2.绝对定位

position: absolute;
bottom: 0;
right: 0;

脱离文档流，也脱离了文本流
提升层级
默认是相对于初始包含块进行定位，但初始包含块不确定，有可能是指整个html文档，有可能是指浏览器所能显示的那一部分
一般配合相对定位使用，如果一个元素的父元素有定位,那么该元素的绝对定位就会相对于父元素进行定位（子绝父相）
配合 top , right ,left ,bottom 使用

3.固定定位

脱离文档流，也脱离文本流
提升层级
相对于浏览器屏幕进行定位
配合top , right , left, bottom 使用

position: fixed;
top: 50px;
left: 0;

二、小盒子在大盒子中间显示

知道大盒子的宽高，知道小盒子的宽高，通过padding 或 margin 或者定位

大盒子的宽高不固定，知道小盒子的宽高

给大盒子设置相对定位
给小盒子设置绝对定位
给小盒子设置 top : 50% ; left :50%;
给小盒子设置margin-top : 负的小盒子高度的一半
给小盒子设置margin-left：负的小盒子宽度的一半

 .box{
            width: 700px;
            height: 700px;
            border: 10px solid red;
            position: relative;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 50%;
            margin-left:-100px ;
            top: 50%;
            margin-top: -100px;        

        }

大盒子和小盒子的宽高都不固定

给大盒子加相对定位
给小盒子加绝对定位
给小盒子设置 top , bottom , right , left 都为0
给小盒子设置margin: auto;

        .box{
            width: 600px;
            height:600px;
            border: 10px solid red;
            position: relative;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

        }

三、提升层级 z-index

使用时该标签必须设置定位，才能通过z-index设置层级
默认 0
可以为负值
值越大，越靠前

四、让内联标签支持宽高

给内联标签设置浮动（脱离文档流，但不脱离文本流）
给内联标签设置绝对定位（既脱离文档流，又脱离文本流）
给内联标签设置固定定位（既脱离文档流，又脱离文本流）

五、内联块垂直对齐方式

css样式： vertical-align: middle; baseline(默认基线对齐) top   bottom  具体px

六、图片间隙问题（多个内联块间隙问题）

解决：

给他的父元素设置 font-size:0 ; line-height:0; (里边的子元素如果有文字的话，需要重新设置字体大小和行高)
给内联块设置vertical-align: top | middle | bottom ，解决的是图片之间上下的空隙
直接将内联块转成块标签（独占一行）
直接将内联块浮动（浮动引起的问题）

七、透明度

1.opacity 设置元素的透明度

opacity: 0.5; //设置元素半透明  0 - 1  ， 不兼容ie8及以下
filter: alpha(opacity=50);  // 用来兼容ie8及以下 取值 0 - 100

2.rbga的兼容(了解)

不兼容ie8 及以下

  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f00ff00,endcolorstr=#7f00ff00);
  
  其中颜色值#7f00ff00  ==  #aarrggbb

3.rgba 和 opacity 的区别

rgba( r, g ,b , a) 其中rgb的值是0-255 ， a的值 0-1
rgba 给背景色使用，那就是背景色可以半透明，如果给color 设置，那就是文字可以半透明
opacity : 值 0 - 1 让背景和里边的子元素都半透明

八、元素隐藏

display:none 隐藏后该元素不占位
opacity : 0 隐藏后该元素占位
visibility: hidden ; ( visible 是默认值，显示) 隐藏后改元素占位