CSS布局与居中技巧-优快云博客

本文介绍了CSS中可继承与不可继承属性的区别，并通过实例详细解释了如何使用这些属性实现不同类型的标签（如行内标签、块级标签等）的水平居中与垂直居中效果。

1.CSS属性

可继承属性
- - 父标签的属性值会传递给子标签
- -一般是文字控制属性
不可继承属性
- - 父标签的属性值不能传递给子标签
- -一般是区块控制属性
标签案例
- - 所有标签可继承(visibility、cursor)
- -内联标签可继承(letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction)
- - 块级标签可继承(text-indent、text-align)
- - 列表标签可继承(list-style、list-style-type、list-style-position、list-style-image)
- - 不可继承属性(display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before、unicode-bidi )

2.盒子模型

3 CSS布局

默认情况下，所有的网页标签都在标准流布局中(从上到下，从左到右)
脱离标准
- - float属性(left：脱离标准流，浮动在父标签的最左边 , right：脱离标准流，浮动在父标签的最右边)
- - position属性

4 标签居中显示总结

水平居中: 适用于行内标签和行内-块级标签: text-align 适用于块级标签水平居中: margin:0 auto;

垂直居中: 适用于行内标签和行内-块级标签: line-height 适用于块级标签: position left top tanslate

  水平居中:
   适用于行内标签和行内-块级标签: text-align
   适用于块级标签水平居中:  margin:0 auto;

  垂直居中:
  适用于行内标签和行内-块级标签: line-height
  适用于块级标签: position left top tanslate
-->
<style>
    #main{
        background-color: red;
        width: 300px;
        height: 200px;
        /*垂直居中:行高*/
        line-height: 200px;

        /*水平居中:适用于行内标签和行内-块级标签*/
        text-align: center;

        position: relative;
    }

    span{
        background-color: blue;
    }

    .test1{
        background-color: yellow;
        width: 100px;
        height: 50px;
        line-height: 50px;
        /*块级标签---水平居中*/
        /*margin-left: 100px;*/
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        margin:0 auto;

        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
  <body>
<!--水平居中  垂直居中-->
<div id="main">
  <!--行内标签-->
  <!--<span>行内标签</span>-->

   <!--行内-块级标签-->
   <!--<button>我是按钮</button>-->

   <!--块级标签-->
   <div class="test1">qwqwqw</div>
</div>

复制代码