基础学习6 定位

最新推荐文章于 2023-04-11 15:33:23 发布

原创最新推荐文章于 2023-04-11 15:33:23 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

学习专栏收录该内容

45 篇文章

订阅专栏

定位 position:

两个大布局: 盒模型浮动

定位:anywhere

1:定位类型:

静态定位 static 标准流下的默认值一动不动

相对定位 relative

绝对定位 absolute

固定定位 fixed

2:定位方位值:

left:当前定位元素距离父元素左侧边界的值

top:当前定位元素距离父元素上侧边界的值

bottom:当前定位元素距离父元素下侧边界的值

right: 当前定位元素距离父元素右侧边界的值

相对定位

设置相对定位的标签仍然保持其未定位前的形状，并且它原本所占的空间仍然保留

绝对定位

绝对定位的元素如果父级元素没有定位属性它是以body左上角作为参考定位

如果父元素有定位属性(相对,绝对,固定)就会以父级元素左上角作为参考定位,所以如果你想要父亲管控孩子,你就必须给父元素身上添加相对定位属性

父级: 绝对定位元素会以离自己最近的拥有定位属性的父级元素左上角作为参考

子绝父相

定位类型	是否脱标	参考位置值	用处	坐标位置值
static	否(默认值)	无	无	无
relative	否(保留原来位置)	自身左上角	微调元素(外边距),子绝父相	left,right,bottom,top
absolute	是	以距离自己最近的拥有定位属性的父级元素左上角定位,直到找到body	anywhere	left,right,bottom,top
fixed	是	body左上角	滚动条动它不动	left,right,bottom,top

大小并排就用浮动,间距就用外间距 ,如有小盒子在大盒子里的放置可用绝对定位

层级属性

z-index:n n为正负整数

n为负数的时候会被压到标准流盒子下面

盒子居中:

盒子水平居中: margin:0 auto;

定位实现盒子水平居中以及垂直居中:

    .box {
        position: absolute;
        /* left:50% 向右走父盒子宽度的一半 */
        left: 50%;
        top:50%;
        margin-top:-150px;
        margin-left: -200px;
        width: 400px;
        height: 300px;
        background-color: red;
    }

圆角边框属性

正方形+圆角边框属性 = 圆形(有弧度的图形)

长方形+圆角边框属性 = 椭圆形(有弧度的图形)

border-radius: 边框的弧度  px / % /em/rem

border-right-top-radius: 右上角
border-left-top-radius: 左上角

 <style>
    .box {
        width: 200px;
        height: 200px;background-color: red;
        /* border-radius: 20px; */
        /* 10px 左上和右下  30px 右上 左下 */
        /* border-radius: 10px 30px; */
        /* 30px 右上和左下 10px 左上  50px 右下 */
        /* border-radius: 10px 30px 50px; */
        /* 顺时针 */
        border-radius: 10px 20px 30px 40px;
    }
    
    </style>