一、左右布局
可以用float标签实现，左侧定宽，右侧自适应。
.left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right {
margin-left: 200px;
background-color:black;
}
二、左中右布局
可以用浮动float布局实现。
.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种方法实现水平居中，以后可继续补充。
- 1、首先给div块级元素设置固定宽高，示例：
height: 100px;
width: 50px;
然后给div块级元素设置左右外间距，示例：
margin-left: auto;
margin-right: auto;
- 2、在块级元素div中加入内联元素，示例：
<div>
<p>123</p>
466
</div>
说明：123和456都是块级元素div的内联元素.
然后给块级元素div增加此块级元素div内的内联元素都水平居中的样式，示例：
text-align: center
四、垂直居中
/*固定宽度水平居中*/
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
/*子元素display:inline-block,父元素设text-align:center实现水平居中*/
div{
text-align:center;
}
div .center{
display:inline-block;
}
五、CSS三角形
先编写一个空元素
<div class="triangle"></div>
然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
