1.浮动布局
要点子元素float，父元素clearfix
1.1左右布局
子元素float：left float；right；
父元素.clearfix::after{
content:'';
display:biock;
clear:both;
}
定位来进行布局
.container {
width: 1000px;
height: 700px;
margin: 0 auto;
position: relative;
}
.leftbox {
width: 300px; /左侧固定宽度值/
height: 100%;
position: absolute;
}
.rightbox {
height: 100%;
margin-left: 300px; /边距值=左侧固定宽度值/
position: relative;
}
使右侧的margin-left等于左侧宽度
2左中右布局
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background-color: green;
}
</style>
水平居中布局
不定宽居中、
1父元素text-align：center；子元素display：inline-block；
2.父元素display: flex;
justify-content: center;
align-items: center;
3.父元素：relative
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
定宽块元素：
方法1：margin:0 auto;
方法2：position：absolute left：50% margin-left：width/2
注意页面改变后：
造成这的原因是auto不为负
内联元素（inline）内联块（inline-table），inline-flex元素水平居中都有效：text-align:center;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
多块级元素水平居中
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
垂直居中
父元素高度确定的单行文本
设置 height 和 line-height相同
flex居中
display:flex;
justify-content:center;
align-items:center;
Tips
消除列表的样式
消除<a>的样式
鼠标浮动效果
制作三角形
阴影效果转变时间设定
奇数浮动
横列消除有序列表第一个的左margin
鼠标浮动样式；
浮动为手状
cursor:pionter;
