CSS 样式介绍(六)

1. flex属性 CSS3 伸缩布局
.demo {
    width: 80%;
    height: 300px;
    border: 1px solid pink;
    margin: 100px auto;
    /*父级盒子添加 flex */
    display: flex; /*css3 伸缩布局*/
    flex-direction: column; /*伸缩布局的排列方式 row 水平,column 垂直方向,默认是水平排列*/
    min-width: 500px; /*最小宽度*/
    max-width: 1200px; /*最大宽度*/
}

.demo div {
    width: 100%;
}

.demo div:nth-child(1) {
    background-color: pink;
    height: 100px; /*固定宽度 */
}

.demo div:nth-child(2) {
    background-color: blue;
            flex: 1; /*子盒子添加分数, 不跟单位*/
    margin: 10px 0;
}

.demo div:nth-child(3) {
    background-color: green;
    flex: 1;
}

<!-- body部分 -->
<section class="demo">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
/*当如果用伸缩布局时 给定子元素宽高 可以调整布局排列方式*/
.demo1 {
    width: 80%;
    height: 600px;
    border: 1px solid pink;
    margin: 100px auto;
    /*父级盒子添加 flex */
    display: flex; /*css3 伸缩布局*/
    min-width: 500px; /*最小宽度*/
    max-width: 1200px; /*最大宽度*/

    /*justify-content 调整主轴(水平)对齐方式*/
    justify-content: flex-start; /*让子元素从父容器的左边对齐排列*/
    justify-content: flex-end; /*让子元素从父容器的右边对齐排列*/
    justify-content: center; /*让子元素从父容器的水平居中对齐排列*/
    justify-content: space-between; /*左右盒子贴近父盒子,中间的盒子平均分布空白间距*/
    justify-content: space-around; /*相当于给盒子添加了左右margin外边距*/

    /*align-items 调整侧轴(垂直)对齐方式,主要针对单行垂直对齐方式*/
    align-items: flex-start; /*让子元素从父容器的上部对齐排列*/
    align-items: flex-end; /*让子元素从父容器的底部对齐排列*/
    align-items: center; /*让子元素从父容器的垂直居中对齐排列*/
    /* align-items: stretch; 让子元素拉伸适用父容器(子元素不给高度的前提下)*/
    flex-wrap: nowrap; /*默认不换行,如果宽高不够自动压缩显示*/
    flex-wrap: wrap;
    /*flex-wrap: wrap-reverse; 翻转*/
}

.demo1 div {
    width: 200px;
    height: 200px;
}

.demo1 div:nth-child(1) {
    background-color: pink;
}

.demo1 div:nth-child(2) {
    background-color: blue;
}

.demo1 div:nth-child(3) {
    background-color: green;
}

.demo1 div:nth-child(4) {
    background-color: yellow;
}

.demo1 div:nth-child(5) {
    background-color: black;
}

<!-- body部分 -->
<section class="demo1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
</section>
2. BFC介绍 重点

BFC:块级格式化上下文 Block formatting context,就是一个独立的渲染区域,里面元素布局不影响外部区域。不是所有的元素都能产生BFC,块级元素能具有BFC特性。
以下可以触发BFC:

  • float 属性不为none
  • position为absolute或fixed
  • display为 inline-block, table-cell,table-caption, flex, inline-flex
  • overflow 不为 visible

BFC作用:

  • 1.清除元素内部浮动
  • 2.解决属于同一个BFC内两个盒子外边距合并的问题,可以那创建另外一个BFC
  • 3.制作右侧自适应的盒子
3. 背景渐变色,用得较少
.demoColor {
   width: 399px;
   height: 40px;
   /*background: linear-gradient(渐变的起始位置,起始颜色,结束颜色);*/
   /*background: linear-gradient(渐变的起始位置,颜色 位置,颜色 位置);*/
   background: linear-gradient(top, red, green);
   background: -webkit-linear-gradient(top, red, green);
   background: -webkit-linear-gradient(left, red 0%, green 29%, blue 80%);

   background: -moz-linear-gradient(top, red, green);
   /*因为背景渐变 兼容性问题很严重,必须在前面添加浏览器的私有前缀*/
   margin: 200px auto;
}

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,418评论 1 88
  • 1.解决margin叠加问题 三P每个p之间的距离为50px,发生了外边距叠加。 要解决这个叠加问题即让每个P之间...
    岁月帮凶ds阅读 176评论 1 0
  • 一、BFC是什么? 它是 Block Formatting Context (块级格式化上下文) 的简称,接下来通...
    莫可可小姐d远方阅读 2,435评论 15 38
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 439评论 0 2
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 291评论 0 3