CSS3笔记---布局样式


1.多栏布局

使用float或position进行页面布局时,有个比较显著的缺点,元素之间是各自独立的,因此经常底部不能对齐,导致页面中出现一块空白区域。使用多栏布局,可以将一个元素中的内容分为两栏或多栏去显示。

  • 元素内部使用多栏布局(指定元素总宽度,多栏均分宽度):
div#div1{
    width: 40em; // 指定元素总宽度
    column-count: 2; // 指定内部分成两栏
    -moz-column-count: 2; // FireFox
    -webkit-column-count: 2; // Safari、Chrome、Opera
}
  • 元素内部使用多栏布局(不指定元素总宽度,指定每栏宽度):
// 元素如果没设定总宽度,则外面要套个容器元素
div#container{
    width: 42em;
}
div#div1{
    column-count: 2; // 指定元素内部分两栏
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-width: 20em; // 指定每栏宽度
    -moz-column-width: 20em;
    -webkit-column-width: 20em;
}
  • 还可以指定多栏之间的间隔距离,以及间隔线:
div#div1{
    column-count: 2; // 指定元素内部分两栏
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-width: 20em; // 指定每栏宽度
    -moz-column-width: 20em;
    -webkit-column-width: 20em;
    column-gap: 3em; // 指定栏之间间隔距离
    -moz-column-gap: 3em;
    -webkit-column-gap: 3em;
    column-rule: 1px solid red; // 指定栏之间分隔线
    -moz-column-rule: 1px solid red;
    -webkit-column-rule: 1px solid red;
}

使用多栏布局时,各栏宽度是相等的。也不可能具体指定什么栏中显示什么内容,因此比较适合用在显示文章内容的场景,不适合用于布局网页结构。


2. 盒布局

除多栏布局外,还可以使用盒布局解决使用float或position时多栏底部不能对齐的问题。

  • 使用float的旧方式(底部不对齐):
#left-sidebar{
    float: left;
    width: 200px;
    padding: 20px;
    background-color: orange;
}
#contents{
    float: left;
    width: 300px;
    padding: 20px;
    background-color: yellow;
}
#right-sidebar{
    float: left;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
    box-sizing: border-box;
}
  • 使用盒布局:
#container{
    display: -moz-box; // 指定使用盒布局 FireFox
    display: -webkit-box; // Safari、Chrome、Opera
}
#left-sidebar{ // 删除float
    width: 200px;
    padding: 20px;
    background-color: orange;
}
#contents{ // 删除float
    width: 300px;
    padding: 20px;
    background-color: yellow;
}
#right-sidebar{ // 删除float
    width: 200px;
    padding: 20px;
    background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
    box-sizing: border-box;
}

3. 弹性盒布局

在使用盒布局时,我们对各区块是单独设定宽度的。如果想让区块的总宽度等于浏览器的宽度,并且能随着窗口宽度的改变而改变,那么弹性盒布局就派上用场了。因此相比盒布局,弹性盒布局用来布局整个网页总体结构无疑是更佳的。

  • 将盒布局改成弹性盒布局:
#container{ // box改成flex
    display: flex;
}
#left-sidebar{
    width: 200px;
    padding: 20px;
    background-color: orange;
}
#contents{ // 去除中间栏的宽度,改成flex属性
    flex: 1;
    padding: 20px;
    background-color: yellow;
}
#right-sidebar{
    width: 200px;
    padding: 20px;
    background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
    box-sizing: border-box;
}
  • 使用order属性改变元素的显示顺序(内容在最左边,右栏在中间,左栏在最右边):
#container{
    display: flex;
}
#left-sidebar{
    order : 3;
    width: 200px;
    padding: 20px;
    background-color: orange;
}
#contents{
    order: 1;
    flex: 1; // 是flex-grow、flex-shrink 和 flex-basis的缩写
    padding: 20px;
    background-color: yellow;
}
#right-sidebar{
    order: 2;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
    box-sizing: border-box;
}

flex 属性定义弹性盒模型子元素如何分配“容器剩余空间”,是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性:
flex: 1: 则其计算值为 flex: 1 1 0%; // 子元素不定义flex相关属性时的默认值
flex: auto,:则其计算值为 flex: 1 1 auto;// flex-basis为auto,伸缩基准值为自身width值,如果没有定义width,则基准值为内容宽度
flex: none,:则其计算值为 flex: 0 0 auto;// 本子元素不参与容器剩余空间分配
flex-grow:
扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。在「flex」属性中该值如果被省略则默认为「1」。
flex-shrink:
收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。在收缩的时候收缩比率会以伸缩基准值加权在「flex」属性中该值如果被省略则默认为「1」。
flex-basis:
伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。在「flex」属性中该值如果被省略则默认为「0%」在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的width值,如果自身的宽度没有定义,则长度取决于内容。

  • 使用flex-direction改变元素的排列顺序
#container{
    display: flex;
    border: solid 5px blule;
    flex-direction: column; // 纵向排列(默认row)
    width: 500px
    height: 300px;
}
  • 控制换行方式
    子元素宽度超过容器时,默认会进行伸缩或扩张。可通过制定flex-wrap属性控制换行:
#container{
    display: flex;
    border: solid 5px blue;
    flex-direction: row;
    flex-wrap: wrap; // 换行
    width: 500px;
    height: 300px;
}
#text-a{
    background-color: orange;
}
#text-b{
    background-color: yellow;
}
#text-c{
    background-color: limegreen;
}
#text-a, #text-b, #text-c{
    box-sizing: border-box;
    font-size: 1.5em;
    font-weight: bold;
    // 3个子元素宽度合计超过容器宽度,由于对容器设置了flex-wrap: wrap,因此会换行而不伸缩
    width: 250px; 
}

4. 弹性盒布局下,指定元素的水平和垂直对齐方式

当flex-grow属性值不为0时,各子元素在main axis轴方向上自动伸缩,所以justify-content无效。

下面假设弹性盒的布局方向按照默认的flex-direction: row,横向布局:

  • justify-content指定元素在水平方向(main axis)的对齐方式
    justify-content属性值如下:
    flex-start:从main-start开始布局所有子元素
    flex-end:从main-end开始布局所有子元素
    center:居中布局所有子元素
    space-between:将剩余空间平均分配在子元素之间
    space-around:子元素周围平均分配剩余空间

    下面是一个示例,在容器里指定justify-content:

#container{
    display: flex;
    border: 5px solid blue;
    flex-direction: row;
    width: 600px;
    height: 30px;
    justify-content: flex-end;
}
  • align-items指定子元素在垂直方向(cross axis)的对齐方式
    align-items属性值如下:
    flex-start:从cross-start开始布局所有子元素
    flex-end:从cross-end开始布局所有子元素
    center:居中布局所有子元素
    baseline:
    stretch:垂直方向上高度被调整为最大

  • align-self指定某子元素的脱离出align-items的独立对齐方式
    align-self属性值如下:
    auto:继承父元素的align-items属性值
    其他可指定属性值同align-items

下面是一个示例,在容器里指定justify-content:

#container{
    display: flex;
    border: 5px solid blue;
    flex-direction: row;
    width: 600px;
    align-items: flex-start;
}
#div-a{
    background-color: orange;
    width: 100px;
    font-size: 12px;
    align-self: flex-end;
}
#div-b{
    background-color: yellow;
    width: 150px;
    font-size: 24px;
}
#div-c{
    background-color: limegreen;
    width: 200px;
    font-size: 36px;
}

弹性盒多行布局时(flex-wrap: wrap),可以使用align-content属性指定各行的对齐方式。该属性与align-items的区别在于:align-items指定子元素的对齐方式,而align-content指定行对齐方式。

你可能感兴趣的:(CSS3笔记---布局样式)