《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之前，最好抹平这些差异。
- 使用reset重置样式：reset样式连接
- 使用normalize.css重置（推荐）：http://necolas.github.com/normalize.css
-
盒模型： （p209 - 211）
- background的范围： 默认情况下包括content， padding和border。可以通过
background-clip来改变。 - 盒子的width/height： 默认情况下的宽高值的是content的宽高，但是如果设置了
box-sizing: border-box的话，那么宽高是一直包含到border，即计算除了margin的部分的宽高。
- background的范围： 默认情况下包括content， padding和border。可以通过
-
设置为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： 相对于浏览器窗口定位，可以在滚动时固定位置。
- 相对定位（relative）： 每个元素在文档流中都有一个自然位置，而
-
z-index属性仅对定位过的元素有效。
-
vertical-align（垂直对齐）属性：
默认情况下，行内元素内容在竖直方向与文本的基线对齐。vertical-align属性仅适用于行内元素。
- baseline： 使元素的基准线对齐父元素的基准线。
- middle： 使元素位于父元素中央。
- sub： 使元素成为父元素的下标。
- super： 使元素成为父元素的上标。
- text-top： 使元素的顶部对齐父元素顶部。
- text-bottom： 使元素的底部对齐父元素的底部。
- top： 使元素的顶部对齐当前行里最高元素的顶部。
- bottom： 使元素的底部对齐当前行里最低元素的底部。
- 百分比： 基于当前行号计算值（可为负值），然后基于基准线移动。
- 具体值： 单位可以是px或em（可为负值），然后基于基准线移动。
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
