CSS文字，文本，背景，盒模型等记录

文字：

    font-family:" "; /*设置字体*/
    font-size:6px;/*设置文字字号*/
    color:red;/*设置文字颜色*/
    font-weight:bold;/*设置字体加粗*/400  700
    font-style:italic/*斜体*/
    text-shadow: h-shadow v-shadow blur color /*文字阴影*/
    文字属性连写，文字大小字体必写；其余不写取默认
    复合写法：font: style   weight    size/height   family

文本：

    text-decoration:underline;/*设置文字下划线*/； none/*没有装饰线*/
    text-indent:2em;/*缩进*/
    line-height:2em;20px/*行间距(行高)*/
        父元素有高度的单行文本的竖直居中的方法：设置父元素的height和line-height高度相同。
    letter-spacing:10px;/*文字间隔*/
    word-spacing:10px;/*字母间隔*/
    text-align:centen;/*块状元素中：文本，图片居中*/
    

背景：

    background-color  （transparent透明）元素设置背景色（背景色撑不开盒子）         
    background-image   图像放入背景   背景图片撑不开盒子的宽高  
    background-repeat  no-repeat 不平铺；repeat 平铺； 背景图像平铺
    repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺    
    background-size     改变图片大小
    background-position: 方位名词(left;right;center;top)  x   y   只写一个参数，第二参数默认垂直
    改变图像在背景中的位置；
    精确坐标  x  y  只写一个参数，参数为x坐标，第二参数默认垂直；可混合使用       
    background-attachment:  scroll(滚动) ；fixed(固定，背景定位背景图片偏移位置参考非盒子大小，以浏览器大小为基准)   
    背景图像是否固定或者随着页面的其余部分滚动。

    半透明背景  background: rgba(0,0,0, .3);最后参数是alpha(透明度)，取值0~1之间，可以 .3代替0.3
    精灵图：background:  url()   no-repeat   -x轴  -y轴
      复合写法：background:背景颜色  背景图片地址  背景平铺  背景图像滚动  背景图片位置/图片大小
      例：background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box;

盒模型

    margin/*外边距*/-清除边框外的区域，外边距是透明的(可让块级盒子水平居中)。
    嵌套块级元素垂直外边距塌陷：
        1.给父元素设置边框。
        2.给父元素设置内边距。
        3.overflow:hidden;
    
    border/*边框*/
    复合写法：border: width  style   color
              style: dashed（虚线）| dotted（点线）| solid（实线）
              颜色--边框颜色值 transparent。这个值用于创建有宽度的不可见边框
    border-collapse:collapse 合并相邻边框（仅用在表格上）
    一个块元素，不设置宽度，这个块元素设置左右padding值，不会撑开盒子。
    border-radius:length(数值 or %)/*圆角边框*/
        border-top-left-radius;border-top-right-radius
        border-bottom-right-radius;border-bottom-left-radius
    CSS三角：例：div {   width:0; height:0; 
                    boder-style:solid; border-width: 10px  ...; 
                    border-color: transparent(透明)  red  yellow  blue    }
                    
    padding/*内边距*/
    上 右 下 左；上下 左右； 上 左右 下

盒子阴影

    box-shadow: h-shadow  v-shadow   blur  spread  color   inset; 
    box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
    h-shadow 水平阴影位置；v-shadow 垂直阴影位置
    blur 模糊距离；spread 阴影尺寸；color 阴影颜色；
    inset 外部阴影改内部阴影

float 浮动

    任何元素都可以浮动，浮动后具有行内块元素相似的特性
    块级元素没有设置宽度，默认父级，添加浮动后，
    大小根据内容设置浮动，漂浮在普通块元素上面(脱标)，浮动盒子不保留原先位置
    只影响浮动盒子后面的标准流，不影响前面的
    - 标准流父元素排列上下位置，内部子元素采取浮动排列左右位置

CSS文字，文本，背景，盒模型等记录

原文：https://www.cnblogs.com/yangisme/p/11981661.html