CSS属性

一、文本与字体属性

1.字体段落相关属性

            color:字体颜色
            font-size:字体大小
            text-align:对齐方式（水平居中）
                center:居中
                left；左对齐
                right:右对齐
                justify:两端对齐
                inherit:继承父元素
            注意：text-align：justify仅用于除最后一行的文本对齐，要使最后一行两端对齐，需加一行代码text-align-last：justify
            line-height:行高
                垂直居中：行高=盒子高
            list-style：li样式
                none：取消默认样式
            text-indent：文本（首行）缩进
                缩进n个字符，值等于字体大小*n
            text-decoration：设置或删除文本装饰(不继承)
                none：标准文本，清除a标签默认下划线
                underline：下划线
                overline：上划线
                line-through：删除线
                blink：设置文本闪烁
                inherit：继承父元素
                    eg：a:hover{
                        text-decoration:underline
                    }
            text-tranform:文本转换
                作用：指定文本中的大小写字母
                capitalize：单词首字母大写
                uppercase：大写所有字母
                lowercase：小写所有字母
                inherit：继承父元素
                word-spacing：文本间隔，用于中文字，英文单词
                letter-spacing：文本间隔，用于中文字和英文字母
                white-spacing：空白间隔

2.background背景

            CSS1属性：
                background-color：背景颜色
                background-image：背景图片
                background-repaeat：设置图片是否平铺/重复，多用no-repeat
                background-attachment：背景图片是否固定或随页面其余部分滚动
                background-position：改变背景图位置
            CSS3新增属性：
                background-size：背景图大小
                background-origin：设置背景图定位区域
                background-clip：设置背景图绘画区域
                简写时，顺序为：color，image，repeat

3.行内元素，块级元素，行内块元素

                        是否能并排排列     是否能设置宽高       不设置width时   举例
            块级元素        ×                   √               自动撑满        div，p，h1~h6,ul/ol li等
            行内元素        √                   ×               自动收缩        span，a，b等
            行内块元素      √                   √               自动撑满        img，表单元素

4.元素的转换及隐藏

            display：block          将元素转换为块级元素
            display：inline         将元素转换为行内元素
            display：inline-block   将元素转换为行内块元素
            display：none           隐藏该元素，元素不占位，等同无此元素
            visibility：hidden  隐藏该元素，元素占位，此元素还存在

二、盒子模型

        margin：外间距
                margin-top/bottom/left/right：单独设置某一方向的外间距
                eg：margin：10px；  上下左右
                    margin：10px 20px； 上下 左右 
                    margin：10px 20px 30px； 上 左右 下
                    margin：10px 20px 30px 40px； 上 右 下 左
                注意：margin有塌陷问题
                        同级之间上下margin，取大值
                        嵌套盒子，子盒子加margin-top不生效，可由父盒子设置padding和border
         padding：内边距
                padding-top/bottom/left/right：单独设置某一方向的内边距
                eg：padding：10px；  上下左右
                    padding：10px 20px； 上下 左右 
                    padding：10px 20px 30px； 上 左右 下
                    padding：10px 20px 30px 40px； 上 右 下 左  
        border：边框
                写法：border：宽度 样式 颜色；
                        eg：border：1px solid red；
                设置边框线颜色：border-top/bottom/left/right
                样式：  solid    实线
                        dashed  虚线
                        dotted  点
                transparent：透明色
                border-radius：设置边框圆角（px设置圆角固定值，%设置相对百分比，取值50%时为圆形）