html---布局动画元素分类 1.行内元素(display: inline;) span、a、i、em、label、b

元素分类

1.行内元素(display: inline;) span、a、i、em、label、b

// 设置宽高无效(宽高由内容撑开)；
// 对margin仅设置左右方向有效，上下无效；padding设置左右有效(影响左右元素布局),上下有效但是不占位置(即不影响下面元素的布局)；
// 不会独占一行

2.块状元素(display: block) div、p、h、ul、li、tr、form、nav、aside、header、footer、section、article

// 能够识别宽高(宽度默认继承父元素100%，高度由内容撑开)；
// margin和padding的上下左右均对其有效；
// 独占一行

3.行内块状元素(display: inline-block) td、img、input、select、textarea

// 能够识别宽高(宽高默认由内容撑开); 
// margin和padding的上下左右均对其有效; 
// 不会独占一行

4.特殊(display: table)：table

// 能识别宽高(宽高默认由内容撑开)；
// margin和padding的上下左右均对其有效；
// 独占一行

定位

1.相对定位relative

// 不脱标(意味着元素若是行内元素，依旧是行内，是块级依然是块级元素)，
// 偏移：相对于自己原先的位置进行偏移, 
// 若是块级元素：原有的位置依然被占据，不影响其兄弟元素的位置 
// 不影响父元素的高度（高度默认还是由子元素撑开）

2.绝对定位absolute

// 脱标(块级元素不再独占一行，行内元素设置宽高有效，宽度默认由内容撑开)
// 宽度：若设置width:100%,是基于距离它最近的非静态定位父元素的宽度的100%，若没找到非静态定位的父元素，则是基于body宽度的100%
// 偏移：相对于距离它最近的非静态定位父元素的左上角点进行偏移
// 影响父元素：由于子元素设置position: absolute，子元素会浮出来，导致父元素高度塌陷。(父元素高度不再由绝对定位的子元素撑开)

3.固定定位fixed

// 脱标(块级元素不再独占一行，行内元素设置宽高有效，宽度默认由内容撑开)
// 宽度：若设置width:100%,是基于body宽度的100%
// 偏移：相对于浏览器的可视窗口
// 影响父元素：由于子元素设置position: fixed，子元素会浮出来，导致父元素高度塌陷。(父元素高度不再由固定定位的子元素撑开)

4.静态定位static(默认)

浮动

// 脱标(块级元素不再独占一行，行内元素设置宽高有效，宽度默认由内容撑开)
// 偏移：偏移至父元素的左(右)壁或者另外一个浮动兄弟元素的左(右)壁
// 影响父元素：子元素会浮出来，导致父元素高度塌陷。(父元素高度不再由浮动的子元素撑开)

伸缩布局 flex

1.flex布局特点

容器：display: flex;
容器会变成块级元素，宽度默认100%继承父元素；
父元素：高度不会塌陷，依然由内容撑开
影响子元素：将会影响子元素的排序方式，子元素会变成类似行内块。宽度默认由内容撑开，高度默认100%于父容器

2.容器属性

 // flex-direction：横向纵向排列
               row(默认从左往右排列)|row-reverse|column|column-reverse;
 // flex-wrap：换行
               nowrap(默认不会换行，即使放不下去，所有子元素依旧在一行)|wrap|wrap-reverse
 // justify-content：主轴对齐方式
               flex-start（默认值）：主轴左对齐
               flex-end：主轴右对齐
               center: 所有子盒子向父容器水平中心靠拢，居中对齐
               space-between： 两端元素靠着父容器左右壁
               space-around：  两端元素不靠着父容器左右壁，项目之间的间隔比项目与边框的间隔大一倍。
  // align-items: 纵轴对齐方式
                flex-start：纵轴上对齐
                flex-end:   纵轴下对齐
                center：所有子盒子向父容器垂直中心靠拢，居中对齐
                baseline：基线对齐
                stretch（默认）：子元素高度100%于父容器

3.项目属性

// order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
// flex-grow定义了父容器空间有剩余时各个元素的放大比例：
                     默认为0，理解为内容多宽就多宽，不会弹性扩大
                     如果所有项目的flex-grow属性都为1，则它们将等分剩余空间
// flex-shrink定义了父容器空间不够时各个元素如何收缩：
                     默认为1，即如果空间不足，项目将缩小。
                     如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
                     如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
// flex-basis定义了项目的宽度
               它的默认值为auto，即项目的本来大小,
               它可以设为跟width或height属性一样的值（比如350px，50%基于父容器等），则项目将占据固定空间。
// flex属性:
               flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
               flex:1 表示容器有剩余时，项目会按比例扩大；容器空间不足，项目会按比例缩小；
               flex: 0 0 50% 表示该容器宽度始终是父容器宽度的50%；
// align-self：
               允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
               默认值为auto，表示继承父元素的align-items属性。

4.flex布局常见实例

 <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body>div { height: 100px;}
        .box1 {
            display: flex;
            background-color: pink;
            justify-content: center;
            align-items: center;
        }
        .box2 {display: flex;}
        .box2 li {
            flex: 1;
            background-color: purple;
            text-align: center;
            line-height: 40px;
        }
        /* 其中一个子盒子宽度始终固定在父盒子的宽度的50%*/
        .box2 li.sec {flex: 0 0 50%;}
        .box3 { display: flex;}
        .img-box { width: 100px;}
        .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-left: 20px;
        }
        .img-box img {width: 100%;}
        .count {
            display: flex;
            justify-content: space-between;
        }
        .btn {
            align-self: flex-end;
            width: 50px;
        }
    </style>
</head>
<body>
    <!-- .box1 的子元素水平垂直居中 -->
    <div class="box1">
        <div class="child1">child---child</div>
    </div>

    <!-- 导航条等比分 -->
    <ul class="box2">
        <li>导航1</li>
        <li class="sec">导航2</li>
        <li>导航3</li>
    </ul>

    <!-- 左图右文字的样式 -->
    <div class="box3">
        <div class="img-box">
            <img src="./1.jpg" alt="">
        </div>
        <div class="info">
            <p>Iphone9</p>
            <p class="count">
                <span>产品总个数</span>
                <span>剩余个数</span>
            </p>
            <button class="btn">购买</button>
        </div>
    </div>
</body>

calc() 计算布局

// 底部固定, main区域自适应
 footer {
            height: 90px;
        }
 .main {
            height: calc(100vh - 90px);
            background-color: pink;
        }
// 等比分布局
 . {
    width: calc(100% / 6);
}

视区相关单位vw, vh

1.定义

//“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
// 1vw就表示当前视口宽度的百分之一；1vh就表示当前视口高度的百分之一；

2.示例

// 图片永远在一屏内显示
img { max-height: 90vh;max-width: 90vw; }
// 盒子完全覆盖窗口
.box{width:100vw;height:100vh;position:fixed;top:0;left:0}

元素水平居中

// 行内、行内块元素以及文字水平居中
  div {text-align: center;} //给想要文字、行内标签、行内块水平居中的父元素加{text-align: center}
// 块级元素定宽之后水平居中
div {
            width: 300px;
            background-color: pink;
            margin: 0 auto;
        }
// 定位 + margin 或者 定位 + transform
.rel {
            position: relative;
            height: 300px;
            background-color: yellow;
        }
.rel div {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: pink;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -100px;
        }
// flex 布局
.flex {
            display: flex;
            justify-content: center;
        }

动画

参考链接
https://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html