css样式高级用法(补充上一篇css常见样式的博文)

透明度

 （1）opacity，它设置的是整个元素的透明度(包括内容，边框,内外边距)，取值为 0 ~ 1

 （2）在颜色位置设置alpha通道(raba) 例: (0,0,0,0.5)

盒子的隐藏

      (1) display: none  不生成盒子，其他的元素当它不存在          // 不保留其位置

      (2) visibility(默认值为visible):hidden  生成盒子，盒子类型与display一样，盒子仍然占空间      // 保留其位置

背景图

• img元素与背景图的区别

   （1）说明： img元素属于HTML的概念,背景图属于CSS的概念
  
   （2）当图片为网页内容时，必须使用img元素

       当图片仅用于网页的美化时，必须使用背景图

• 涉及的CSS属性

    （1）background-image  [url(路径)]       //  注：[]表示可选，实际运用不需要加

    （2）background-repeat     [repeat(默认),no-repeat,repeat-x,repeat-y]

    （3）background-size   [fill(默认值),contain,cover,类似于img元素的object-fit属，也可以是数值或百分比(相对于自身的盒子)]
      
         > 例：background-size：宽度 高度；

    （4）background-position [left,bottom,right,top,center(相对于自身位置)]

    （5） background-attachment [fixed(固定元素位置，相对于浏览器视口进行定位)]

    （6）背景图和背景颜色混用

         > background-color  [直接在背景图下设置背景颜色，背景颜色会填充背景图没有覆盖的地方]

样式补充

• list_style属性

（1）"list-style-type"   设置的是次盒子中内容的类型，子父元素中设置，子元素可以继承

（2）"list-style-position" 设置次盒子相对于主盒子的位置          // 该属性常用于 ul li 元素的初始化

（3）速写属性 "list-style"  

（4）清空次盒子，list-style:none;

• 图片失效时的宽高问题

 如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

 解决办法：可以将img设置为块盒或者行块盒

• 行盒中包含行块盒或者可替换元素

  行盒的高度与它内部的行块盒或可替换元素的高度无关

解决方法：   1.设置父元素的字体大小为0;[缺点：不能显示div中的文字]

           2.将图片设置为块盒(display:block)

                如果想给图片加上边框，可以将行盒元素设置为块盒子

• text-align属性

        （1）text-align属性取值 

                     - left 左对齐
                     - right 右对齐 
                     - center 居中 （空白均分）
                     -justify 除最后一行外，分散对齐（空白均分）


        （2）可以用作盒子并排排列,如例

    例： .container{
               width:500px;
               background: lightblue;
               text-align: justify;
           }
           .container::after{      在末尾添加一个元素
               content:"";
               display:inline-block;
               width:100%
           }
           .container .item{
               width: 150px;
               height:100px;
               outline: 2px solid;
               display:inline-block;
            }

           <div class="container">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>