CSS学习笔记

width=100%width=auto(默认值)的区别

  • width=100%表示content占100%,如果有padding和margin,那么总width将超过父容器,而width=auto表示总width不会超过100%,参考这里

table宽度的计算

  • 在默认情况下, table-layout=auto,表示column的宽度将由浏览器根据column的实际内容计算,此时如果设置table的width:100%,那么各个column的宽度将根据原实际内容按比例增加。
  • 如果设置table-layout:fixed,那么在默认情况下,各个column的宽度将相等;而如果设置了table中第一个td的宽度(比如px或者%),那么这将是该td所占column的宽度,其他column再按等宽处理。

flexbox

  • 一个flexbox自动变为block元素,一个display: inline-flex自动变为inline元素。

offsetHeight vs clientHeight vs scrollHeight

  • offsetHeight包含可见content,padding,scrollBar和border,不包含margin
  • clientHeight包含可见content和padding,不包含scrollBar,border和margin
  • scrollHeight包含所有的content和padding,不包含srollBar,border和margin

pageX/clientX/offsetX/screenX

  • pageX表示鼠标相对整个页面x轴的px值,滚动量包含在内
  • clientX表示鼠标到可视区域的x轴的px值,滚动对此无影响
  • offsetX表示鼠标相对于所点击元素的原点的x轴的px值,滚动量包含在内
  • screenX表示相对于整个屏幕的x轴的px值
  • 对于有父子关系的元素来说,offsetX总是返回的是触发事件的px值,即如果点击了子元素则返回的是鼠标离子元素原点的值,如果此时需要返回鼠标在父元素中的offsetX,则应该使用父元素的clientX - e.getCurrentTarget(). getBoundingClientRect().left

getBoundingClientRect包含哪些

  • box-sizing:content-box,getBoundingClientRect只包含content,而不包含padding,border和margin;
  • box-sizing:border-box,getBoundingClientRect包含content,padding和border,但不包含margin。

推荐阅读更多精彩内容

  • 盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 不同部...
    吾皇PIPA丘阅读 23评论 0 0
  • 一、CSS简介 1.什么是CSS CSS:Cascading Style Sheet是一组样式设置规则,用于控制页...
    鲁毅_阅读 52评论 0 0
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 806评论 0 6
  • table元素border-collapse:collapse 去掉默认边框align属性,这个属性是div的属性...
    亲爱的孟良阅读 23评论 0 0
  • 本章主要参考来源: W3C - CSS Tutorial outlinelike border;Eg:p {bor...
    琉木_阅读 37评论 0 0