CSS学习笔记之布局

一、什么是布局？

1. 简单来说就是HTML页面的整体结构或骨架，类似于传统报纸或杂志中的排版。
2. 布局不是某个技术内容，而是一种设计思想。

二、什么是居中布局？

1. 一个元素在页面中呈现居中效果，分为水平居中、垂直居中、水平垂重居中。
2. 水平居中布局。

   // div结构
   <div class = "parent">
       <div class = "child">css布局</div>
   </div>

   /*水平居中布局*/
   
   /*inline-block + text-align 属性配合使用*/
   /*优点：浏览器兼容性好。
     *缺点：text-align属性有继承性，导致子级元素的文本也是居中显示的。解决方法是在子级重新设置text-*align。
   */
    /* text-align属性：是为文本内容设置对齐方式。 */
     /*inline-block:行内块级元素（块级+内联）只要子元素为内联元素，父级text-align属性生效*/
   .parent{
    
     text-align:center;     
   }
   .child{
     
     display:inline-block;   
   }
   
   
   
   /* table + margin 属性配合使用*/
   /*优点：只要对子级元素进行设置就可以实现效果
     *缺点：如果子级脱离文档流，会导致margin属性值无效*/
   /*脱离文档流的方式：1,float 2、absolute 3、fixed*/
    /*margin属性：一个值为：上右下左；二个值为：上下，左右，三个值：上外边距，左右，下外边距*/
     /*auto会根据浏览器自动分配，而浏览器会进行等分*/
   
   .child {
     display: table;
     margin: 0 auto;
   }
   
   
   
   /* absolute + transform 属性配合使用*/
   /*优点：无论父级元素是否脱离文档流，不影响子级元素水平居中效果
   * 缺点：transform属性为css3新增属性，浏览器支持效果不好。
   */
   
   .parent {position: relative; }
   .child {
      position:absolute;
      left: 50%;
      transform: translateX(-50%);
     }
   
   

    

3. 垂直居中布局。

   /*html结构*/
   <div class&#