baidu_ife_小薇学院总结（二）

发表于 | 分类于 |

Task3:三栏式布局

1.三栏式布局方法

方法一：inline-block方法

1
2
3
4
left,center,right{ display：inline-block} /* 包裹作用，不会塌陷 */ 
left{width:200px}
right{width:120px}
center{width:calc(100%-200px-120px-40px)} /* 动态计算中间盒子的宽度 */

方法二：float布局

1
2
3
4
5
6
7
<div class="left">
<div class="right">  /* 这里将right提到center前面 */
<div class="center">
.left{float:left}
.center{ margin-left: 220px; margin-right: 140px; }
.right{float: right;}

方法三：Flex布局（新）

1
2
3
4
5
6
7
8
.middle{display: flex;}
.left,.right{width: 100px;}
.right{order: 2;}
.main{
    order: 1;
    flex: 1; /*让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容*/ 
    margin: 0 20px;
}

方法四：圣杯和双飞翼布局（旧）
基本思路及区别：
1.两种布局的基本构思为：首先让中间层100%宽度占满同一高度的空间，在左右两层被挤出中间层所在区域时， 使用margin-left的负值将左右两个层拉回与中间层同一高度的空间，接下来调整左右两层到指定位置， 最后使用中间层的margin或padding属性使中间层的内容躲出左右两层占住的显示区。

2.两种布局的主要区别在于：圣杯布局采用一个父层包含中间、左右三个子层，设置父层的padding值腾出左右两层的显示区， 并对左右两层使用relative和left、right值调整位置；双飞翼采用中间、左右三层并列，再在中间层里设置一个子层， 设置中间层子层的margin值腾出左右两层的显示区，对左右两层使用margin值即可调整位置；

圣杯html结构：

1
2
3
4
5
<div id="container">
    <div id="main"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

圣杯css基本代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container{
    padding: 0px 120px 0 140px;/*腾出宽度*/
    }
#main{
    width: 100%;
    position: relative;
    }
#left{
    width: 140px;
    margin-left: -100%;/*将left层拉回main层所在高度区域*/
    left: -140px;/*调整位置*/
    position: relative;
    }
#right{
    width: 120px;
    margin-left: -120px;/*将right层拉回main层所在高度区域*/
    right: -120px;/*调整位置*/
    position: relative;
    }

双飞翼html结构：

1
2
3
4
5
<div id="main">
    <div id="main-inner"></div>
</div>
<div id="left"></div>
<div id="right"></div>

双飞翼css基本代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#main{
    width: 100%;
    position: relative;
    }
#main-inner{
    margin：0 120px 0 140px；
    ｝
#left{
    width: 140px;
    margin-left: -100%;/*将left层拉回main层所在高度区域*/
    }
#right{
    width: 120px;
    margin-left: -120px;/*将right层拉回main层所在高度区域*/
    }

2.box-sizing 属性

取值说明

  1. content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

  2. border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）。

3.inline-block之间间距

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>
或者是：
<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>
或者是借助HTML注释：
<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

Task4:定位和居中问题

1.水平及上下居中

方法一：绝对定位的居中实现

1
2
3
4
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*x轴y轴各位移div盒子的一半*/

方法二：margin:auto实现绝对定位元素的居中

1
2
3
4
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; 
  margin: auto; /* 有了这个就自动居中了 */
```   	
方法三：Flex布局方法：

width:100%;
height:100%;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;

1
2
3
4
5
6
7
8
9
## 2.清除浮动
方法一：overflow:hidden;（或者auto，hidden更好）
方法二：清除浮动更好的方法是clearfix技巧
“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。
一个常见的方法是将定义一个类名，把这个类名加到需要清除浮动的容器上。例如使用“clearfix”清除浮动，Dan Cederholm为容器设置了一个类名“group”。在需要清除浮动的容器上添加这个类名“group”。

.group:before,
.group:after {
content: “”;
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
## 3.absolute定位初始位置
在文档流中，定义为position:absolute的元素已经被删除了。
那它的定位到底是相对于body，还是父级元素呢？
结论如下：
position:absolute是相对于他的包含块中第一个有position:absolute或relative及 fixed属性的父级元素，如果都没有，就是相对于body。
## 4.border-radius属性
border-radius属性其实可以分为四个其他的属性：
border-radius-top-left         /*左上角*/
border-radius-top-right       /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left   /*左下角*/
//提示：按顺时针方式
制作半圆：

width:100px;
height:50px;//高度是宽度的一半
background-color:#000;
border-radius:50px 50px 0 0;//左上和右上至少为height值

1
画实心圆

width:100px;
height:100px;
background-color:#cb18f8;
border-radius:50px;
（或者border-radius:50%）
```