CSS基础-第二天

常用单位

        1.px 像素

        2.em 倍速 相对于字体大小的倍速

        3.% 百分比

常用属性

        1.width 宽度

        2.height 高度        一般不设置高度，用内容把高度撑开

CSS常用属性

        一、文本属性

                1.color 展示方式：

                        *单词

                        *十六进制

                        *rgb：   数字0-255或者百分比表示

                2.text-trarsform 英文字母大小写的转换

                        uppercase全部大写

                        lowercase全部小写

                        capitalize首字母大写

                3.text-align 文本对齐（针对行内元素）

                4.text-indent首行缩进        例：txet-indent:2em

                5.line-height 行高

                        概念：行与行之间的距离

                        当height与line-height一致时，会垂直居中对齐，只针对单行文本

                6.text-decoration 文本装饰

                        none 默认无

                        underline 下划线

                        overline 上划线

                        line-through 删除线

                7.vertical-align 垂直对齐

                        注意事项：使用时要将该属性去掉块属性，一般结合display:table-cell

                        设置图片和文字对齐

                                文字和图片同一级情况下，让它们垂直居中则设置图片的垂直对齐就行

                8.word-spacing

                9.letter-spacing

                10.word-break             

                        break-all: 允许单词断开换行，且对齐

                        break-word

        二、字体属性

                1.font-style

                        normal (默认正常)

                        italic 斜体        对于没有斜体样式的字体，则要使用oblique来设置斜体外观

                        oblique 倾斜

                2.font-weight

                        normal正常

                        bold        bolder        lighter

                        字体表示：100-900范围，400为正常，700为粗体

                3.font-size

                        绝对大小 px

                        相对大小 em

                        长度

                        百分比

                4.font-family

                5.font 复合属性，要注意顺序：样式 粗细 大小 类型

        三、背景属性

                1.background 复合属性

                2.background-repeat 重复                  

                        repeat

                        no-repeat

                        repeat-X

                        repeat-Y

                3.background-attachment  背景固定        取值：fixed固定        scroll滚动

                4.background-position 定位        往左移或者右移需要设置为负值

        四、列表属性

                1.list-style

                2.list-style-type

                3.list-style-img 设置列表标记图片

                4.list-style-position 列表项的位置         值：outside 外面        inside 里面

        五、边框属性

                1.border-width

                2.border-color          特殊：transparent 设置透明

                3.border-style:样式，单实线、虚线等

                注意：常见的水平线不使用hr来实现，一般用border来实现

        六、盒子属性

                1.border

                2.margin

                        垂直方向的margin具有合并问题，水平方向不存在

                3.padding

        七、float浮动属性

                1.取值：none|left|right

                2.文字围绕图片：图片设置浮动后，只对后面文字有效果