《HTML5与CSS3基础教程（第8版）》 第11章读书笔记

  • 2020/03/13
  • 元素要按照一定的顺序放置， 确保在不使用CSS的情况下也是合理的。
  • 旧版浏览器（IE9-）之前使用H5： （p206 - 207）
    大多数浏览器默认将他们无法识别的元素作为行内元素处理。
    使用CDN或本地静态资源的方法，在IE9-添加HTML5 shiv。
<head>
    <!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    <!--或者下载到本地使用-->
</head>
  • 对默认样式进行重置或标准化： （p208 - 209）
    不同的浏览器提供的默认样式表示相似的，但是也存在一定的差异。为此，开发人员在应用自己的CSS之前，最好抹平这些差异。
  • 盒模型： （p209 - 211）
  • background的范围： 默认情况下包括content， padding和border。可以通过background-clip 来改变。
  • 盒子的width/height： 默认情况下的宽高值的是content的宽高，但是如果设置了box-sizing: border-box的话，那么宽高是一直包含到border，即计算除了margin的部分的宽高。
  • 设置为inline的元素会忽略任何width, height, margin-top, margin-bottom的设置（margin-left, margin-right和padding依然生效， 但是padding的top和bottom会越界进入相邻的元素区域，而不是局限于该元素本身的区域。）。
  • 文档流： 默认情况下，元素会按照他们在HTML中自上而下出现的次序显示，并在每个非行内元素的开头和结尾添加换行。
  • display: none和visibility: hidden： （p211 - 214）
  • display: none: 脱离文件流，后续元素产生挪移。
  • visibility: hidden： 隐藏元素，依然在文件流中占据位置，留下空白区域。
  • 块元素宽高属性的auto值： 如果不设置块元素的宽高，则大部分块元素宽高的默认值是auto。
  • height为auto时由子元素确定高度（忽略浮动情况）。
  • width为auto时，宽度则是由包含块的宽度减去元素的内边距、边框和外边距计算出来的（即元素的内容+padding+border+margin 所占宽度 = 包含块的content宽度）。包含块是指元素的第一个块状祖先元素。
  • border-style的取值： none, dotted(点线), dashed(虚线), solid(实线), double(双线), groove(槽线), ridge(脊线), inset(凹边), outset(凸线)
  • 默认情况下，IE会对作为链接的图像添加一个蓝色的边框。
  • border简写： 使用border的简写，至少需要type，缺失值会以默认值代替， type的默认值是none，会覆盖之前单独定义的border-type。颜色的默认值是元素的color值。
  • margin的叠加： （p223）
  • 上下取大： 如果2个元素在页面的位置上是上下关系，并紧挨着，且上面的元素设置了margin-bottom，下面的元素设置了margin-top，则2元素的间距大小取2个值里面较大的值。
  • 左右相加： 左右相邻的元素，2元素的间距取左边的margin-right+右边的margin-left的和。
  • 当em值用于内边距和外边距时，则em的值是相对于当前元素的字体大小，不再是相对于父元素。 （p224）
  • 使用百分数规定内边距和外边距时。不管是设置上下边距还是左右边距，百分数的值都是基于其包含块 元素的宽度的。 （p224）
  • 浮动元素对文档流的影响： 浮动元素会让接下来的内容环绕在它周围，并不会影响父元素或其他祖先元素的高度。他不属于文档流的一部分。 （p226）
  • 使用clear属性清除浮动： 某个元素使用clear属性，该元素和他后面的元素就会显示在浮动元素的下面。（p227）
  • CSS清除页面浮动的方法： （p228）

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

  • 在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>（W3C推荐，比较少用）；
  • 通过设置父元素overflow值为hidden；
  • 给父元素添加clearfix类；
  • 父元素也设置浮动（会导致整体浮动，不推荐使用）。

详细解析：CSS清除浮动

clearfix的原理是使用:after和:before伪元素添加内容，并设置:after清除浮动属性（clear:both）。本质上类似于第一种，只不过添加的不是div，而是伪元素。

  • 浮动元素的display属性会变成block，哪怕是将其规定成inline。
  • 相对定位和绝对定位： （p230 - 232）
  • 相对定位（relative）： 每个元素在文档流中都有一个自然位置，而relative就是相对于元素的原始位置相对移动。周围的元素完全不受此影响。
  • 绝对定位（absolute）： 绝对定位是指定元素相对于body或最近的已经定位的祖先元素的精确位置。可以让元素脱离正常的文档流。不会留下空白，后续元素补位。定位元素可能会和其他元素产生重叠
  • static： position的默认值，可以覆盖其他值。
  • fixed： 相对于浏览器窗口定位，可以在滚动时固定位置。
  • z-index属性仅对定位过的元素有效。
  • vertical-align（垂直对齐）属性：
    默认情况下，行内元素内容在竖直方向与文本的基线对齐。vertical-align属性仅适用于行内元素。
  • baseline： 使元素的基准线对齐父元素的基准线。
  • middle： 使元素位于父元素中央。
  • sub： 使元素成为父元素的下标。
  • super： 使元素成为父元素的上标。
  • text-top： 使元素的顶部对齐父元素顶部。
  • text-bottom： 使元素的底部对齐父元素的底部。
  • top： 使元素的顶部对齐当前行里最高元素的顶部。
  • bottom： 使元素的底部对齐当前行里最低元素的底部。
  • 百分比： 基于当前行号计算值（可为负值），然后基于基准线移动。
  • 具体值： 单位可以是px或em（可为负值），然后基于基准线移动。