盒子height高度属性拓展 · css3

## 盒子模式height属性拓展一个盒子必须有高度，否则看不到内容样式，高度可以有多个配置内容，比如超出部分，如果显示，如果盒子没有设置高度，则被内容撑高，如果设置了高度，内部高度大于盒子本身的高度，不会被隐藏，会自动超出盒子内容显示。关于高度超出部分，是有属性可配置的，overflow，其作用指的是超出盒子部分怎么显示属性值： 1. visible 可见的，默认的 2. hidden 作用是超出高度部分隐藏 3. scroll 无论文字是否超出部分，都增加滚动条样式 4. auto 超出部分增加滚动条样式。 ``` overflow:visible overflow:hidden overflow:scroll overflow:auto ``` 关于height属性，如果希望盒子自动被内容撑高，可以设置只为 auto ``` height:auto ``` 代码案例： ``` style> *{ margin:0; padding:0; } div { width:200px; height:100px; overflow:auto; border:2px solid red; } </style> </head> <body> <div> <p>你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n你好你好你年号年后上的飞机是根据联赛冠军路上就给你老师看看结果那算了n</p> </div> ``` 效果如下： ![](https://img.kancloud.cn/b7/2b/b72b9aadb4ee0d31e9bf87befbc26a7c_1120x601.png)