css布局

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左中右布局

.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;
}

水平居中布局

不定宽居中、
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
注意页面改变后：

20160708231323660.jpg

造成这的原因是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

消除列表的样式

image.png

消除的样式

image.png

鼠标浮动效果

image.png

制作三角形

image.png

阴影效果转变时间设定

image.png

奇数浮动

image.png

横列消除有序列表第一个的左margin

image.png

鼠标浮动样式；
浮动为手状
cursor:pionter;