h5基础概念(二)

打工人,打工魂,打工都是人上人!

1. 解决图片之间的缝隙问题

            

   我相信不少小伙伴在学习或者工作时会碰到这样的问题,有时候茶不思,饭不想也不知道哪里出了问题,总感觉代码没写错啊,难道是浏览器的问题?

哈哈哈哈哈,小编给大家解惑吧

    (一)给父元素设置font-size:0;   

       

    (二)标签之间注释

    

      (三)给元素开浮动

    

     效果图:

            

2.内容隐藏出现省略号

  一般在工作的时候,可能会出现标题内容在固定宽度的盒子内没办法完全显示所有的内容,但又不希望其影响其他盒子的布局以及美观,我们可以通过以下办法解决

  

3.定位

  定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置   

     使用position属性来设置定位,可选值
        static    默认值,元素是静止的 没有开启定位
        relative     开启元素相对定位
        absolute   开启元素的绝对定位
        fixed         开启元素的固定定位
        sticky       开启元素的粘滞定位(用的比较少)

  3.1 相对定位

   (1)元素开启相对定位后,如果不设盒子偏移量元素不会发生任何变化,

   (2)相对定位是参照原元素在文档流中的位置进行判断的

  3.2 固定定位

   (1)固定定位就是一种绝对定位,固定定位的大部分特点和相对定位一样,唯一不同的是固定定位永远参照浏览器的视口进行定位

   (2)固定定位的元素不会随网页的滚动条滚动

  3.3 绝对定位

   (1)开启绝对定位后,元素会从文档流中脱离

   (2)绝对定位会改变元素的性质,行内变成块,块的宽度被内容撑开

   (3)绝对定位需要有参照物,参照物必须是祖先元素

 

4.小三角特效

  

  

 

 

posted @ 2020-11-29 15:27  努力的黑皮!  阅读(109)  评论(0)    收藏  举报