前端 CSS day03-核心属性

核心属性：
        css文本属性  
            1、font-size
                9pt = 12px; 1em=16px 0.75em=12px=9pt
            2、font-family
                浏览器默认为宋体，但是在谷歌浏览器里面默认字体是微软雅黑
            3、font-weight
                bolder(更粗的)bold(加粗)normal(常规)lighter（细体）/100-900 9个等级 100 细体 400 正常（取消加粗和标题标签的效果） 700加粗 900更粗
            4、font-style
                italic/oblique/normal italic倾斜字体/oblique字体
            5、color 文本颜色
                1-颜色单词
                2-#6位16进制颜色值
                3-rgb(r,g,b)
                4-rgba(r,g,b,a)
            6、文本的水平对齐方式
                text-align  left center right   justify两端对齐
            7、单行文本垂直居中
                line-height  还能实现多行文本里的行高、行间距
                    normal/value
                    取值为高度的时候，会实现垂直居中
                    取值小于高度的时候，靠上边显示
                    取值大于高度的时候，靠下边显示

                    一般在单行文本里面，line-height可以替换height
                    多行文本里面，不推荐
            8、文本修饰线
                text-decoration
                    取值
                        /underline(下划线)==》<u></u>
                        /line-thouge(中划线)==》 <s></s><del></del>
                        /overline(上划线)
                        /none
            9、字符、词 间距
                字符间距：
                    字母与字母之间的间距、汉字与汉字之间的间距
                    letter-spacing:px
                词间距：
                    world-spacing：px
                    英文单词和英文单词的间距
            10、首行缩进
                    让开头文本向后或向前缩进多少个像素，或者实现开头空俩个格子的效果
                    text-indent: 只对第一行起作用，可以为正数，也可以为负数
                    如果想要实现开头空两个格子：使用单位em单位 ===》相对单位，父元素字体大小进行缩小或者放大的倍数
            11、检索大小写字母
                text-transform:
                    none 五转换
                    capitalize 首字母大写
                    uppercase 全大写
                    lowercase 全小写
            12、小型大写字符
                font-variant
                    normal常规字体/small-caps小型大写字母字体
            13、font
                font 加粗 倾斜 字体大小/行高 字体
                注意：多个属性值之间使用空格隔开
                      若你想要的字体大小和行号一起使用需要用"/"连接
                      如果使用符合属性的话，字体大小和字体必须设置，不设置的话，实现不了。
            
            vertical-align
                top/bottom/middle/baseline    
            
            layout-flow
                forizontal自左向右/vertical-ideographic自上而下
            font:bolder italic 12px/1.5em "宋体"

        css列表属性
            1、list-style-type:disc/circle/square/none
            2、list-style-image:url()
            3、list-style-position:outline外边/inside里面 定义列表符号位置
            
            4、复合属性 顺序和font里不一样，顺序可以调换
                list-style: type image position
            5、着重记忆：
                list-style：none; 去掉列表符号
        css背景属性
            1、背景色
                background-color:red
            2、背景图片
                background-image:url()
                只要你插入背景图片就平铺
                如果你的背景图片和盒子一样大，就正好显示，若背景图片比盒子小，就会显示平埔效果。如果背景图片比盒子大就会出现显示不全的效果。
            3、背景平铺属性
                background-repeat:repeat/no-repeat/repeat-x/repeat-y
            4、背景图片的位置
                background-position:left/center/right/数值 top/center/bottom/数值
                实现正中位置：
                    1、如果关键词一致，可以直接用一个代替俩个值
                    2、如果给一个值，这个值代表水平方向，默认垂直居中
                经常使用的一行代码:
                    background-position:right center;
            5、背景的固定和滚动
                background-attachement
                    fixed 固定
                    scroll 滚动默认值 随着滚动条会滚上去
                    fixed 背景图片固定在浏览器的左上角
                    图片仍然属于盒子,但是位置的调整不再相对于盒子来说了,相对于浏览器窗口的左上角进行位置调整
            6、复合属性
                background: color image repeat position attachment
            7、背景图片的尺寸大小
                background-size :x y
                x和y取值
                    数值 px/%
                    关键字
                        cover=======等比例放大这个图片，直到这个图片撑满整个盒子，经常出现裁剪效果
                        contain====等比例放大这个图片，直到这个图片撑满整个盒子的一个边空就结束，盒子有留白
        css边框属性
            元素边缘叫做框
            border: 5px solid #ff0000;
            border-width
            border-color
            border-style:solid实/dashed虚/dotted点/double/none
            border-bottom/left/right/top
            border-left-color
        css浮动属性
            含义：让元素漂浮，让元素飘起来
            作用：让布局元素横向显示改变排列方式
            属性：float
            值  ：none 不浮动
                  left 左浮动
                  right右浮动
            特点：
                (兄弟关系)如果给前面的盒子左浮动，后面的元素会上去补位置====》半脱离文档流
                如果兄弟元素都添加浮动，元素都会脱离文档流，并且会挨着横排显示
                如果都是左浮动，会从左侧依次开始向右排反之反之
                如果盒子都添加浮动，剩余空间不够，盒子会折行显示
                浮动后的元素补位置会以右侧预留空间补位为先
                (父子关系)
                浮动会给后面的元素带来影响==补位置
                    不让上去补位置
                        清除浮动：清除浮动带来的影响
                            clear：none(none)/left/right/both
                浮动产生的影响：
                    如果父元素没有固定的高度，子元素添加浮动，后面元素上去补位置，父元素默认会降低，这种效果被称之为高度塌陷
                    解决高度塌陷：
                        1、设置高度，给固定的高度 内容过多会溢出
                        2、清除浮动，不让补位元素补位置 如果父元素里面只有一个子元素，没有补位元素
                        3、给浮动元素后面悄悄地补一个元素，应用清除浮动，但是这个元素类型必须是块元素
                        4、给父元素添加overflow：hidden;
                            触发一个bfc形成一个独立区域，不受到外界干扰，也不会把内部的设置影响到外部，同时还能让浮动的元素参与高度的计算，用于解决高度塌陷问题
                        5、万能清除法：
                            
            float
            clear清除浮动none/left/right/both