estilos avanzada Uso de CSS (un blog css estilo común inicial suplemento)

transparencia

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

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

Ocultar el cuadro

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

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

fondo

• diferencia Img entre los elementos de fondo de la figura.

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

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

• propiedades CSS involucrados

    （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  [直接在背景图下设置背景颜色，背景颜色会填充背景图没有覆盖的地方]

suplemento de estilo

• propiedad list_style

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

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

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

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

• La anchura y la altura de un problema cuando las imágenes no

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

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

• bloque de línea de fila contenida en el elemento de caja de casete o, alternativamente,

  Altura de la fila con el cartucho dentro del cartucho o alternativamente línea elemento de bloque independiente

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

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

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

• propiedad 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>