一、左右布局

可以用float標(biāo)簽實(shí)現(xiàn)，左側(cè)定寬，右側(cè)自適應(yīng)。

.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: red;
}
.right {
    margin-left: 200px;
    background-color:black;
}

二、左中右布局

可以用浮動float布局實(shí)現(xiàn)。

 .left{
       width: 300px;
       height: 100px;
       background-color: #823384;
       float:left;
}
 .center{
       height: 100px;
       background-color: #d29922;
       margin-left:200px;
       margin-right:200px;
}
.right{
       width: 300px;
       height: 100px;
       background-color: #0c8ac5;
       float:right;
}

三、水平居中

目前知道2種方法實(shí)現(xiàn)水平居中，以后可繼續(xù)補(bǔ)充。

• 1、首先給div塊級元素設(shè)置固定寬高，示例：

height: 100px;
width: 50px;

然后給div塊級元素設(shè)置左右外間距，示例：

margin-left: auto;
margin-right: auto;

• 2、在塊級元素div中加入內(nèi)聯(lián)元素，示例：

<div>
   <p>123</p>
    466
</div>

說明：123和456都是塊級元素div的內(nèi)聯(lián)元素.
然后給塊級元素div增加此塊級元素div內(nèi)的內(nèi)聯(lián)元素都水平居中的樣式，示例：

text-align: center

四、垂直居中

/*固定寬度水平居中*/
.center {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/*子元素display:inline-block,父元素設(shè)text-align:center實(shí)現(xiàn)水平居中*/
div{
  text-align:center;
}
div .center{
  display:inline-block;
}

五、CSS三角形

先編寫一個空元素

<div class="triangle"></div>

然后，將它四個邊框中的三個邊框設(shè)為透明，剩下一個設(shè)為可見，就可以生成三角形效果：

.triangle { 
border-color: transparent transparent green transparent; 
border-style: solid;
 border-width: 0px 300px 300px 300px; 
height: 0px; 
width: 0px;
 }