大前端html学习06-宽高自适应

一、自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适

二、宽度自适应高度自适应
（1）宽度自适应

元素宽度的默认值为auto

(2) 高度自适应

元素高度的默认值 {height:auto;}

三、浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

方法1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)

方法2:在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;

（缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）

方法3:万能清除浮动法

选择符:after{content:" ";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden;}

(缺点：伪元素选择器在IE7及以下浏览器不识别，所以此方法只能解决IE8 及以上浏览器高度塌陷问题）

四、伪元素
1）:after(与content属性一起使用，定义在对象后的内容。)

如：div:after{content:url(logo.jpg);}

div:after{content:"文本内容";}

2）:before:与content属性一起使用，定义在对象前的内容。

如：div:before{content:"在其前放内容";}

3）：first-letter:定义对象内第一个字符的样式。

4）：first-line:定义对象内第一行文本的样式

五、元素的显示与隐藏和透明
隐藏

<code class="language-plaintext hljs">1、display:none；
隐藏后的元素不占页面空间，后面元素上去补位置
2、visibility:visible(显示)/hidden(隐藏)
隐藏元素，但是隐藏后的元素仍占页面空就按
3、opcity:0
隐藏元素，占页面空间
4、height:0px;/不设置高度
隐藏元素可以,不占页面空间,
弊端:如果里卖弄有文本的话,文本会留在原来的位置;可以配合font-size:0px/oveflow:hideen/visibility:hideen
5、使用缩放====缩放比例为0
transform:scale(0)</code>
透明

<code class="language-plaintext hljs">transparent(透明色)===背景
rgba(0,0,0,0)====背景
   a==alpha透明度0-1
    0代表的是透明；1代表的是不透明
opacity======透明度的意思
   这个透明度取值范围0-1；不单纯只透明背景颜色，还能透明内容，文本，图片，边框等等
   0===透明
   1===不透明
IE浏览器的兼容 filter:alpha(opcity=数值) 数值：1-100</code>
六、最小最大宽高
min-height属性：最小高度；

min-width:最小宽度

max-height:最大高度

max-width:最大宽度

七、窗口自适应
盒子根据窗口的大小进行改变

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

八、iframe使用
作用：iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

语法：<iframe src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe>

frameborder="1/0" 1代表有框架边框 /0代表无框架边框

滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动

<a href="" target="iframe的name属性值"></a>表示超链接的目标地址在框架中打开

九、calc()函数的使用
calc() 函数：用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；