零基础编程

baseline  基线  默认
1.内容  content
    1.块元素  宽高决定大小
    2.行内元素  不识宽高，内容决定大小
    3.行内块  识别宽高
2.内填充    padding
    padding：top上     right右       下         左；
    默认撑大盒子大小，添加   box-sizing：padding-box；   自动计算不会撑大盒子
3.边框  border
    border—width：宽度
    borer—sytle：样式   dashed虚线   dotted点状   double双线   solid实线
    border-color;颜色
    border:宽度 样式  颜色
    border-radius：50%  圆角边框
    默认撑大盒子大小，添加   box-sizing：border-box；   自动计算不会撑大盒子
4.外边距
    特点一：块元素  上下外边距  求最大值
    特点二;行内元素  不识别上下 左右外边距求和
    特点三： 行内块元素  上下左右求和
    特点四:  嵌套元素  子元素的  margin-top会向上传递，父节点添加overeflow  解决
    margin：0px  auto；  左右自动边距  块元素自动居中
5.背景
    1.背景颜色  background-color ：red
        背景颜色透明
            background-color: rgba(0,0,0,0.3);   0.3为要设置的透明度    
            opacity:0.2;     文字跟随背景一起透明
            透明渐变   background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 100%);
top:渐变开始方向    百分比是颜色对比度
    2.背景图片    background-image：url（路径）
    3.背景图片的重复   ： background-repeat
        repeat  重复
        no-repeat  不重复
        repeat-x   水平重复
        repeat-y   垂直重复
        round   缩放的重复铺满
        space   不缩放的重复铺满
    4.背景图片的位置  background-position：
        top/left/right/bottom
        距离起始位置的x，y的像素值
    5.背景图片的大小  background-sise;
        w , h   像素值定义宽高
        cover  完全铺满  会裁切  不留空白
        contain   铺满   不裁切   会留空白
    6.背景图的起始位置  background-origin
        border-box  边框作为起始位置
        padding-box   内填充作为起始位置
        content-box   内容作为起始位置
    7.背景图片的裁切 background-clip
        border-box   不裁切
        padding-box   裁切边框
        content-box   裁切边框和内填充
    8.背景图片的固定选项 background-attachment: fixed;
        scroll   滚动
        fixed   固定
    9.背景图的简写    background： 颜色  图片路径   重复  位置/大小   固定选项
    10.多图背景 
        background：url（图片一） 重复 位置/大小，url（图片一） 重复 位置/大小