css定位装饰

一、定位

网页布局三种方式结合使用:标准流、浮动、定位。

1.解决盒子和盒子之间层叠问题

2.可以让盒子固定在某一个区域

1.设置定位方式position

静态定位static相对定位relative绝对定位absolute固定定位fixed

1.相对定位relative

.nav{

position:relative;

left:20px;

top:30px;

}

特点:占有原来的位置,仍然具备标签原有的显示特点,改变位置是参照自己原来位置,不会脱离标准流。

定位如果四个方向都写的话,水平以left为准,垂直以top为准。

2.绝对定位absolute

先找父级(父级包括爹,爷爷,太爷爷)父级如果有定位则参照父级定位。父级没有定位,以浏览器窗口定位。

特点:脱离标准流(不占位置),改变标签的显示模式特点具备了行内块特点(一行共存,宽高生效,宽高不写则为0)(一般为,子绝父相:子集绝对定位父级相对定位)

绝对定位的盒子不能使用margin:0 auto;居中了。

如果做一个盒子在浏览器水平垂直居中,代码如下:

<style>
  .box{
     position:absolute;
     left:50%;
     top:50%;
/*第一种偏移,*/
     margin-left:-200px;
     margin-top:-200px;
/*第二种偏移,第二种好用*/
     transform:translate(-50%,-50%);/*位移自己负数的50%*/



     width:400px;
     height:400px;
}
</style>
<body>
    <div class="box"></div>
</body>

3.固定定位fixed

特点:脱离标准流(不占位置),改变位置是参考浏览器窗口不随着网页滚动改变位置,具备行内块特点,

二、元素的层级关系

标准流<浮动<定位(定位显示在最上面,往下依次浮动,标准流)

都定位,默认后者在上。  若想让前者在上,加一个

z-index:999;  /*层数越大越靠上,默认z-index值为0,必须配合定位才生效 */

三、装饰

1.垂直对齐方式

基线:浏览器文字类型元素排版中用于对齐的线。(baseline)

vertical-align:baseline;/*默认基线对齐*/
vertical-align:top         /*顶部对齐*/
vertical-align:middle       /*中*/
vertical-align:bottom       /*底*/

行内,行内块浏览器解析的时候默认按文字来排版。但凡是处理行内块和文字对齐或者行内块和行内块对齐,想要居中都是行内块vertical-align:middle; 

想要把图片在盒子中垂直居中,盒子加一个行高line-height,图片加vertical-align:middle;

水平居中,给盒子加一个text-align:cente;

2.1改变光标类型cursor

div{
    cursor:default;    /*默认值为箭头*/ 
    cursor:pointer;    /*小手效果,可点击*/    
    cursor:text;       /*工字型,可选择文字*/
    cursor:move;       /*十字光标,提示用户可以移动*/
}

3.1边框圆角

属性名:border-radius

属性值:数字+px、百分比

border-radius:5px 5px 5px 5px;(属性值最多4个,左上,右上,右下,左下)
border-radius:5px 10px 5px;    (三个属性值,左上5  右上10  右下5  左下10)
border-radius:10px 5px;      (两个属性值 左上10 右上5 右下10 左下5)

3.2常见边框圆角

3.2.1正圆

1.盒子必须是正方形

2.边框圆角为盒子宽高的一半

3.2.1胶囊按钮

1.盒子必须是长方形

2.边框圆角为盒子高度的一半

4.overflow溢出部分显示效果

div{
    overflow:visible;   /*默认值,溢出部分课件*/
    overflow:hidden;    /*溢出部分隐藏*/
    overflow:scroll;    /*无论是否溢出,都显示滚动条*/
    overflow:auto;      /*根据是否溢出,自动显示隐藏滚动条*/
}    

5.元素本身隐藏

div{
visibility:hidden;     /*占位隐藏,不常用*/

display:none ;         /*不占位隐藏*/  
} 

6.拓展-元素整体透明度

opacity:   属性值0~1.

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:创作都市 设计师:CSDN官方博客 返回首页

打赏作者

牧之瑞001

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值