发表于: 2019-06-09 21:26:54

1 885


     今天完成的事

     知道了  block      inline        inline-block的区别和margin 的重叠

  

    1. inline:
      1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 
      2. 不能更改元素的height,width的值,大小由内容撑开. 
      3. 可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行.
    2. block:
      1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 
      2. 能够改变元素的height,width的值. 
      3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
    3.  inline-block:
      1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
      2. margin重叠

               两个block元素重叠时,后面元素可以覆盖前面元素的背景,但无法覆盖其内容

         当两个inline元素,或两个line-block元素,或inline与inline-block元素重叠时,后面元素可以覆盖前面元素的背景和内容

          当inline元素(或inline-block元素)与block元素重叠时,inline元素(或inline-block元素)覆盖block元素的背景,而内容的话, 后面的元素覆盖前面的元素 

    

          负值:原理

               

  •             设置左右margin负值会增加元素的宽度 (该元素没有设定width属性或width:auto)
  •               margin-top设置负值不会增加元素高度,只会产生向上的位移
  •               -margin-bottom设置负值不会产生位移,只会减小元素供CSS读取的高度

          明天计划的是开始写任务4

       切图,学习表单元素样式

          遇到的问题

         收获:今天知道了标签选择器    直接写元素标签就行



















返回列表 返回列表
评论

    分享到