移动端css的布局

css使用教程

css设置居中对齐

文字居中对齐

p {
    text-align: center;
}

inline-block元素居中对齐

1. 使用display属性将inline-block转换block.

   img {
       display: block;
   	margin:0 auto;
   }
   

使用flexbox

flexbox水平、垂直居中都没问题，步骤如下：

1. 设置一个容器作为 flexbox

2. 在容器中指定内含元素水平居中，使用 justify-content: center

3. 在容器中指定内含元素垂直居中，使用 align-items: center

   #container {
       /* 黑色区域 */
       background-color: #000;
       width: 100px;
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   #item {
       /* 灰色区域 */
       background-color: #ddd;
       width: 40px;
       height: 20px;
   }
   

   如果要让多个元素（#sub-item1, #sub-item2, #sub-item3, …）在保持原有布局的同时在容器内居中，那么就需要用一个

   把多个元素包裹起来，使他们成为一个整体（即一个#item）。然后在容器内把这个整体居中。

   <div id="container">
      <div id="item">
         <div id="sub-item1"></div>
         <div id="sub-item2"></div>
         <div id="sub-item3"></div>
       </div>
   </div>
   

   如果不把多个元素包裹进一个div#item，则flexbox会把这些元素都按照指定的方向（沿行/沿列）堆叠，破坏这些元素之间的布局关系

4. CSS3 位移 translate(x, y)

   .content{
    width:500px;
    height:300px;
    border:1px solid #0a3b98;
    position: relative;
   }
   .box{
    width:100px;
    height:40px;
    background: #f0a238;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
   }
   

获取可视屏幕的高度和宽度

vw （viewpoint width），视窗宽度，1vw=视窗宽度的1%
vh （viewpoint height），视窗高度，1vh=视窗高度的1%

calc() 函数用于动态计算长度值。支持 “+”, “-”, “*”, “/” 运算，使用标准的数学运算优先级规则。

例子：height: calc(100vh - 42px)；

注意： 运算符前后都需要保留一个空格，100vh = 视窗高度的100%

不影响padding整体大小

box-sizing:border-box;