CSS3样式 · webnote

布局样式

属性	描述
display	元素的显示模式
float	元素浮动
clear	清除浮动
overflow	复合属性。设置元素处理溢出内容的方式

文档流是浏览器解析网页的一个重要概念,对于一个XHTML网页,body元素下的任意元素
根据其前后顺序，组成了一个上下关系,这便是文档流
浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则

<div class="demo"></div>


.demo{
    width:100px;
    height:100px;

    background-color:red;

    display:inline-block;         /*行间块状元素*/
    display:inline;            /*行间元素*/
    display: block;            /*块状元素*/
    display: none;            /*隐藏元素*/
    display: flex;            /*弹性元素*/
    display: inline-flex;     /*行间弹性元素*/

    float:left;        /*左浮动*/
    float:right;    /*右浮动*/

    clear:left;        /*左清除*/
    clear:right;    /*右清除*/
    clear:both;        /*两边清除*/
    clear:none;        /*不清除*/


    overflow:visible;        /*对溢出内容不做处理，内容可能会超出容器。*/
    overflow:hidden;        /*隐藏溢出容器的内容且不出现滚动条。*/
    overflow:scroll;        /*隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。*/
    overflow:auto;            /*当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条*/
}

清除浮动

一、浮动产生原因

简单地说浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题；

二、浮动产生负作用

1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三、css解决浮动，清除浮动方法

首先列举一个小案例：
<style>
    .box{margin: 50px auto;border:1px solid #ccc;background: #fc9;color:#fff;}
    .red{width: 80px;height: 100px;background: red;float:left;}
    .sienna{width: 80px;height: 100px;background: sienna;float:left;}
    .blue{width: 80px;height: 100px;background: blue;float:left;}
</style>
<body>
<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>
</body>

子元素都设置了float属性，父元素div高度不能撑开，样式margin属性显示有问题；


方法一：添加新的元素 、应用 clear：both；
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

.clear{clear: both;}
<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
    <div class="clear"></div>
</div>

方法二： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）
主要推荐使用这种方法清除浮动

.clearfix:after{
    content:"";/*设置内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*将文本转为块级元素*/
    visibility:hidden;/*将元素隐藏*/
    clear:both;/*清除浮动*/
}
.clearfix{
    zoom:1;/*为了兼容IE*/
}


<body>
    <div class="box clearfix">
        <div class="red">1</div>
        <div class="sienna">2</div>
        <div class="blue">3</div>
    </div>
</body>

定位样式

属性	描述
position	定位方式
left	设置元素参照相对物左边界向右偏移位置
right	设置元素参照相对物右边界向左偏移位置
top	设置元素参照相对物顶边界向下偏移位置
bottom	设置元素参照相对物底边界向上偏移位置
z-index	设置元素的层叠顺序

<div class="demo"></div>

.demo{
    width:100px;
    height:100px;

    position: static;    /*静态定位*/
    position:absolute;    /*绝对定位*/
    position: relative;    /*相对定位*/
    position: fixed;    /*固定定位*/
    position: sticky;    /*头部固定定位*/

    left:20px;    /*设置元素参照相对物左边界向右偏移位置*/
    right:30px;    /*设置元素参照相对物右边界向左偏移位置*/
    top:30px;    /*设置元素参照相对物顶边界向下偏移位置*/
    bottom:30px;    /*设置元素参照相对物底边界向上偏移位置*/
    z-index:30;    /*设置元素的层叠顺序*/
}

伸缩盒样式

属性	描述
flex-grow	设置弹性盒的扩展比率
flex-shrink	设置弹性盒的收缩比率
flex-basis	设置弹性盒伸缩基准值
flex	复合属性。设置缩盒对象的子元素如何分配空间
flex-direction	设置弹性盒元素水平方向的显示方式
flex-wrap	设置弹性盒元素垂直方向的显示方式
flex-flow	复合属性。设置弹性盒模型对象的子元素显示方式
align-content	设置弹性盒元素所在行垂直方向的排列方式
align-items	设置弹性盒元素垂直方向的排列方式
align-self	设置弹性子元素垂直方向的排列方式
justify-content	设置弹性盒元素水平方向的排列方式

flex-grow，flex-basis

<div class="demo">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
</div>

.demo {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;    /*设置元素为弹性盒子*/
}

.demo div{
    flex-basis:100px;  /* 设置弹性盒伸缩基准值 */
}

.demo div:nth-child(1) {
    flex-grow: 1;  /*设置弹性盒的扩展比率*/
}

.demo div:nth-child(2) {
    flex-grow: 3;    /*设置弹性盒的扩展比率*/
}

flex-shrink

<div class="demo">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:red;"></div>
</div>

.demo {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex; /*设置元素为弹性盒子*/
}

.demo div{
    flex-basis:100px;   /* 设置弹性盒伸缩基准值 */
}

.demo div:nth-child(1){
    flex-shrink:5;    /* 设置弹性盒的收缩比率 */
}

flex

<div class="demo">
    <div style="background-color:red;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:blue;"></div>
</div>

.demo{
    display:flex;
    width:400px;
    height:100px;
}

.demo div:nth-child(1){flex:1 1 400px;}
.demo div:nth-child(2){flex:1 2 400px;}
.demo div:nth-child(3){flex:1 2 400px;}

flex-direction

<ul class="demo">
    <li style="background-color:red;"></li>
    <li style="background-color:green;"></li>
    <li style="background-color:blue;"></li>
</ul>

.demo{
    display:flex;
    flex-direction:row;    /*默认值。项目将水平显示正如一行一样*/
    flex-direction:row-reverse;    /*与 row 相同，但是以相反的顺序*/
    flex-direction:column; /*项目将垂直显示，正如一列一样*/
    flex-direction:column-reverse; /*与 column 相同，但是以相反的顺序*/
}

.demo li{
    width:100px;
    height:100px;
    list-style:none;
    border:1px solid #ccc;
}

flex-wrap

<ul class="demo">
    <li style="background-color:coral;"></li>
    <li style="background-color:lightblue;"></li>
    <li style="background-color:khaki;"></li>
    <li style="background-color:pink;"></li>
    <li style="background-color:lightgrey;"></li>
    <li style="background-color:lightgreen;"></li>
</ul>

.demo{
    width:200px;
    height:200px;
    display:flex;
    flex-wrap:nowrap;    /*flex容器为单行。该情况下flex子项可能会溢出容器*/
    flex-wrap:wrap;        /*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行*/
    flex-wrap:wrap-reverse;    /*反转 wrap 排列*/

}

.demo li{
    width:50px;
    height:50px;
    list-style:none;
    border:1px solid #ccc;
}

flex-flow

<ul class="demo">
    <li style="background-color:coral;"></li>
    <li style="background-color:lightblue;"></li>
    <li style="background-color:khaki;"></li>
    <li style="background-color:pink;"></li>
    <li style="background-color:lightgrey;"></li>
    <li style="background-color:lightgreen;"></li>
</ul>

.demo{
    width:200px;
    height:200px;
    display:flex;
    flex-flow:column wrap-reverse;  /*水平方向的排列、垂直方向的排列*/

}

.demo li{
    width:50px;
    height:50px;
    list-style:none;
    border:1px solid #ccc;
}

align-content

<ul class="demo">
    <li style="background-color:coral;"></li>
    <li style="background-color:lightblue;"></li>
    <li style="background-color:khaki;"></li>
    <li style="background-color:pink;"></li>
    <li style="background-color:lightgrey;"></li>
    <li style="background-color:lightgreen;"></li>
</ul>


.demo{
    width:200px;
    height:200px;
    display:flex;
    border:1px solid red;
    flex-flow: row wrap;
    align-content:stretch;     /*默认值。项目被拉伸以适应容器*/
    align-content:center;    /*项目位于容器的中心*/
    align-content:flex-start;     /*项目位于容器的开头*/
    align-content:flex-end;     /*项目位于容器的结尾*/
    align-content:space-between;     /*项目位于各行之间留有空白的容器内*/
    align-content:space-around;     /*项目位于各行之前、之间、之后都留有空白的容器内*/
}

.demo li{
    width:50px;
    height:50px;
    list-style:none;
    border:1px solid #ccc;
}

align-items

<ul class="demo">
    <li style="background-color:coral;"></li>
    <li style="background-color:lightblue;"></li>
    <li style="background-color:khaki;"></li>
    <li style="background-color:pink;"></li>
    <li style="background-color:lightgrey;"></li>
    <li style="background-color:lightgreen;"></li>
</ul>

.demo{
    width:200px;
    height:200px;
    padding:0;
    display:flex;
    border:1px solid red;
    align-items:stretch;    /*默认值。元素被拉伸以适应容器*/
    align-items:baseline;    /*元素位于容器的基线上*/
    align-items:center;        /*元素位于容器的中心*/
    align-items:flex-start;    /*元素位于容器的开头*/
    align-items:flex-end;    /*元素位于容器的结尾*/

}

.demo li{
    width:50px;
    height:50px;
    list-style:none;
    border:1px solid #ccc;
}

align-self

<ul class="demo">
    <li style="background-color:coral;"></li>
    <li style="background-color:lightblue;"></li>
    <li style="background-color:khaki;"></li>
    <li style="background-color:pink;"></li>
    <li style="background-color:lightgrey;"></li>
    <li style="background-color:lightgreen;"></li>
</ul>


.demo{
    width:200px;
    height:200px;
    padding:0;
    display:flex;
    border:1px solid red;

}

.demo li{
    width:50px;
    height:50px;
    list-style:none;
    border:1px solid #ccc;
}

.demo li:nth-child(3){
    align-self:auto;    /*默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"*/
    align-self:stretch;        /*元素被拉伸以适应容器*/
    align-self:center;        /*元素位于容器的中心*/
    align-self:baseline;    /*元素位于容器的基线上*/
    align-self:flex-start;    /*元素位于容器的开头*/
    align-self:flex-end;    /*元素位于容器的结尾*/
}

justify-content

<ul class="demo">
    <li style="background-color:coral;"></li>
    <li style="background-color:lightblue;"></li>
    <li style="background-color:khaki;"></li>
    <li style="background-color:pink;"></li>
</ul>

.demo{
    width:400px;
    height:200px;
    padding:0;
    border:1px solid red;
    display:flex;
    justify-content:center;        /*项目位于容器的中心*/
    justify-content:flex-start;    /*默认值。项目位于容器的开头*/
    justify-content:flex-end;    /*项目位于容器的结尾*/
    justify-content:space-between;    /*项目位于各行之间留有空白的容器内*/
    justify-content:space-around;    /*项目位于各行之前、之间、之后都留有空白的容器内*/
}

.demo li{
    width:50px;
    height:50px;
    list-style:none;
    border:1px solid #ccc;
}