HTML+CSS学习Day11笔记

Day11笔记

一、宽高自适应

1、宽高自适应在实际开发中应用非常普遍，也非常重要可以帮助咱们解决页面布局排版问题，也可以适应不同的屏幕大小
2、自适应解决方案：
=> 块级元素一般作为其他元素的容器使用，自适应需要的是容器自适应
=> 宽度自适应width:auto; 根据当父容器设置了宽度，子元素没有设置宽度，子元素的宽度会根据容器来
-> width:auto;
-> width:100%;（块元素宽度默认为100%）
-> 不设置宽度
=>问题：当咱们给容器不设置宽度和设置了宽度100%效果是一样的，区别是什么？一个有宽度，一个没有宽度
=> 高度自适应
-> height:auto;
-> 不设置高度

委照父元素宽度的元素: padding margin width text-indent

参照父元素高度的元素: height

参照父元素属性:font-size line-height

特殊:相对定位的时候, top(bottom) left(right)参 照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元

素包含padding的高度与宽度

二、宽高自适应属性

关于宽高自适应的属性：
=> min-height 可以让元素有一个固定的高度，随着内容的增多的高度自适应
=> 关于最小高度兼容问题:
-> min-height在高版本的浏览器里面没有任何问题可以使用
-> min-height在IE低版本的浏览器里面不起左右，IE低版本的浏览器会把正常使用的高度height属性当成最小高度
-> 在高版本浏览器里面如果同时存在min-height和height，min-height会失效。为了解决兼容问题有一个方法利于了

IE浏览器的漏洞，可以巧妙解决问题
-> 解决方案，下划线过滤器 语法:_属性:属性值; 当把属性这样设置后高版本浏览器会忽略设置的属性，而IE低版本浏览器会识别

宽高自适应属性：

1、min-height 最小高度：一开始元素有一个固定的高度，随着内容的增加高度自适应

2、max-height 最大高度：元素一开始就是自适应的，当高度超出最大高度时元素会溢出

3、min-width 最小宽度：一开始是自适应的，当宽度小于设置的值的时候会出现滚动条

4、max-width 最大宽度：一开始有一个宽度，当元素小于最大宽度时元素的宽度是自适应的

5、注意点：宽高自适应的几个属性最大的作用其实相当于是多了一个判断条件

三、过滤器

下划线属性过滤器

当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法:选择符{_属性:属性值; }

!important关键宁过滤器

它表示所附加的声明具有最高优先级.

语法:选择符{属性:属性值!important;}

优先级顺序：!important > 内联样式表（权重1000）> id选择器（权重100）> class选择器（权重10）

四、百分比布局

百分比（流式）布局：

1、利于的是百分比这个单位的特性实现元素的自适应，按比例缩放

2、%百分比单位，使用的时候需要参照物

3、百分比单位会让咱们的布局更加的灵活，后期也方便修改

注意点：元素的高度是不能继承父元素的，利于百分比完成高度自适应

自适应窗口（一屏页面的书写）

元素宽高自适应窗口宽度

设置方法：html,body{width:100%;height:100%}