html相关基础知识点（一）

继承

inherit:继承父类属性
initial:不继承父类属性

给行内元素加高度

1.display：block
2.设置定位
3.浮动

box盒子

box-sizing: content-box    内容盒子   配合属性直接设置 内容 所占宽度
			所占宽度为margin + border + padding +content 

box-sizing: border-box     边框盒子  配合属性设置直接设置 盒子 所占宽度
			所占宽度为 margin + border

阴影

box-shadow:(水平方向，垂直方向，模糊程度，阴影大小，颜色)

text-shadow:(水平方向，垂直方向，模糊程度，颜色)

变换

transform: rotate();
        none:不变换
        scale：缩放
        skew：倾斜变换
        rotate：旋转

        x ， y ，z

过渡

transition
        transition-property:  height/wight /all;   选择需要过渡的元素
        transition-duration: 10s;                  设置过渡完成需要的时间
        transition-delay: 8s;                      设置过渡延迟多久开始
        transition-timing-function: linear;         设置过渡的速度曲线

动画

animation
    animation-name  动画名称
    animation-duration 动画所需要时间
    animation-timing-function 动画的的速度曲线
    animation-delay 动画延迟多久开始
    animation-iteration-count 动画执行次数    infinite(循环)
    animation-direction 动画是否轮流反向执行  
            normal	默认值。动画按正常播放。
            reverse	动画反向播放。
            alternate	动画在奇数次正向播放，在偶数次反向播放。
            alternate-reverse	动画在奇数次反向播放，在偶数次正向播放。

@keyframes  动画名称{               或@keyframes  动画名称{
    from{                                     0%{}
        动作                                  25%{}
    }                                         100%{}
    to{                                     }
        动作
    }

}

清除浮动的方式
什么是浮动：
元素使用float:left/right;后，会脱离文档流，父级元素因此失去支撑（如果没有设置高度），下面的元素就会忽略父元素开始布局

常用方式：
    浮动元素的父级元素：overflow:hidden;
    浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
    浮动元素的同级：添加一个空标签，并且设置clear:both;

浮动与绝对定位脱离文档流的区别(主要体现在 元素内文本的位置)

float：其他盒子会无视当前元素，从浏览器左上角开始布局，而盒子内的文本依旧会为浮动的元素让出位置
绝对定位：其他盒子与盒子内的文本都会无视当前元素，从左上角开始布局

块级元素

    div、h1~h5、p、html、body、ul、li
    1) 独占一行
    2) 默认宽度为100%，默认高度由子元素或者内容决定 
    3) 可以为其指定宽高 style="width:;height:;" 

行内元素

    span、a、img、strong、i
    1) 与其他行内元素共享一行
    2) 默认宽高由内容决定
    3) 不能为其指定宽和高  
    4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

给行内元素加高度

    1.将行内元素设置为块级元素
         display：block
    2.将行内元素脱离文档流
        position ：absolute/fixed

        float:浮动

水平居中

行内元素  
    text-align：center
    line-height：height

块级元素 给父元素相对定位 子元素绝对定位

1. margin: auto;top:0px;right:0px;bottom:0px;left:0px; 
2. left:50%;top:50%; margin-left: - 子元素一半宽度; margin-top: -子元素一半高度 给父元素 
3. 伸缩盒 display:flex; justify-content:center; align-items:center;