盒子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)