CSS - css布局 - 《学习笔记》

CSS中的流
- 什么是流体布局？
CSS中margin 无效的情形
css中的三角形
- 渐变圆角边框几种实现
圆柱的立体实现

CSS中的流

流(文档流)，我们常说的文档流到底指的是什么？流实际上是CSS中一种基本的定位和布局机制，把文档流看作现实生活中的水流，div和 span代表着CSS中的块级元素代表和内联元素代表，当水流入一个容器中，那么水面一定是平整的，放入木头，木头多半是浮于水面的，其特征对应着CSS中的div(水)和span(木头)如下图：

总而言之，所谓“流”，就是 CSS 世界中引导元素排列和定位的一条看不见的“水流”。（从上到下，从左到右）

什么是流体布局？

”流体布局“就是利用元素”流“的特性实现各类的布局效果。因为流本身具有自适应特性，所以流体布局也具有自适应特性，我们常说的”div+css布局“其实就是流体布局。

外部尺寸：就是div的宽度

内部尺寸：元素的尺寸由内部的元素决定

无宽度准则：意思是不给容器的外部尺寸设固定值的宽度，如果直接设死宽度，流动性会丢失。优点：布局会更灵活，容错性更强

宽度分离原则：就是 CSS 中的 width 属性不与影响宽度的 padding/border（有时候包括 margin）属性共存,作用将影响的子元素降到最低，方便维护

width独占一层标签，而padding、border、margin 利用流动性在内部自适应呈现

.father { 
 width: 180px; 
} 
.son { 
 margin: 0 20px; 
 padding: 20px; 
 border: 1px solid; 
}

高度自适应

CSS中margin 无效的情形

在实际开发的时候，经常会遇到设置的margin 无效的情形，可能有如下情况：

display表现为inline的非替换元素（没有src属性）的垂直margin是无效的

<div class="box">
 <span>123456</span>
</div>
<style>
  .box{
      width: 200px;
      height: 200px;
      background: chartreuse;
 }
 span{
     margin-top: 10px; //无效
     margin-left: 10px;//有效
 }
</style>

表格中的元素或者设置 display 计算值是 table-cell 或 table-row 的元素的margin 都是无效的。

margin 合并的时候，更改 margin 值可能是没有效果的。以父子 margin 重叠为例，假设父元素设置有 margin-top:100px，则此时子元素设置 margin-top:50px 就没有任何效果表现，除非大小比 100px 大，或者是负值。

<div class="father-box">
 <div class="child-box"></div>
</div>
<style>
 .father-box{
     width: 200px;
     height: 200px;
     background: chartreuse;
     margin-top: 100px;
 }
 .child-box{
     width: 100px;
     height: 100px;
     margin-top: 50px; //这个时候的margin无效
     background: cyan;
 }
</style>

css中的三角形

.triangle{
    width: 0;
    border-width: 10px 20px;
    border-style: solid; 
    border-color: #000 transparent transparent transparent; /*倒三角*/
}
.triangle{
    width: 0;
    border-width: 10px 20px;
    border-style: solid; 
    border-color: transparent #000 transparent transparent; /*右三角*/
}
.triangle{
    width: 0;
    border-width: 10px 20px;
    border-style: solid; 
    border-color: transparent transparent #000 transparent; /*正三角*/
}
.triangle{
    width: 0;
    border-width: 10px 20px;
    border-style: solid; 
    border-color: transparent transparent transparent #000; /*左三角*/
}

渐变圆角边框几种实现

实现这种样式通常会想到border-image，但这个属性没有办法设置圆角的边框，原因是使用 border-image 最大的问题在于，设置的 border-radius 会失效。

图形结合

<div class="jb-bg flex-btn">
<div class="inside-bg flex-btn">
</div>
</div>
<style>
    .jb-bg {
        width: 313px;
        height: 62px;
        background: linear-gradient(180deg, rgba(128, 255, 255, 0.596), rgba(128, 255, 255, 100%));
        border-radius: 30px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 157px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inside-bg {
        width: 305px;
        height: 54px;
        background: rgba(38, 83, 128, 0.6);
        border-radius: 30px;
    }
</style>

border-image + clip-path

<div class="border-img"></div>
<style>
.border-img{
 width: 200px;    
 height: 62px;
 margin: 0 auto;   
 border: 10px solid;    
 border-image: linear-gradient(45deg, gold, deeppink) 1;    
 clip-path: inset(0 round 10px);
 /* 意思是矩形裁剪实现一个父容器大小且 border-radius: 10px 的容器，将这个元素之外的所有东西裁剪掉（即不可见） */
}
</style>

圆柱的立体实现

.yuanzhu {
    position: relative;
    height: 54px;
    width: 230px;
    margin-top: 30px;
    background: linear-gradient(180deg, #ffeab4 0%, #fff1d1 27%, #f8bb58 100%);
    margin: 30px auto;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .yuanzhu::after {
    position: absolute;
    // top: -10px;
    right: -10px;
    content: '';
    display: block;
    width: 20px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fcc35c 0%, #ab710e 100%);
  }

实现效果：