06-css基础第4天补充、浮动1教学知识点

1、加号获取独家干货css 基础入门第 6 天课堂笔记（本课程共 6 天）第六天内容一. 复习：伪类行高：定义：应用：将行高设置等于容器的高度可以让文本垂直居中原理：为什么行高等于容器的高度可以让文本垂直居中。文本中的各条线。.1 补充：1.0 行高是可以继承的。2.0 行高的：取值：a.具体的像素值。b.使用 emem 指的是当前设置的字体大小。比如当前字体大小为 16px，那么 2em=32px，如果当前标签字体大小为 20px，那么 3em=60px;c.使用%百分号：与 em 一样，都是以当前的字体大小为基数，如果大小18px，那么 line-height:200%;line-height

2、: 36px;d.可以什么都不带：与 em 一样，也是当前的字体大小为基数。注意：1.0 在设置行高的时候，如果是 em 或者%，那么将来行高会先计算出来结果以后再继承给子元素。2.0 在设置行高的时候，如果是没有，那么将来行高会先继承给子元素，然后再计算出行高。.2 浏览器的补充：浏览器的默认字体大小是多小？谷歌默认大小是 16px.3 行高与 font 的关系font: font-style font-weight font-size/line-height font-family. margin 两种特殊的现象：.1 外边距的合并现象：如果两个 div 上下排序，给上面一个 div 设置

3、 margin-bottom，给下面一个 div 设置 margop，那么两个 margin 会发生合并现象，合并以后的值较大的那个。.2 margin 塌陷现象：如果一个大盒子中包含一个小盒子给小盒子设置 margop 大盒子会一起向下平移。解决方案：1.0 给大盒子加一个边框2.0 给大盒子设置一个 overflow 属性。3.0 浮动也可以二. 浮动。浮动的初体验问题：在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示？作用：解决一行中显示多个盒子（并且这些盒子的位置可控。）浮动的代码：floeft;float:right;浮动的特点标准流：就是浏览默认摆放盒子的标

4、准。.1 浮动的元素会脱离标准流：如果一个元素按照正常的标准流来显示，会在 html 中所属的位置占位，后面的元素会紧跟着它。但是浮动脱了标准流，将来在看到浮动的元后，不能以正常的标准流来进行判断。（在标准流中不占位置了，它是在标准流之上）.2 浮动以后的元素会覆盖在标准流的元上。.3 浮动规则：浮动找浮动，不浮动找不浮动浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。.4浮动显示的位置与原本不浮动之前的位置是对应的：.5浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素：.6浮动的元素会改变显示方式：不管元素是行内元素还是块级元素将来在显示 的时候都会在同一行中显示。浮动以后的元素可以设置宽高。总结：浮动以后的元素的显示方式与行内块级元素一样。浮动的案例：1.0 使用浮动完成页面的布局2.0 制作导航注意：以后使用 a直接来制作导航是有问题的1.0 导航与导航之间应该是列表的关系，所以如果想要将这个些关系通过 html 语义化表示出来必须要用到 ul。2.0 如果这些 a你不用其它的起来，那么将来浏览器会将这些 a中的文字当作全部一起显示。SEO 在