2w前端培训日记day04

1.

overflow 属性

        处理子级元素超出当前容器的部分，主要是对父级元素添加该元素属性

        值

           hidden 超出部分隐藏

           scroll  滚动查看超出的部分

           auto  自动渲染超出的部分

        overflow-x 控制x轴方向的超出部分

        overflow-y 控制y轴方向的超出部分

        whited-space 属性，设置文本的格式

          nowrap   强制不换行

          normal   强制换行

        text-overfiow: 对超出部分进行剪裁

          ellipsis  超出部分变省略号

          clip  直接裁掉超出部分

        单行文本超出添加省略号

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

overflow: auto;
line-height: 30px;
overflow-y: scroll;
white-space: nowrap;
text-overflow: ellipsis;

2.

font-style  设置字体的样式

        值：

            italic  设置字体为斜体

            normal  设置字体为正常

        font-weight  设置字体是否加粗

        值：

            normal  默认

            bold  加粗

            bolder  相对bold加粗

            他的值也可以是具体的数值，范围是100-900

            400  normal

            700  bold

            900  bolder

        font-size 设置所修饰的字体大小

            1. 目前浏览器默认字体大小是16px

            2. pc端浏览器的最小字体大小可以设置为12px

        font-family 设置文字的字体

            可以同时设置多个字体，形如：

            font-family:'A','B','C';

            含义是 在客户端的设备上匹配A字体，如果没有A字体，则继续匹配B字体，依次进行匹配

            ，直到匹配成功为止

            通用字体

                1. serif 有衬线（类似锐化）

                2. sans-serif 无衬线

        font 也是一个复合型css属性

        可以直接按照下面顺序书写

        font：style weight size family ；

        注意  style和weight 不是必须写入的内容，如果简写至少需要有font-size和

        font-family

        font：size family；

 font-style: normal;
            color: #f00;
            font-weight: 400;
            font-size: 12px;
 font-family: '楷体';
 font: normal bold 30px '楷体', '微软雅黑';

3.

background  设置标签元素的背景

        background-color  设置背景色

            它的值可以是

                1  英文字母

                2  16进制表示颜色

                3  rgb（）表示颜色

        background-image  设置背景图片

            background-image: url（背景地址）

        background-repeat  背景图的平铺方式

            值：

                reapet  默认 xy轴都平铺

                reapet-x  沿x轴平铺

                reapet-y  沿y轴平铺

                no-reapet  不平铺

        background-position  设置背景图定位

        background-position  x轴方向的值 y轴方向的值：

            值可以是

                1. 具体的数值

                2. 方位名词组合

                   left  top  right  bottom  center

        background-attachment  设置背景图固定定位

            值：

                scroll  默认值，背景图片跟着页面一起滚动

                fixed  根据浏览器可视区域，固定在具体位置

                ，他的定位参考点是浏览器可视区域

        background 是一个复合属性 可以写在一起，他的顺序是

        background：color  image  repeat  position  attachment；

       

        可以单独写

            background：color；

            background：image；

 width: 4000px;
            height: 4000px;
            border: 1px #f00 solid;
            /* background: #ccc; */
            /* 设置背景色 */
            background-color: #04be02;
            /* 设置背景图 */
            background-image: url(./images/man.png);
            /* 设置背景图的平铺方式 */
            background-repeat: no-repeat;
            /* 设置背景图定位方式 */
            background-position: center center;
            /* 背景图的固定定位  */
            background-attachment: fixed;

4.

隐藏一个标签元素

        display:none  

        display 属性可以用来控制标签元素的显示属性

            值：

                block  把元素转化为块属性标签

                inline  把元素转化为行属性标签

                none  隐藏标签元素

 border: 1px #f00 solid;
            width: 200px;
            height: 200px;
            display: inline;