Web前端系统学习——课程笔记（章节6-7）

Web前端系统学习——课程笔记

课程链接：WEB前端系统学习 - 网易云课堂

参考教程：菜鸟教程

笔记链接：Web-Learn-Note

---

• 章节6 浮动样式和特性
• 章节7 浏览器兼容性

---

章节6 浮动样式和特性

• 课时19 浮动样式和特性介绍 25:51

    display:inline-block;
    浮动    float
  
    浮动的特性
    	1.浮动的元素排在同一排
    	2.浮动的元素内容撑开宽度
    	3.浮动的元素支持所有的css样式
    	4.浮动的元素脱离文档流
    	5.浮动的元素提升层级半级
  

• 课时20 BFC常见方法及优缺点 24:55

   1.overflow 溢出 
    		会重新计算元素的空间
    	hidden 溢出隐藏
    	auto   溢出出现滚动条
    	scroll 出现滚动条的位置
    2.元素的居中
    	margin:0 auto;
    3.元素的伪类
    	伪类：就是CSS一些元素身上的特殊属性
    	:hover 鼠标停留
    	:after 在元素内容之后插入一些内容
  
    浮动：其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。
    
    BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
  
    	1.父级也浮动
    		弊端：左右的margin:0 auto; 会失效；
    	2.父级加display:inline-block
    		弊端：左右的margin:0 auto; 会失效；
    		(如果需要让元素居中可以给父级加text-align:center)
    	3.给父级加高
    		弊端：扩展性不好
    	4.br标签
    		写法：
  
    		作用：换行
    	5.clear
    		clear 元素的某一方向不允许出现其他的浮动元素
    		left 
    		right
    		both  推荐使用
    		one
    		温馨小提示
    			不符合W3C规范 违反结构 样式 行为 三者分离原则
    	6.伪类清浮动
    	:after{
    		content:"";display:block;clear:both;
    	}
    		温馨提示：目前主流方法。建议使用
  

• 课时21 BFC常见方法及优缺点 提升层级 21:16

• 课时22 定位特性相对定位 绝对定位 固定定位 24:08

    定位： 把一个元素 按照一定的方式 定到页面的某一个位置
    position
  
        相对定位 relative
            针对自己本身的位置进行定位
  
        绝对定位 absolute
            针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位
            温馨小提示：
                绝对定位即使没有初始值，也一定要设置值
                left:0px;
                top:0px;
  
        固定定位 fixed
            针对页面窗口进行定位
            温馨提示：
                IE6 不支持固定定位
  
    偏移量
        left
        top
        right
        bottom
        温馨提示
            left top 比 right bottom 的优先级要高
  

• 课时23 三种定位的特性 15:46

    相对定位 relative
        1.不影响元素本身的特性
        2.不使元素脱离文档流 
        3.提升层级
        4.无法触发BFC
        5.针对自己本身进行定位
  
    绝对定位 absolute
        1.会使元素完全脱离文档流
        2.内容撑开宽度和高度
        3.使元素支持所有的CSS样式
        4.提升层级
            z-index:数值; 定位层级设置
                数值越大，层级越高
        5.绝对定位要和相对定位配合使用
        6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移
        7.如果绝对定位的子级有浮动，可以省略清浮动的操作
  
    固定定位 fixed
        1.不兼容IE6
        2.针对窗口进行定位
        3.如果固定定位的子级有浮动，可以省略清浮动的操作
  

• 课时24 定位特性的应用及派生选择器的应用 24:09

    派生选择器是由 id选择器 class选择器 标签名选择器组合而成
    #box2 span {
        ……
    }
  

章节7 浏览器兼容性

• 课时25 兼容性1 17:11

• 课时26 兼容性2 16:36

• 课时27 兼容性3 18:31

• 课时28 兼容性4 20:50

• 课时29 兼容性5 31:30

    兼容性：页面在不同的浏览器中可能会显示不同。
    在IE6下，子级的宽度会撑开父级设置好的宽度
    温馨小提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同
  
    ie6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以
  
    在IE6.7下 元素要通过浮动排在同一排，就需要给这行元素都加浮动
  
    在IE6下元素的高度如果小于19px的时候，会被当成19px来处理
    解决方法：overflow:hidden;
  
    在IE6下不支持1px的dotted边框样式
    解决方法：切背景平铺
  
    在ie6下，块元素有浮动有横向的margin的值的时候，横向的margin的值会扩大两倍
  
    margin-left 一行中左侧的第一个元素有双边距
    margin-right 一行中右侧的第一个元素有双边距
  
    在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙
    解决方法：1.给li加浮动  2.给li加vertical-align:top
  
    在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙
    解决方法：
    	1.给li加浮动
    	2.给li加vertical-align:top
    在IE6下最小高度的bug 和 li的间隙问题共存的时候，给li加浮动 ，vertical-align不好使
  
    当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效
  
    在ie6下的文字溢出bug
    子元素的宽度和父级的宽度如果相差小于3px的时候，两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多
    解决办法：用div把注释或者内联元素包起来
  
    在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效
    解决方法：
    	不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来
  
    在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素
    解决方法：给父级也加相对定位
  
    在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差
  
    在IE6.7下 输入型的表单标签控件上下会有1px的间隙。
    处理方法：给input加浮动
  
    css hack:
    	\9 ie10之前的ie浏览器解析的代码
    	+或者* 表示ie7包括7之前的ie浏览器
    	_表示 ie6包括6之前的ie浏览器