CSS入门（3）
CSS的常见布局
CSS常见布局使用display属性（文档流）+position属性（定位）+float属性（浮动）。
-
inline-block
display:inline-block属性既可以像行级元素一样水平分布，也可以像块级元素一样设置宽高，如果空间够就可以实现左右布局。 -
float（应用较广）
给要并排的子元素加上style=float:left(或right)，他们的父元素添加class:clearfix，即可脱离文档流，实现排排坐。clearfix的css为：
.clearfix::after { content=" "; display:block; clear:both; }
-
flex（不能兼容ie）
flex是一种新的布局方式
a. flex布局与方向无关
b. 可实现空间的自动分配、自动对齐
c. 用于简单的线性布局，复杂的可用grid布局（后面再学）
- 左右布局
- float百分比布局
<div class="content clearfix">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
.clearfix::after {
content:' ';
display:block;
clear:both;
}
.left {
float:left;
height:200px;
width:2%;
background: red;
}
.right {
float:left;
height:200px;
width:8%;
background: blue;
}
注：用于布局的div中不要添加其他margin、padding等，需要的话在里面再加元素。
- flex布局
.content {
display:flex;
}
.left {
float:left;
height:200px;
width:100px;
background: red;
}
.right {
float:left;
height:200px;
background: blue;
flex-grow:1;
}
- 左中右布局
- 圣杯布局
<div class="content">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
.content {
margin-left: 120px;
margin-right: 170px;
}
.middle {
height:200px;
width:100%;
background:yellow;
float:left;
}
.left {
height:200px;
width:100px;
background:red;
float:left;
margin-left:-100%;
position:relative;
left:-120px;
}
.right {
height:200px;
width:150px;
background:blue;
float:left;
margin-left:-150px;
position:relative;
right:-170px;
}
- flex布局
.content {
display:flex;
}
.middle {
height:200px;
background:yellow;
flex-grow:1;
margin:0 10px;
}
.left {
height:200px;
width:100px;
background:red;
}
.right {
height:200px;
width:150px;
background:blue;
}
- 水平居中：
- div的左右margin为auto
- 内联元素的父元素加上text-align:center;
- 垂直居中：单行元素line-height跟height相等就垂直居中
line-height+padding - flex的完美居中
display:flex;
justify-content:center;
align-items:center;
- 小Tips
- 如果是ie6加上.clearfix{zomm:1;}。
- 儿子的宽度建议使用百分比，比较有弹性，不要写死宽度，width:calc（25%-8px）。
- 做平均布局时，空间不够可以加一个空的div，左右margin为负数。
- class尽量不要用ad，会被屏蔽掉。
- 在作业过程中用到的一些效果元素
示例1
- 鼠标移上去0.2秒过渡出现阴影效果
div ｛ transition：box-shadow 0.2s； } div：hover ｛ box-shadow：0px 4px 17px 0px rgba(100, 100, 100, 0.3); }注：阴影的样式可以在box-shadow generator中设置、预览后再复制过来。
示例2
- 鼠标移上去变小手 cursor:pionter;
示例3
- 列表奇数左浮，偶数右浮，形成有间隙的两列
/*父元素ol已经设置class="clerarfix"*/ .skills ol li { float: left; width: 48%; } .skills ol li:nth-child(even) { float: right; }
示例4
- 让padding,margin,border都包含在width里，可使用box-sizing：border-box; 。
