10-css宽高自适应&伪元素

一、宽高自适应

通过设置宽高属性为auto或不写实现自适应。
但是当内容过少时，宽或高太小不好看，此时就需要额外设置以下属性：

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

二、清浮动方法补充

清浮动方法：
1、写固定高度，设置container父盒子高度（不推荐，子元素增多时换行出现问题）
2、在下面元素box2上设置清除兄弟元素的浮动 （不推荐）clear:none/left/right/both;
3、当前浮动元素中增加空盒子清浮动 clear:both;
可实现高度自适应，不利于代码可读性，且降低了浏览器的性能
4、overflow:hidden 利用bfc块级作用域，让浮动元素计算高度

overflow:hidden弊端：
浮动元素中存在二级菜单时，点击展开二级菜单，会把整个盒子撑开，导致页面整体内容位置发生变化

结合定位解决于二级菜单把盒子撑开问题
父：

position:relative;
overflow:hidden

子:

position:absolute;
left:0;
top:一级菜单height;

overflow:hidden在实现清浮动的同时也存在溢出隐藏的功能，对于二级菜单无法展示（脱离文档流也会隐藏）。

此时提出一个万能清浮动方法：伪元素

三、伪元素

伪元素：寄托在某个标签上，不需要单独对该标签中的某些内容增加新标签，一般用于清浮动

div::first-letter{
}
div::first-line{
}
div::before{
}   #在某个标签最前面显示
div::after{
} 

对于上述提到的二级菜单元素撑开盒子的问题，不使用overflow:hidden，position保留，加伪元素，相当于为父元素增加伪空元素的方式来清浮动，同时不会出现overflow:hidden溢出隐藏的问题，使用position定位实现脱离文档流，在下一个标签上展示

.box::after{
content: "";
clear:both;
display:block;
width:0;
height:0;
visibility:hidden;  #不展示content中内容

四、display:none和visibility:hidden区别

display:none
不占位隐藏
visibility:hidden
占位隐藏，隐藏元素在页面会保留原来的位置

五、窗口自适应

1、盒子根据窗口大小进行改变

设置方法：
1、为全局html,body设置高度

html,body{
    height:100%，
    width:100%
}

2、参照窗口值，给盒子设置高度或宽度百分比，可实现随着窗口的变化盒子宽高等比例缩放

2、两栏布局之宽度自适应

1、左边导航栏浮动起来,设置width:200px
2、不设置宽，调整margin-left:200px，两盒子并列展示
3、calc()函数动态计算长度值
width:calc(100% - 100px);
支持+ - * / 使用数学运算符优先级
动态自适应屏幕宽度，不会撑出滚动条

两栏布局：

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%
}
.box1{
    height:100%;
    width:200px;
    background:blue;
    float:left;
}
.box2{
    height:100%;
    background:red;
    width:calc(100% - 200px)
    float:left;
}