前端学习DAY04

 overflow 属性

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

        值：

            hidden超出部分隐藏

            scroll滚动查看超出部分

            auto自动渲染超出部分

.wp{
            width: 200px;
            height: 200px;
            border: 10px rgb(20, 37, 218) solid;
            overflow: auto;

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

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

.txt{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            line-height: 30px;
            overflow-x: scroll;
        }

 

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

 nowrap 强制不换行

 normol 强制换行

.line{
            height: 30px;
            line-height: 30px;
            border: 1px #f00 solid;
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

text-overflow 对超出的文本内容剪裁

ellipsis 超出部分变为省略号

clip 直接裁掉超出文本内容

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

字体设置：

 font-style 设置字体样式

        值：

            italic 设置字体为斜体

            normal 字体正常       

font-style: normal;
font-style: italic;

    font-weight 设置字体是否加粗

        值：    

            normal 默认

            bold   加粗

            bolder  相对bold的加粗

        它的值也可以是具体的整百数字，范围是100-900

            400->normal

            700->bold

            900->bolder

font-weight: normal;
font-weight: 400;

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

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

            2.浏览器所能接受的最小字体大小可以设置为12px

        

font-size: 40px;

   font-family 设置文字字体

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

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

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

            依次jinxingpipei，直到成功即可显示匹配到的字体

            通用字体

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

                2. sans-serif  无衬线

        

font-family:'selif','楷体' ;
font-family:'楷体','微软雅黑' ;

   fant 也是一个复合型css属性

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

            font:style weight size family;

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

            font:size,family;

font:bold normal 30px '楷体','微软雅黑' ;

背景

  background设置标签元素的背景

            background-color设置背景色

                它的值可以是

                    1.英文单词

                    2.16进制

                    3.rgb（）表示颜色

 background-color: #04be02;

  background-image 设置背景图

                background-image：url（）（背景图地址）

background-image:url(./imges/logo.jpg) ;

    background-repeat 背景图的平埔方式

                值：

                    repeat     默认，x，y都平铺

                    repeat-x   沿x轴平铺

                    repeat-y   沿y轴平铺

                    no-repeat 不平铺

 background-repeat: no-repeat;
 background-repeat: repeat-x;

  bzckground-position 设置背景图的定位

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

                值可以是

                    1.具体的数值

                    2.方位名词组合

                      left top right bottom center

background-position: -10px center;
background-position: left center;

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

              值：

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

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

background-attachment: fixed;

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

            background：color image repeat position attachment；

            可以单独写

                background：color；

                background：image；

background:#f00 url(./xxx.jpg) left center;
background:#f00;
background:url(./xxx.jpg);

display属性

  隐藏一个标签元素

        display:none;

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

            值：

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

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

                none隐藏标签元素

display: none;
display: block;
display: inline;