CSS中固定定位、相对定位、绝对定位以及flex布局高效定位

CSS中固定定位、相对定位、绝对定位以及flex布局高效定位

一、固定布局

将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动。

    

    
"box">

效果图
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位_第1张图片

二、相对定位、绝对定位

口诀:子绝父相
子元素绝对定位,父元素相对定位。
父元素设置相对定位,是为了给子元素指定参考物,子元素在父元素的范围里面运动。

  

   
"box">
"box1">
"box2">

效果图
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位_第2张图片

三、flex布局

使用flex布局来实现水平垂直居中,效率更高、更简单。

  

  
"box">
"box1">

效果图
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位_第3张图片

最后,分享一个好玩的效果!可以在敲代码过程中产生一些动态效果!!

CSS中固定定位、相对定位、绝对定位以及flex布局高效定位_第4张图片
有兴趣的可以看看下边的文章!
https://blog.csdn.net/muzilanlan/article/details/81509374

你可能感兴趣的:(CSS,css,定位)