Css中没有注意到的问题

45 阅读1分钟

17 <br /><br> 自闭合标签怎么写

<!-- html5 -->
<input type="text">

<!-- xhtml -->
<input type="text" />
  • HTML 中不存在自闭合标签,所以第二种不规范
  • 在 XHTML 中将元素写为 <br />
  • 因为浏览器兼容性所以两种写法都没有问题

26 行内元素空白问题

<p>
    <span>我是没有间隙的</span>
    
    <!-- 换行、空格字符会合并为一个空白 -->
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </p>
<p><span></span><span></span><span></span></p>

45、CSS历史

  • 1996年 css1
  • 1998年 css2
  • 从css3 开始,所有的css分成了不同的模块, 2011年 Css3 Color Module 发布

48 CSS 学习资料

49 浏览器默认字体大小

  • Chrome浏览器字体默认大小: 16px
  • chrome://settings/fonts

50 综合案例

  • 图片三像素问题(基线对齐相关)

58 text-align的本质

describes how the inline-level content of a block is aligned along

65 line-height

  • 顶线、中线、底线、基线
  • 基线:与小写字母x最底部对齐的线
  • 行高: 两行文字基线之间的距离
  • 行距:上一行底线到下一行顶线的距离

可以简单理解为一行文本所占据的高度

  • 文本占据的高度跟 font-size 有关系: 一行顶线到底线的距离
  • 行距: (line-height - font-size) / 2
  • 文本居中显示

77 伪元素-before-after

  • 不要将content省略

78 继承性

  • 继承过来的是计算值, 而不是设置值

81 display的值-block-inline

This property does not apply to non-replaced inline elements