一、自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适
二、宽度自适应高度自适应
（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()函数使用标准的数学运算优先级规则；