百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

IFE 基础学院 第七天和第八天

作者蔡晓阳课程第七天到第八天:学习布局1431次浏览182018-05-04 22:37

position

静态定位

position:static(默认)

相对定位

position:relative

配合使用top,bottom,left和right

绝对定位

position:absolute

配合使用top,bottom,left和right
注意:绝对定位是相对于设置有display:relative的祖先元素,如果没有,最终会相对于<html>元素

固定定位

position:fixed
与绝对定位的工作方式完全相同
区别是固定定位元素相对于浏览器视口本身

堆叠顺序

z-index

Flexbox

display: flex;
如图

属性

属性 备注
flex-direction row(默认)/column 指定主轴的方向
flex-wrap wrap/wrap-reverse 换行
align-items stretch(默认)/center/flex-start/flex-end 控制在交叉轴上的位置,align-self覆盖align-items
justify-content flex-start(默认)/flex-end/center/space-around(均匀分布)/space-between(不会在两端留下任何空间) 控制在主轴上的位置
order 数字,默认0,越大越后面 flex 项排序
flex flex:0 1 auto(默认) flex是三个属性的缩写:flex-grow/flex-shrink /flex-basis

lex-direction和flex-wrap可以合并为flex-flow: row wrap;

对齐方式

水平居中

  1. 行内元素的水平居中

    .parent{text-align: center;}    
    .child{display: inline-block;}
    
  2. 块状元素的水平居中(定宽)

    .child{
             width: 200px;
             margin: 0 auto;
         }
    
  3. 块状元素的水平居中(不定定宽)

    可以直接给不定宽的块级元素设置text-align:center来实现,也可以给父元素加text-align:center 来实现居中效果。

垂直居中

条件是父元素是盒子容器且高度已经设定

  1. 子元素是行内元素,高度是由其内容撑开的

    设定父元素的line-height为其高度
  2. 子元素是块级元素但是子元素高度没有设定

    给父元素设定
    display:table-cell;vertical-align:middle
    
  3. 子元素是块级元素且高度已经设定

    计算子元素的margin-top或margin-bottom

水平垂直居中

  1. 水平对齐+行高

    text-align + line-height
    
  2. 水平+垂直对齐

    在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素

  3. 相对+绝对定位

    .parent{
     position: relative;
    }
    .child{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     height: 50px;
     width: 80px;
     margin: auto;
    }
    

网页布局

一列布局

margin : 0 auto

两列布局

参考了学习资料,跟着敲了一遍并观察理解

  1. 双inline-block

    .wrapper {
     font-size: 0;  
    }
    .left,
    .right {
     display: inline-block;
     vertical-align: top;  
     box-sizing: border-box;
    }
    .right {
     width: calc(100% - 140px);
    }
    
  2. 双float

    .wrapper{
     overflow: auto; 
    }
    .left,
    .right {
     float: left;
     box-sizing: border-box;
    }
    .right {
     width: calc(100% - 140px);
    }
    
  3. float+margin-left

    .wrapper-float {
     overflow: hidden;   
    }
    .left {
     float: left;
    }
    .right {
     margin-left: 150px;
    }
    
  4. absolute+margin-left

    .left {
     position: absolute;
    }
    .right {
     margin-left: 150px;
    }
    
  5. float+BFC

    .wrapper {
     overflow: auto;
    }
    .left {
     float: left;
     margin-right: 20px;
    }
    .right {
     margin-left: 0;
     overflow: auto;
    }
    
  6. flex

    .wrapper {
     display: flex;
     align-items: flex-start;
    }
    .left {
     flex: 0 0 auto;
    }
    .right {
     flex: 1 1 auto;
    }
    

三列布局

两侧定宽中间自适应

  1. 圣杯布局

    圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

  2. 双飞翼布局

    双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。

4条评论