一.自适应:元素的大小能够根据窗口或者子元素自动调整,这就是自适应

1.宽度自适应:

1.块级元素不写宽度,默认值为auto
2.宽度设为百分比

2.高度自适应

1.不写高度,默认值auto 2.高度设为百分比,需要祖先有高度

二.浮动元素的高度自适应

当父元素未设置高度,子元素进行了浮动,父元素将高度塌陷
解决办法:
1.给父元素设置高度,缺点:不灵活
2.给元素设置为BFC,缺点:超出父元素的内容将不显示
3.给浮动元素的最后添加一个块级元素,并设置为clear:both,缺点:代码冗余
4.万能清除法:
clearfix:after{
    content:'';
    display:block;
    height:0;
    visibility:hidden;
    clear:both
   }

三.伪元素选择器

.box:after{content:'在后面添加'}
.box:before{content:'在前面添加'}
.box:first-letter{} 第一个字的样式
.box:first-line{} 第一行字的样式

四.元素的显示与隐藏和透明

    visibility:visible/hidden; 占据文档流
    display:none/block; 不占据文档流
    opacity:0/1 占据文档流
    height:0;overflow:hidden; 不占据文档流
    transform:scale(0/1) 缩小为0 占据文档流

五.最小宽高

min-width
max-width
min-height
max-height

六.iframe的使用:用来在网页中插入第三方页面

src="页面地址" name="名字" width="宽度" height="高度"
iframeborder="1/0" 是否显示边框
scrolling="yes/no/auto" 是否显示滚动条

用法:<a href="页面.html" targe="iframe的name值">链接</a>
<iframe src="" name=""></iframe>
点击a链接将a的页面在iframe中显示

七.calc(% - px)计算不同单位之间的距离

运算符前后加一个空格