百度前端学院个人学习笔记

Task3 三栏式布局

几种三栏式布局方法：

1.  float+margin

左右两栏分别向左向右浮动，中间栏通过外边距给左右两栏腾出空间，中间栏的宽度根据浏览器窗口自适应

1. .left{  
2.     float:left;  
3. }  
4. .right{  
5.     float:right;  
6. }  
7. .left,.right{  
8.     width:200px;  
9.     background-color:#3F0;  
10. }  
11. .middle{  
12.     margin-left:200px;  
13.     margin-right:200px;  
14.     background-color:#C00;  
15. }  

1. <div class="wrap">  
2.   <div class="left">left</div>  
3.   <div class="right">right</div>  
4.   <div class="middle">middle</div>  
5. </div>  

注意！书写顺序：先写左右两栏（左右两栏顺序可以变换），再写中间栏（也就是主题栏），并且次方法适用于左右两边宽度已知的情况。还要注意父元素北京崩塌的问题。

2. position+margin

通过绝对定位将左右两栏固定，中间栏通过外边距给左右两栏腾出空间，中间栏的宽度根据浏览器窗口自适应

1. .left{  
2.     left:0;  
3. }  
4. .right{  
5.     right:0;  
6. }  
7. .left,.right{  
8.     width:200px;  
9.     background-color:#3F0;  
10.     position:absolute;  
11.     top:0;  
12. }  
13. .middle{  
14.     margin:0 200px;  
15.     background-color:#C00;  
16. }  
17. <div class="left">left</div>  
18. <div class="middle">middle</div>  
19. <div class="right">right</div>  

第二点总结： 对左右两栏设置宽度，定位方式为绝对定位，其余与第一方法大同小异，两边栏的宽度都必须设定。

3. 双飞翼布局 （float+负margin）(中间部分优先渲染)

1. .middle{  
2.     float:left;  
3.     width:100%;  
4.     background-color:#C00;  
5. }  
6. .left{  
7.     float:left;  
8.     width:190px;  
9.     margin-left:-100%;  
10.     position:relative;  
11.     left:-190px;  
12.     background-color:#0F9;  
13. }  
14. .right{  
15.     float:left;  
16.     width:230px;  
17.     margin-left:-230px;  
18.     position:relative;  
19.     right:-230px;  
20.     background-color:#0F9;  
21. }  
22. .wrap{  
23.     padding:0 230px 0 190px;  
24. }  
25. <div class="wrap">  
26.   <div class="middle">middle</div>  
27.   <div class="left">left</div>  
28.   <div class="right">right</div>  
29. </div>  

步骤：

1. 三者都向左浮动
   
2. 设置middle宽度100%，设置左右两栏的宽度
   
3. left设置负左边距为100%，right设置负左边距为负的自身宽度
4. 设置middle的padding值给左右两个面板留出空间设置左右两个面板为相对定位，left的left值为负的left宽度，right的right值为负的right宽度。

注：主面板部分优先渲染，当面板的middle部分比左右两边的子面板宽度小的时候，布局就会乱掉。可以通过设置middle的min-width属性或使用双飞翼布局避免问题。

4、双飞翼布局（float+负margin）

[html] view plain copy

1. .wrap{  
2.     float:left;  
3.     width:100%;  
4. }  
5. .left{  
6.     float:left;  
7.     width:190px;  
8.     margin-left:-100%;  
9.     background-color:#0C0;  
10. }  
11. .right{  
12.     float:left;  
13.     width:230px;  
14.     margin-left:-230px;  
15.     background-color:#0C0;  
16. }  
17. .middle{   
18.     margin:0 230px 0 190px;  
19.     background-color:#F00;  
20. }  
21. <div class="wrap">  
22.   <div class="middle">middle</div>  
23. </div>  
24. <div class="left">left</div>  
25. <div class="right">right</div> 

步骤：

1. 三者都设置左浮动
   
2. 设置wrap宽度为100%，设置左右两个的宽度
   
3. left设置负左边距为100%，right设置负左边距为负的自身宽度
   
4. 设置middle的margin值给两个子面板留出空间。
   

注：圣杯采用的是padding,而双飞翼采用的是margin，解决了圣杯布局middle的最小宽度不能小于左侧栏的缺点。

此外：双飞翼布局中用到的负边距相关知识详见 http://blog.csdn.net/u013848401/article/details/52453034

关于浮动float的一些感想：1. float元素脱离文档流，适用于非绝对定位元素。

                                         2. 不会影响块元素的布局，但是会压缩同一水平（当前和随后）的line box。

Task4 定位和居中问题

一.  CSS实现居中的几种的几种方法

1.  行内元素 ：

1）水平居中: text-align:center

特别的：

ul水平居中:加

display:table;
margin:0 auto;

此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

2）垂直居中：

父元素高度确定的单行文本：line-height:父元素的height

2. 块级元素：

1. 水平居中：

1）margin: 0 auto;

0指上下外边距为0，auto指左右外边距自适应，此时水平居中。（该方法不适用于垂直居中） 这种方法不适用于通屏，即若子元素溢出，则在父元素中不居中

2）position+负margin实现

步骤：将块状元素positive设置为absolute，left: 50%，最后设置margin-left为负数，负数的绝对值为元素宽度的一半。

2. 垂直居中：

1）给元素加上<table>标签（完整的，包括table, tbody, tr, td）,利用table的属性vertical-align:middle实现垂直居中

2）类似上面水平居中方法2），position改为top, 负margin参数改变。

二. CSS画圆角方法

画法: 先画相应矩形，在用border-radius

1.画出圆

{
  width:100px;
  height:100px;
  border-radius:50px;
}

2.画出方向四个不同的本圆

.top
{
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
}
.right {
  height: 100px;
  width: 50px;
  border-radius: 0 50px 50px 0;
}
.bottom {
  width: 100px;
  height: 50px;
  border-radius: 0 0 50px 50px;
}
.left {
  width: 50px;
  height: 100px;
  border-radius: 50px 0 0 50px;
}

3.画出四分之一个圆方法：

{
  width:50px;
  height:50px;
  border-radius:50px 0 0 0;
}

4.椭圆

<div class="ellipse">
</div>
 .ellipse{
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background: black;
}

6.四分之一椭圆

<div class="quarter-ellipse">
</div>
.quarter-ellipse{
    width: 200px;
    height: 150px;
    border-radius: 100% 0 0 0;
    background: black;
}