Home > Article > Web Front-end > CSS layout series-upper and lower columns application scenarios_html/css_WEB-ITnose
CSS layout series-upper and lower columns application scenarios_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:541292browse
Today I will talk about the application scenario of upper and lower column layout. Before that, I will briefly mention the box-sizing attribute. This attribute has three values: content-box|border-box|inherit.
The box-sizing attribute allows you to define specific elements that match a certain area in a specific way.
Usually the height and width we set actually refer to the height and width of the content, and the height and width of the border are not included. If you set box-sizing: content-box only includes the height and width of the box content, and the height and width of the border are not included, the default is this algorithm (Figure 1). If you want to include the border within the height and width we set, just set box-sizing: border-box (Figure 2), so you will see that the height and width of the content become 180*180, and the calculation formula is:
Content width = width - (border width * 2 padding * 2); content height = height - (border height * 2 padding * 2);
(Picture 1)
(Picture 2)
This attribute is mentioned here. If you want to know more about it, you can search it yourself. Everyone is welcome to discuss it together. There are actually many application scenarios for upper and lower columns. The layout of upper and lower columns in the comprehensive application of the previous layout series is an example. There is actually one panel. I use this most in my daily work, and there are panels everywhere. There are also extjs and ligerui panel components that actually look like this. Please see the renderings:
Now analyze the panel layout and implementation principles:
As for when to use external supports and when to use internal supports, it depends on the specific analysis of specific needs.
Outer support rendering:
Code:
<style type="text/css">*{margin: 0;padding: 0;} body{font-size: 14px;}.container{position: relative;border: solid 1px red;width: 400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}.content{background-color: #ccc;}</style></head><body> <div class="container"> <div class="header"> 外撑面板</div> <div class="content"> 我是内容栏我是内容栏 </div> </div></body></html> Inner support rendering:
Code:
<style type="text/css">*{margin: 0;padding: 0;}body{font-size: 14px;}.container{position: relative;border: solid 1px red;width: 400px;height:400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}.content{background-color: #ccc;position:absolute;top:30px;left:0;right:0;bottom:0;}</style></head><body> <div class="container"> <div class="header"> 内撑面板</div> <div class="content"> 我是内容栏我是内容栏 </div> </div></body></html>