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

小鱼儿 2024-04-17 19:58 64阅读 0赞

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

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

参考教程：[菜鸟教程][Link 1]

笔记链接：[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标签
          		写法：<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浏览器

[WEB_ -]: https://study.163.com/course/courseMain.htm?courseId=1003112011
[Link 1]: https://www.runoob.com/html/html-tutorial.html
[Web-Learn-Note]: https://github.com/zz2summer/Web-Learn-Note