ZG前端学习系统day06 2020-11-09

最新推荐文章于 2024-07-19 15:50:46 发布

短腿小萝卜

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量129

点赞数

文章标签： css html 定位

本文链接：https://blog.csdn.net/weixin_43707498/article/details/109586539

版权

定位

使用配合位移偏移量

默认 static
相对定位（relative）
应用场景：1 微调自己的位置 2 给绝对定位作为参考
相对定位是相对于自身的位置进行偏移，不脱离文档流，子绝父相
固定定位（fixed）
应用场景： 1 吸顶效果 2 返回顶部 3 模态窗口
固定定位是相对于浏览器窗口进行偏移，会脱离文档流，类似于行内块元素，（在不设置宽的时候，宽度由内容进行决定，也可以设置宽高）
绝对定位（absolute）
绝对定位是以最近一定义的“父”元素来说的，如果没有定位父元素，那么相对于html来说。
子绝父相，子绝父固
z-index 应用绝对/相对/固定定位用来改变层级关系默认是auto 相当于0 值越大层级越高
方向偏移量 只应用在绝对/相对/固定定位静态定位没有
块级元素水平垂直居中

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    
<style>        
* { margin: 0;  padding: 0;}
.box {  width: 300px;  height: 300px; background: pink; position: relative;  }
        /* .content{   width: 100px; height: 100px; background: #f00;position:absolute;            left: 0; top: 0;   right: 0; bottom: 0;   margin: auto;  } */      
.content { width: 100px;  height: 100px;  position: absolute;  left: 50%;  top: 50%;            margin-left: -50px;  margin-top: -50px; background: #f00; }    
</style>
</head>
<body>
<div class="box">        
<div class="content">
</div>    
</div>
</body>
</html>

元素脱离文档流的方法：float（right，left） position（relative ，absolute，fixed）
浮动定位的相同和不同点:
浮动和定位都会脱离文档流并且是他们转为类似于行内块的元素（不设置宽的时候。。。设置宽的时候。。。）
不同：
浮动不会使文字脱离文本流类似于文本流只是提升了半层在1.5层的意思
但是定位不仅脱离文档流还脱离文本流

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    
<style>       
 *{            margin: 0;            padding: 0;        }        
 .box1{            width: 500px;            height: 500px;            background: pink;        }        .box1 div:nth-child(1){            width: 100px;            height: 100px;            background: #f00;            float: left;        }       
 .box1 div:nth-child(2){            width: 150px;            height: 150px;            background: #00f;        }        
 .box2{            width: 500px;            height: 500px;            background: pink;             position: relative;        }        
 .box2 div:nth-child(1){            width: 100px;            height: 100px;            background: #f00;            position: absolute;            left: 0;           top: 0;        }        .box2 div:nth-child(2){            width: 150px;            height: 150px;            background: #00f;        }    
 </style>
 </head>
 <body>
 <div class="box1">       
  <div>
 </div>        
 <div>浮动脱离文档流但是不会脱离文本流浮动脱离文档流但是不会脱离文本流浮动脱离文档流但是不会脱离文本流浮动脱离文档流但是不会</div>   
</div>    
<div class="box2">       
<div></div>        
<div>浮动脱离文档流会脱离文本流浮动脱离文档流会脱离文本流浮动脱离文档流会脱离文本流</div>   
</div>
</body></html>

圆角 border-radius：50%；
一个值两个值三个值四个值分别代表的值（找对角）

显示和隐藏
第一种：（不占位置）
display：none；和display：block；
第二种：（会占位置）
visibility：visible；显示 visibility：hidden；

溢出隐藏（父容器）
overflow：
hidden scroll auto visible(默认）
某个方向 overflow-x overflow-y

短腿小萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZG前端学习系统day06 2020-11-09

定位使用配合位移偏移量默认 static相对定位（relative）应用场景：1 微调自己的位置 2 给绝对定位作为参考相对定位是相对于自身的位置进行偏移，不脱离文档流，子绝父相固定定位（fixed）应用场景： 1 吸顶效果 2 返回顶部 3 模态窗口固定定位是相对于浏览器窗口进行偏移，会脱离文档流，类似于行内块元素，（在不设置宽的时候，宽度由内容进行决定，也可以设置宽高）绝对定位（absolute）绝对定位是以最近一定义的“父”元素来说的，如果没有定位父元素，那
复制链接

扫一扫