CSS 相关
1. 左边定宽, 右边自适应方案:
- /* 方案 1 */
- .left {
- width: 120px;
- float: left;
- }
- .right {margin-left: 120px;}
- /* 方案 2 */
- .left {
- width: 120px;
- float: left;
- }
- .right {
- float: left;
- width: calc(100% - 120px);
- }
2. 左右两边定宽, 中间自适应
- /* 方案 1: 中间列一定要放在左右两列的后面 */
- .left {
- float : left;
- height: 200px;
- width: 200px;
- background-color: red;
- }
- .right {
- float: right;
- height: 200px;
- width: 200px;
- background-color: green;
- }
- .center {
- height: 200px;
- margin: 0 210px;
- background-color: blue;
- }
- /* 方案 2 */
- .left {
- float : left;
- height: 200px;
- width: 200px;
- background-color: red;
- }
- .right {
- float: right;
- height: 200px;
- width: 200px;
- background-color: green;
- }
- .center {
- height: 200px;
- margin-left: 200px;
- width: calc(100% - 400px);
- }
- /* 方案 3 */
- .wrap {
- display: flex;
- }
- .left {
- width: 120px;
- }
- .right {
- width: 120px;
- }
- .center {
- flex: 1;
- }
3.CSS 左右垂直居中
设置 padding
绝对定位
- vertical-align
- table-cell
行内元素居中
- flex
- /* 1 */
- <div class="layout">
- <h1>hello world</h1>
- <h1>hello world</h1>
- </div>
- .layout{
- text-align: center;
- padding : 40px 0;
- background-color: #ddd;
- }
- /* 2 */
- .layout {
- position: absolute;
- left: 50%;
- right: 50%;
- border: 1px solid red;
- transfrom: translate(-50%, -50%);
- /* 如果知道宽度可采用负 margin, 兼容 ie */
- }
- /* 3 */
- .layout {
- height: 500px;
- width: 400px;
- }
- .layout:before {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
- h1 {
- vertical-align: middle;
- display: inline-block;
- }
- /* 4 */
- .layout {
- display: table;
- width: 400px;
- height: 400px;
- text-align:center;
- }
- h1 {
- display: table-cell;
- vertical-align: middle;
- }
- /* 5 */
- .layout {
- height: 200px;
- text-align: center;
- }
- span {
- line-height: 200px;
- }
- /* 6 */
- .layout {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- 4.box-sizing
content-box: 默认值 width 只包括内容的宽度, 总宽度 = width + margin + padding + border
border-box: width = padding + border + 内容, 总宽度 = margin + width
5. 格式化上下文
BFC: 块级格式化上下文, 也就是产生一个容器, 容器中的内容不会影响到外面的元素. 也就是要脱离文档流.
float 值不为 none
overflow 的值不为 visible
position 的值不为 relative 和 static
display 的值为 table-cell,table-caption,inline-block
来源: http://www.jianshu.com/p/1829371724cf