wangkaiwd / html-css-layout

页面常见布局

css知识点记录

1. 对于position:absolute,元素定位将相对于最近的一个已定位的父元素，如果没有的话相对于浏览器
2. flex布局的知识导图：
   
   重点：
   1. flex-grow:定义项目的放大比例，默认为0，即存在剩余空间也不放大
   2. flex-shrink:定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
   3. flex: 项目在容器上如何伸缩。
   1个值： 无单位：grow,有单位：basis
   2个值: 无单位：grow & shrink,有单位：grow & basis
   3个值：grow & shrink & basis
   4. flex-basis: 在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。
3. 等分布局的实现**
   
   
4. margin的零活运用（双飞翼布局）
   1. margin百分比
      规定基于父元素的宽度的百分比的外边距
   2. margin负边距
5. 设置初始化ie盒模型：box-sizing:border-box

   html {
       box-sizing: border-box;
   }
   *,
   *:after,
   *:before {
       box-sizing: inherit;
   }

   选择请*无法覆盖到伪元素，所以要给:after和:before分别设置，
   然后通过继承的方式应用到所有元素，方便为某个元素和其后代元素设置box-sizing:content-box
6. body有默认8px的margin
7. transparent：全透明黑色
8. :not选择器
   
9. 宽高等比例缩放：

   <div class="box">
        padding
   </div>

   .box {
        width: 20%;
        background-color: pink;
    }
    .box::after {
        content: '';
        display: block;
        /* 现在伪元素的父亲是box,高度应该和box的高度相等 */
        padding-top: 100%;
    }

10. 消失边界线：
    效果图：
    

    <div class="ul-container">
        <ul>
            <li>测试</li>
            <li>消失</li>
            <li>边界线</li>
            <li>右侧</li>
            <li>边界线</li>
            <li>消失</li>
            <li>测试</li>
        </ul>
    </div>

    .ul-container {
        overflow: hidden;
    }
    .ul-container, 
    ul{
        width:300px;
        margin-left: -1px;
    }
    li{
        float:left;
        width:99px;
        border-left:1px solid #999;
    }

    小技巧：父元素添加overflow:hidden，li添加反向边框，ul增加一个负的margin来实现