掌握网页布局：定位、层级与装饰技巧详解-优快云博客

本文详细讲解了网页布局的三种方式（标准流、浮动和定位）的应用，包括解决层叠问题、定位方式（static, relative, absolute, fixed）及元素层级关系。此外，还涉及垂直对齐、光标样式、边框圆角、溢出处理、隐藏元素和透明度等装饰技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、定位

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

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.