CSS布局&居中

块级元素和内联元素的高度

文档流：文档内元素的流动方向

块级元素：从上往下，可以设置宽高，可以设置padding,margin

内联元素：从左往右，设置宽高无效,可以设置padding,左右margin有效，上下margin无效

内联元素若需要设置宽高，display:inline-block;

1、div高度由其内部文档流元素的高度总和决定

内联元素是英文单词的话，不论多长，是不会自动换行的，若需要换行设置以下属性

word-break: break-all

2、内联元素的高度基本是不可测的，在font-size比较小的时候可以用line-height来控制内联元素所占的高度，如果想要一个特定的高度，可以再在基础上添加padding来增加。

span里面设置display:block;就相当于div

页面布局

1、两栏布局

float 浮动

• 父元素加clearfix清除浮动

  

    

    

  

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  .aside{
    border: 1px solid red;
    width: 100px;
    height: 200px;
    float: left;
  }
  .main{
    border: 1px solid blue;
    float: left;
    width: 100px;
    height: 200px;
  }

positon 绝对定位

  

    

    

  
  .wrap{
    position: relative;
  }
  .aside{
    border: 1px solid red;
    width: 100px;
    height: 200px;
  }
  .main{
    border: 1px solid green;
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 100px;
  }

2、三栏布局

float 浮动，方法同两栏布局

position 绝对定位，方法同两栏布局

居中

1、 水平居中

• 在父元素上设置 text-align: center 使文字/图片水平居中。

.container {
  text-align: center;
}

• 在父元素上设置margin值

.container {
  margin: 0 auto;
}

2、 垂直居中

• 文本居中,在父元素上设置上下padding值

.container{
  padding: 40px 0;
  text-align: center;
}

• 绝对定位实现居中——主要适用于页面弹框

. container{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -150px;
  width: 400px;
  height: 300px;
  text-align: center;
  border: 1px solid;
}

• vertical-align实现居中——主要适用于图片居中

• table-cell实现居中