zoukankan      html  css  js  c++  java
  • 学习HTML&CSS的一些小总结

    关于display:inline-block使用

    我在使用display:inline-block布局时候,在网上看资料的时候,说使用之后元素之间会有4px之间的差距,那是“空白字符压缩(white space collapse)是西文排版的必然结果。 SGML、TeX都是如此。不过对于不使用空格作为词分界的语言,比如东亚语言来说,就造成了问题。 我们知道造成「inline-block」元素空隙的本质是 HTML 中存在的空白符(whitespace) 作者:一丝 链接:https://www.zhihu.com/question/21468450/answer/18342657 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处

    解决方法:一般都在父元素设置font-size:0即可。

    但当插入图片时候,会发现图片会与其他元素间有4px的间距,查了下资料,我找到了两个解决方法:

    1、img 默认是inline元素(内联元素、行内元素),计算高度时要加上 line-height 的默认值(4px)。 设置父元素的字体大小为0的方法解决。  From:https://www.anotherhome.net/1969

    2、在img标签内设置" align="absmiddle"属性,意思是"让图像的中间与同一行中最大元素的中间对齐"

    使用inline-block后,当两个不同高度的元素不在同一行的时候,会发现这两个元素不会以顶部进行对齐,这是因为inline-block元素的话,他们的对齐是基于基线的(baseline),这时候,只需要对元素进行“vertical-align: top” 声明即可,期间我发现了在两个font-siez不同的inline-block元素文本元素,使用这个属性无效,要用vertical-align: text-top才可以进行对齐。我想这是因为这个元素是文本属性导致的吧。

    在使用浮动中的一些小总结

    在进行布局时候,对前后的两个元素A,C分别进行左右浮动,而中间的元素B不浮动,结果发现,进行右浮动的元素C怎样也顶不上去,只能在一行,即使“看上去”盒子有空间

    然后调整了下文档流的位置,将C放到B前面,发现就可以正常放在同一行上了。
    原因是:浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素;内联元素则有空隙就插入。 所以加入C元素后再加入B元素时,B元素直接填充到A C元素的同一行;加入B元素后再加入C元素时,由于B元素一行没有空隙,C元素浮动到下一行。

    margin-top无效的问题

    (一)网上能找到的两种比较靠谱的解释: 1:“在CSS2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…” 2:当第一个层浮动,而第二个没浮动层的margin会被压缩,详见--浮动元素后非浮动元素的margin的处理。 得到解决问题思路:要浮动一起浮动,要就一起不浮动。 解决办法:1、.box2增加float属性2、box1与box2之间增加一层"clear:both;"
    (二)子元素设置margin-top作用于父容器margin-top失效; 解决办法: 1.给父容器box加overflow:hidden;属性 2.父容器box加border除none以外的属性 3.用父容器box的padding-top代替margin-top

    其实就是float的锅

    HTML语义化

    发现自己在写页面的时候对于这些标签还是不够熟悉,那些地方需要用到dt、 dl;哪些地方需要ul、a标签等都不清楚,基本上都是随便用,要注意HTML的语义化才行

    写gallery页面中的h5标签问题

    高度为0,不能显示内容,但在第一个DIV中却能显示,都是用同一个css样式,实在找不到原因。。。。。先记录下来,能以后解决吧。

  • 相关阅读:
    627. Swap Salary
    176. Second Highest Salary
    596. Classes More Than 5 Students
    183. Customers Who Never Order
    181. Employees Earning More Than Their Managers
    182. Duplicate Emails
    175. Combine Two Tables
    620. Not Boring Movies
    595. Big Countries
    HDU 6034 Balala Power! (贪心+坑题)
  • 原文地址:https://www.cnblogs.com/spezz07/p/5519204.html
Copyright © 2011-2022 走看看