Home > Article > Web Front-end > Talk about css3 layout_html/css_WEB-ITnose
Talk about css3 layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:421145browse
Disadvantages of using float attribute or position attribute layout
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { width: 20em; float: left; } #div1 { margin-right: 2em; } #div3 { width: 100%; background-color: yellow; height: 200px; } </style></head><body> <div id="div1"> <p> 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 </p> </div> <div id="div2"> <p> 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 </p> </div> <div id="div3"> 页面中其它内容 </div></body></html> Using the above code the page is displayed as follows:
But when something different is added to any element in div1 and div2 in the above example, such as adding an image
then it will be displayed The page effect will be as follows, (that is to say, the query alignment of two elements cannot be realized)
So how to solve this problem
in css3 Add multi-column layout. Using multi-column layout, you can divide the content in an element into multiple columns for display, and ensure that the bottom of the content in each column is aligned. You can mainly use the following attributes
column-count: the number of columns to be displayed
column-width: the width of the current column display
column-gap: between multiple columns Spacing distance
column-rule: Add a spacing line between columns and set the width, color, etc. of the spacing line
General box layout
General The page layout is divided into left, middle and right, like the following example
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #left-sidebar { float: left; width: 200px; padding: 20px; background-color: orange; } #contents { float: left; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { float: left; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } </style></head><body> <div id="container"> <div id="left-sidebar"> <h2>左侧边栏</h2> <ul> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> </ul> </div> <div id="contents"> <h2>内容</h2> <p> 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 示例文字。相对来说比较长的示例文字。 </p> </div> <div id="right-sidebar"> <h2>右侧边栏</h2> <ul> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> </ul> </div> </div></body></html> The interface effect after running the code is as follows:
You can see that using the float attribute or position attribute, the bottom of the div elements on the left and right sides or in multiple columns is not aligned
Use box layout
Use box below Layout method to align the bottom, change the above css to the following:
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } In fact, display:box is used on the outermost div, and After removing the float:left attribute of the three divs inside, the interface operation rendering is as follows:
By the way, here is the difference between using a box and a multi-column layout: 1. The width of each column in multi-column layout must be equal. 2. It is impossible to specify which column displays what content using multi-column layout. This means that multi-column layout is suitable for displaying article content but not suitable for arranging various elements of the entire web page. Structure
Flexible box layout using adaptive window
For the above example, if we want the total width of these three divs to be equal to the width of the browser window, that is, as the browser What should be done if the width of the browser window changes?
In fact, it is very simple. Just add the attribute -webkit-box-flex:1;-moz-box-flex:1; to the middle div. That’s it, the css code is as follows:
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { -webkit-box-flex:1; -moz-box-flex:1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } The interface operation effect is as shown:
Change the display of elements Order
So how do we change the display order of elements? For example, if I want the left column to be displayed on the far right and the content column to be displayed on the left, what should I do?
CSS3 provides an attribute box-ordinal-group attribute to change the display order of each element. If you look at my css, I just add box-ordinal-group to each div in it, and the change is easy. Change their display order
#container { display: -moz-box; display: -webkit-box; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } The interface rendering is as follows (isn’t it amazing):
Change the arrangement of elements Direction
If you want to change the arrangement direction of elements, you can use box-orient in CSS3 to specify the arrangement direction of multiple elements. Just add the box-orient attribute to the outermost div. The css code is as follows:
#container { display: -moz-box; display: -webkit-box; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } The interface completely changed immediately
Adaptive element width and height
When using box layout, the width and height of elements are adaptive, which means that the width and height of elements can change according to the change of arrangement direction
Look at the example below, the entire html interface code is as follows As shown:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 500px; height: 300px; } #text-a { background-color: orange; } #text-b { background-color: yellow; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } </style></head><body> <div id="container"> <div id="text-a">示例文字A</div> <div id="text-b">示例文字B</div> <div id="text-c">示例文字C</div> </div></body></html> The interface effect is as follows:
When we change the above code in the container The css is as follows (that is, changing the arrangement to vertical direction):
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; } Then the interface rendering is as follows:
Use flex box layout to eliminate blank space
After looking at the above renderings, you must be thinking that there is always a large blank area left in the container. How should we eliminate it? In fact, it can be solved using the flexible box layout in CSS3, that is, the total width and total height of multiple elements participating in the arrangement are always equal to the width and height of the container
Let’s modify the above code (arrange the Set the direction to horizontal and add the box-flex attribute to the middle sub-div)
The css style is as follows:
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 500px; height: 300px; } #text-a { background-color: orange; } #text-b { background-color: yellow; -moz-box-flex:1; -webkit-box-flex:1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } The interface display effect is as follows
Of course you can also set the arrangement direction to vertical, then the interface will naturally appear as follows
Use for multiple elements box-flex attribute
Now we not only add box-flex to the middle child div, but also add box-flex to the first child div, what will be the result?
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; } #text-a { background-color: orange; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-b { background-color: yellow; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 如果三个子div都加上box-flex属性，那么每个div高度等于容器的高度除以3，也就是效果图所示所示：
其实box-flex:1就是让其占据刚刚好的宽度，也就是说除去其它的部分，它刚好占满全部
你动手去尝试一下用box-flex:2，会发现box-flex:2并非box-flex:1的两倍就是这个道理，1只是代表单位像素，也就是刚刚好的宽高，并非代表数值
指定水平方向与垂直方向的对齐方式
在css2中，如果想方案水平居中就只能用text-align:center，但是却不能让文字垂直居中，在css3中，只要让div元素使用box-align属性就行了。
示例代码
div { display: -moz-box; display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; width: 200px; height: 100px; background-color: pink; }
如果在div容器中放入“示例文字”这几个字，界面运行效果就会如下所示：（同样，如果我们在div里面放入图像也是可以实现水平和垂直方向居中的）