CSS边框，背景，滚动，颜色值

1.什么是背景？概念  

      在容器中做底层铺垫，不会影响，正文的排布 

2CSS颜色有如下的几种写法

   rgb()

         rgba()      单词： black(黑色)       十六进制 #000000 == rgb()  表示方式

        hsla()

        h：色调，取值0-360，颜色的底色调，表示色轮周围的角度

        s：饱和度，取值0%-100%，0是没有颜色显示为灰色，100%是全彩色

        l：亮度，取值0%-100%，0是无光显示为全黑的，100%是充满光，表现为全白。

        a:alpha  透明度

        例如：hsla(100,23%,50%,0.3)，hsla可大写 

           base64 文本的格式 图片  就是代表图片的本身

        图片增大 4/3  减少HTTP 连接数  但是缺点就是：

          少量  小图标 便于用base64 转化   

         JS 解析慢，  base64 解码的开销   转换成图片   特别在移动端会慢 比较显著

         载入在CSS文件中 会增加CSS代码的压力  

         图片本身就增大1/3

          构建的方式 还使用原图  但打包的时候 转换成base64 去做 

3.使用边框的方法来直接绘画出一个三角形或者等腰梯形

            width:0px;

            height:100px;

            border-bottom:50px solid red;

            border-right:50px solid transparent;

            border-left:50px solid transparent;

4.边框上面加图片的属性设置

          border-image-source  用在边框的图片的路径。 

          border-image-slice   图片边框向内偏移。   

          border-image-width   图片边框的宽度。    

          border-image-outset  边框图像区域超出边框的量。   

         border-image-repeat  图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

5.滚动的属性：

 overflow:hidden（隐藏） ||  auto (文字没有超过就没有滚动条) || scroll（自带的滚动条 不管是需不需要 滚动条）  || visible(内容会撑出去);

6.装饰性文本：

   font-weight  字体的粗重  数字 只能是100-900 的百位整数

        font-style:itatic;  字体的样式

         text-decoration:;  装饰线

         cursor:point;    指针

7.CSS基础的面试题：

  第一题：CSS样式（选择器）优先级

        计算权重

        ！important

        内联样式

        后写的优先级高

 

        第二题：雪碧图：

        雪碧图的作用:减少HTTP请求数，提高加载性能;

        某些情况 减少图片的大小

 

        第三题：自定义字体的使用场景（找到网络字体 @font-face  font-family）

            用于宣传/品牌/banner 固定的文案

            字体图标   图标做成一个个字体  特别地方使用想要的字体 

            就使用图标

        第四题： base64 好处是什么？

         答：1.用于减少HTTP请求 增加了加载的性能

         2.适合小图片(适应场景)

         3.base64 的体积会约为原图的3/4

 

         第五题：伪元素和伪类区别？

            答：

            伪类表示状态  单冒号

            伪元素是真的有元素的   双冒号  老浏览器  还要在写一个单引号  兼容老浏览器

 

        第六题：如何美化 checkbox  radio

            答： 1.label和for 使用  id

                 2.隐藏原生的input

                 :checked+label