（9月7日学习笔记） 宽高自适应、流式布局、bisiblity元素隐藏 伪对象选择器 代码实现三角形 常见的浏览器兼容问题 浏览器的内核

宽高自适应

根据需求提出来的，在实际开发中，大家发现元素最外层宽度或者中间内容区域的高度如果写成固定形式，不方便内容增加或者更改
提出了宽高自适应
解决方案：
宽度：自适应，块级元素，不设置宽度，或者宽度设置100% 或者width：auto；（区别：一个没有设置宽度，一个设置了宽度）
高度：块级元素不设置高度，或者height：auto，不能设置为100%，否则会充满屏幕
希望元素一开始就有高度，随着内容变化，增加，高度自适应
提出最小高度的概念：min-height，满足上述需求
兼容问题：
1：min-height：在IE低版本下是不支持的
正常的height在ID浏览器里面，就是最小高度 
2：正常的高度height和min-height不能一起设置，因为height会把它给覆盖
解决方案：
使用下划线过滤器 ，可以之间给有冲突的属性前面设置下杠__
原理，因为下划线在标准浏览器里面是不识别的，而在ie低版本里面可以识别（_height：10px;）

其他的高度自适应
max-height：最大高度：一开始高度是自适应的，超出设置的固定高度，内容溢出
多了一个判定条件
min-width：最小宽度：一开始是自适应 ，当宽度小于最小宽度是，宽度不再进行变化
注意：和最小高度不一样
max-width：最大宽度，一开始宽度固定，当宽度小于最大宽度，自适应
特殊点：给图片设置text-align属性，可以让图片水平居中 	
宽高自适应 百分比
百分比% 作用：可以自动伸缩
条件：必须0要有一个参照物、
1.参照于包含块的高度：top、bottom、height
2.参照于包含块的宽度：left、right、width、margin（四个方向）、padding（四个方向）
3.参照于自身的尺寸：transform:translate(50%,30%);水平方向参照于自身的宽度，垂直方向参照于自身的高度
4.参照于背景区（background-origin指定）的尺寸：background-size 水平方向参照于自身的宽度，垂直方向参照于自身的高度
5.参照于(背景区-图片的位图像素值)：background-position

流式布局

就是百分比布局
设置一屏页面的方法：
html，body{
height：100%
width：100%
}

visiblity 元素隐藏

占位隐藏：
元素消失了，但是位置还在
visiblity:hidden

伪对象选择器（伪元素选择器）

content属性必须设置，当content内容为空时，此时相当于一个内联元素，在一些标签后面加东西的时候，特别方便，不用另外加标签，直接在css里面写

用代码去实现三角形

首先，设置容器的高度，宽度为0
然后：设置4个边框的宽度，，设置不同的颜色就能看到效果
最后：留下你想要的小三角，然后设置transparent（透明），就行了

如何在ie的低版本下，给元素设置1px的高度

因为在在低版本的ie浏览器下，块级元素有一个默认高度，大概时18px
解决方案：设置overflow：hidden或者font-size：0；

常见浏览器的兼容问题

opacity：透明问题

filter:alpha(opacity=50)                  /*IE*/
-moz-opacity:0.50;                           /*Fire Fox*/
-khtml-opacity:0.5;                           /*webkit*/
opacity:0.5;

margin-top 问题

图片间隙问题 蓝色边框问题

表单元素距离顶部不一致

按钮样式问题

鼠标指针问题

行高框问题
（hcak filter 解决bug问题的方法）

浏览器的内核