04overflow属性,字体设置,背景,display

day04

01overflow属性

overflow 属性

处理子级内容超出当前容器 的部分，主要是对父级元素添加该属性
值
    hidden 超出隐藏部分
    scroll 滚动查看超出的部分
    auto 自动渲染超出的部分

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

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

    nowrap 强制不换行
    normal 强制换行

text-overflow:

对超出的文本的内容进行剪裁
    ellipsis 超出的内容变为 省略号 
    clip 直接裁掉超出的文本内容

单行文本超出添加省略号 ⭐

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;  

.line{
            height: 30px;
            line-height: 30px;
            border: 1px #f00 solid;
            width: 300px;
            /* 实现超出范围的文字后面加上省略号省略超过的内容,三个不可缺，要有具体的宽和高 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

02字体设置

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;

.txt1{
            /* normal 正常 */
            font-style: normal;
            /* 不影响其他的设置 */
            color: #f00;
            font-weight: 400;
            font-size: 12px;
        }
        .txt2{
            font-style: italic;
            font-style: normal;
            font-weight: 100;
            font-size: 10px;
        }
        
        .txt3{
            color: #04be02;
            font-size: 40px;
            /* 加 , 的意思是 如果没有楷体 就用微软雅黑 */
            /* font-family: 'Times New Roman', Times, serif; */
            font-family: '楷体','微软雅黑','serif';
            
        }
        .txt4{
            color: #04be02;
            font-size: 40px;
            font-family: 'serif','楷体';
            
        }

        .txt5{
            color: #04be02;
            font-size: 40px;
            font: normal bold 30px '楷体','微软雅黑';
            /* 必须要俩，只写一个单独写就行 */
            font:40px ;
        }

03背景

background 设置标签元素的背景

background-color 设置背景色

    他的值可以是
        1.英文字母
        2.16进制表示颜色
        3.rgb()表示颜色

background-image 设置背景图

    background-image：url(背景图的地址)

    background-repeat 背景图的平铺方式
        值：
            repeat 默认，x轴y轴都平铺
            repeat-x 延x轴平铺
            repeat-y 延y轴平铺
            no-repeat 不平铺

background-position 设置背景图定位

background-position ： x轴方向的值 y轴方向的值；
值可以是
    1.具体的数值
    2.方位名词组合
        left top right boottom center

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

值:
    scroll 默认值，背景图片跟着页面一起滚动
    fixed 根据浏览器可视区域 ，固定在具体的位置，他的定位
    参考点是 浏览器可视区域
    background 是一个复合型属性，可以写在一起，他的顺序是
    background:color image repeat position attachment;

    可以单独写
        background：color;
        background: image;

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

04display属性

隐藏一个标签元素

    display：none;

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

值：
    block 把元素转化为块属性标签
    inline 把元素转化为行属性标签
    none 隐藏标签元素

.wp{
            width: 200px;
            height: 200px;
            background: #04be02;
            display: none;
        }
        .line{
            border: 1px #f00 solid;
            height: 200px;
            width: 200px;
            display: block;
        }
        h1{
            border: 1px #f00 solid;
            height: 200px;
            width: 200px;
            display: inline;
        }