CSS基础——day7—上

权泉全
142 阅读6分钟

一、css3过渡动画

  • 语法：transition: 属性 时间 运动曲线 延时;
  1. 属性：需要改变过渡的属性
  2. 时间：整个过度动画需要多长时间完成
  3. 运动曲线 ：动画运动形式默认取值为ease。匀速运动linear；
  4. 延时：鼠标移入需要等待一段时间再去加载过渡动画；
  • 注意：
  • 01、同时修改多个属性，需要用英文逗号隔开 transition: width 1s, background-color 1s, height 1s;
  • 02，用逗号隔开书写多个属性过渡太麻烦，我们只需要用一个all表示所有的属性即可 transition: all 1s ；
  • 03、过渡加在本身上，谁做动画给谁加；

二、定位布局position

概念作用

  • 定位布局可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
  • 一个完美的定位是由定位模式和边偏移量同时完成的：定位 = 定位模式 + 边偏移（方位名词更改）

边偏移量

  • 指的就是top、bottom、left、right属性，left和right值控制左右位置偏移，top和bottom只控制上下偏移；

定位模式分类

1.静态定位：position:static;

  • 盒子默认的显示方式，相当于啥也没做
  • 就算是给静态定位盒子设置了边偏移是无效的；

2.相对定位：position:relative;

  • 参照对象（参照物） ：根据自己原来的位置进行定位；
  • 特点：
  1. 相对定位的盒子不会脱离标准流，设置边偏移后盒子原来的位置还存在；
  2. 相对定位不会改变盒子的默认显示模式；

  3. 相对定位很少单独使用，后期经常配合绝对定位完成子绝父相的效果，做绝对定位盒子父亲；

3.绝对定位：position:absolute;

  • 参照对象（参照物） ：
  1. 默认的参照对象是父级盒子，如果没有父级盒子就以浏览器为参照定位；
  2. 如果有父级盒子并且父级盒子有定位属性，就以父级盒子为参照定位；
  3. 如果有父级盒子但是父级盒子没有定位属性，就会一级一级的往上找祖先盒子，就近的祖先盒子有定位 属性性就以当前的祖先盒子为参照，如果所有的祖先盒子都没有定位属性就以浏览器为参照；
  • 特点：
  1. 绝对定位的盒子完全脱离了文档流，不会占有原来的位置，属于不占位的定位；
  2. 绝对定位会改变盒子的显示模式为行内块的元素的特点；
  3. 绝对定位一般会配合相对定位实现子绝父相的定位效果；

4.固定定位：position: fixed;

  • 参照对象（参照物）： 是浏览器的可视窗口为参照定位；
  • 特点：
  1. 固定定位的盒子完全脱离文档流，属于不占位定位；
  2. 固定定位会将盒子的显示模式更改为行内块的特点；

5.粘性定位：position: sticky;

  • 参照对象（参照物）： 一开始条件没有满足的时候是相对定位，当条件满足以后马上更改为固定定位，所以可以理解为参照物没有满足条件的时候为自己本身，满足了条件后更改为浏览器的可视窗口；
  • 注意： 粘性定位的盒子必须满足设置边偏移的四个值分别是top,right,bottom,left中的一个，比如上下滚动设置top值；以下代码必须满足元素的top值为0的时候就会执行粘性定位样式；
  • position: sticky; top: 0; 在top变为0时成固定定位。

三、定位布局的一些技巧

子绝父相

  • 父级盒子是用来做布局占位用的，如果使用了绝对定位父级盒子就会完全脱离文档流，导致后面的盒子布局混乱；所以父级盒子一般都用相对定位，这样父级盒子会占有原来的位置也不会改变盒子的显示模式，就不会影响后面盒子的布局了；
  • 子级绝对父级相对；
  • 如果父级盒子有有对应的定位属性，也可以直接做父级定位子级，不一定是子绝父相；

定位盒子的层叠位置

  • 定位的元素，写在后面的盒子会将前面的盒子压住，如果想要调整盒子的先后顺序，就需要用z-index来设置：
  • z-index的取值是任意的整数，可以是负数或者正数，默认的取值理解为0，值越大盒子越靠前；
  • 注意：z-index必须配合定位属性一起使用，取值不能带任何单位；

四、css显示隐藏

占位隐藏

  • 将盒子隐藏掉，然后盒子还是占有位置；
  • 占位隐藏 visibility: hidden;
  • 占位显示 visibility: visible;

不占位隐藏

  • 将盒子隐藏掉，然后盒子的位置同时被隐藏掉；
  • /* 不占位隐藏 */ display: none;
  • /* 显示隐藏的盒子 */ display: block;

五、溢出隐藏overflow

  • 定义超出固定范围的内容如何显示；
  • overflow: hidden; 将溢出的内容隐藏掉；
  • overflow: auto;判断内容是否溢出了固定的范围，如果超出了就显示滚动条显示，没有超出就不会显示滚动条；
  • overflow: visible; 和 overflow: scroll; visible是默认值，scroll不管有没有超出都会出现滚动条不推荐使用；
  • 注意：overflow的取值除了visible以外其他的取值都可以开启盒子的BFC模式；

六、vertical-align属性

  • 行内和行内块元素默认的对齐方式是以基线对齐的，可能会导致元素和文字，元素和元素之间不能完全对齐；
  • 通过给行内块元素或者行内元素vertical-align的不同取值设置对齐方式，该属性必须设置为当前的行内块元素或者行内元素：
  • 基本语法：
  • /* bottom（底线对齐） */ vertical-align: bottom;
  • /* top（顶线对齐） */ vertical-align: top;
  • /* middle（中线对齐） */ vertical-align: middle;

插入图片底部留白的问题

  • 图片属于行内块元素，默认的对齐方式是基线对齐，所以插入图片会导致底部留白
  • 解决方案1：设置img的对齐方式
  • img { vertical-align: middle; }
  • 解决方案2：直接转化图片为块元素；
  • img { display:block; }

图片在固定高度的父级盒子中垂直居中

  • image.png
  • 满足两个条件，第一个盒子高度固定并且设置行高，第二个设置图片中线对齐；
 img {
            vertical-align: middle;
        }    
	.box {
        width: 600px;
        height: 150px;
        border: 2px solid red;
        line-height: 150px;
    }

六、css3常用新属性

1.圆角border-radius

  • border-radius取值为一个实际像素；
  • 设置border-radius*取值个数为4个值：分别是：左上角 右上角 右下角 左下角
  • 语法：border-radius：左上角 右上角 右下角 左下角；
  • image.png
avatar
文章
阅读
粉丝