写前端页面遇到的问题

忘是亡心i 2023-02-14 01:53 11阅读 0赞

1.  在div中放了一个图片和一段文字时 发现无论怎么调节img的属性，图片和文字都不能具有相同的高度。此时设置img的属性float浮动即可，可以通过修改margin来改变边距。
2.  修改div的padding属性是会改变div的原有大小。给他一个box-sizing:border-box;就不会改变大小了
3.  如果在父div中有两个子div那么子div的宽度之和不要刚好等于符div的宽度。
4.  如果想要实现垂直居中则设置line-height等于div的高度（但是如果是多行的话不行）
5.  给一段文字行高，就会让这段文字居中。
6.  margin-left:auto,margin-right:auto元素居中仅仅针对块元素有效.对于图片无效。但是可以通过display:block实现居中 。
7.  内联标签（a,span,em,strong）不可以设置margin,padding ,width,height；块标签（div,h1~h6,p,ul,li,dl,dt,dd）独占一行，可以设置看宽高，边距等。
8.  想让内联元素和内联块元素水平居中 （1）使用display:block;margin-left:auto;margin-right:auto;(2) 给他父亲 ,在父元素中使用text-algin:center ;
9.  **嵌套的越深，权重越重**
10. 将盒子的属性设置成box-sizing:border-box ；在去设置border,padding值是不会改变盒子的height,width.
11. 父元素继承子元素的高度，如果子元素设置了浮动，父元素就会坍塌，解决方法：给父元素设置overfloat:hidden;
12. 两个input并列会出先不对齐的现象，可以使用定位解决：positon:absolute;top:0;left:0;
13. z-index：3；设置定位元素的堆叠。谁的值高谁就在上面。
14. 子元素作为父元素的第一个元素，给子元素margin-top没用，问题：子元素没有移动而是父元素移动了。解决：1.让他做第二个元素：parent :：before\{ content:“”；display:table;\}即可，2. 给父元素：overflow:hidden;
15. 兄弟元素之间margin（第一个元素给margin-button,第二个元素给margin-top重合问题：值一样取中间值，值不一样取大的值。
16. bug:给内联块元素margin-top,内联元素也跟着移动（定位可以解决）
17. overflow:hidden:溢出隐藏。
18. 子元素float,父元素没有高度---->1.给父元素overflow:hidden第二种：给伪元素 .row:after\{content:"";clear:both;display:table;\}
19. 问题：给div设置了100%的宽度，但是页面出现了横向滚动条？原因：给了100%宽度，但是你在某个地方又给了margin-left或margin-right导致超出了原有的100%宽度，解决方法：给div一个box-sizing:border-box;即可！