In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
How to develop the CSS3 elastic box model, I believe many inexperienced people do not know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.
Box-flex attribute
The box-flex attribute has the flexibility to control the display space of child elements in the box. Note that the display space includes the width and height of the child element, not just the width of the column in which the child element resides, but also the area occupied by the child element in the box. This attribute is very important in elastic layout, and it solves the malpractice of using percentage to define elastic layout in traditional design. The basic syntax for the box-flex attribute:
Box-flex:
Value description:
The property value is an integer or decimal. When the box contains multiple child elements that define the box-flex attribute, the browser will add the box-flex attribute values of these child elements and allocate the remaining space of the box according to their respective values as a percentage of the total value. Note that the box-flex property will not be resolved correctly until there is a certain amount of space that the box has. In design, it is prudent to define specific width or height attribute values for the box.
Practical experience: adaptive column width design
In traditional web design, if you want to divide a column into three columns, it is relatively simple to set the width of all three child elements to 33.3%. This approach does not fully fill the width of the parent element, and when the width of the parent element is large enough, the user will see the unfilled white space. However, if you set a fixed width value for the child elements, the elastic layout becomes more complex. If you use the box-flex attribute, this problem will be solved.
Html Code:
XML/HTML Code copies content to the clipboard
CSS3 Code:
CSS Code copies content to the clipboard
/ * this is a page with a three-column layout, in which the width of the left column is fixed, while the width of the middle and right columns is flexible * / body {margin:0; padding:0; text-align:center;} h2 margin:0; padding:0; text-align:center; h3 {margin:2px;} # box {margin:auto; text-align:left; width:1002px; overflow:hidden } / * define the box display of box elements, and set the horizontal layout of child elements * / # box {display:box; display:-moz-box; display:-webkit-box; box-orient:horizontal;-moz-box-orient:horizontal;-webkit-box-orient:horizontal;} / * define the width of the column on the left side of the box as fixed display * / # box1 {width:201px } # box2,#box3 {border:1px solid # CCC; margin:2px;} / * defines the width of the middle column in the box as 2 box-flex 3 / # box2 {box-flex: 4;-moz-box-flex: 4;-webkit-box-flex: 4 } / * define the width of the middle column in the box as the width of the remaining space in the box 1 box-flex:2; 3 box3 / # box2 div,#box3 div {display:inline;}
Demo effect:
Realization and allocation of elastic space
By default, the child element of is not flexible, and it can be as wide as possible so that its contents are visible without any overflow. If you want to change its size, you can use the width and height properties to do so, but you can also use properties such as min-height,min-width,max-height,max-width to limit the size.
it becomes resilient when the box-flex property is at least greater than 0. When a child element is elastic, you can resize it in the following ways:
1. Use attributes such as width,height,min-height,min-width,max-height,max-width to define dimensions.
2. Use the size of the box to limit the elastic size of the child elements.
3. With the help of the box to spare all the space to limit the elastic size of the element.
if the child element does not declare a size, then its size depends entirely on the size of the box, that is, the size of the child element is equal to the size of the box multiplied by the percentage of its box-flex attribute value in the sum of the box-flex attribute values of all child elements. It is expressed as follows using a formula:
Size of child element = size of box * box-flex attribute value of child element / sum of box-flex attribute value of all child elements
If one or more child elements declare a specific size, their size will be counted, and the remaining elastic boxes will share the remaining available space in accordance with the above principles.
Due to the support of the internal image size, the space of the child elements is always larger than the spare space of the box, and a parsing exception will occur.
The influence of box-flex attribute on the layout of child elements
HTML Code:
XML/HTML Code copies content to the clipboard
Half of the remaining space in the middle and half on the right
CSS3 Code:
CSS Code copies content to the clipboard
# box2 {box-flex: 2;-moz-box-flex: 2;-webkit-box-flex: 2; background:#CCF;} # box3 {box-flex: 2;-moz-box-flex: 2;-webkit-box-flex: 2; background:#FC0;}
Demo effect:
The middle column occupies 1 beat 5 of the free space, and the right column takes up 4 of 5 free space.
CSS3 Code:
CSS Code copies content to the clipboard
# box2 {box-flex: 0.5;-moz-box-flex: 0.5;-webkit-box-flex: 0.5; background:#CCF;} # box3 {box-flex: 2;-moz-box-flex: 2;-webkit-box-flex: 2; background:#FC0;}
Demo effect:
The middle elastic display occupies all the free space, and the right column is fixed.
CSS3 Code:
CSS Code copies content to the clipboard
# box2 {box-flex: 0.5;-moz-box-flex: 0.5;-webkit-box-flex: 0.5; background:#CCF;} # box3 {width:196px; background:url (images/web3_03.gif) no-repeat;}
Demo effect:
The middle column loses elasticity (when set to 0 or copied), the contraction is displayed as a line, and the right column automatically moves to the left.
CSS Code:
CSS Code copies content to the clipboard
# box2 {box-flex: 0;-moz-box-flex: 0;-webkit-box-flex: 0; background:#CCF;} # box3 {width:196px; background:url (images/web3_03.gif) no-repeat;}
Demo effect:
After reading the above, have you mastered the method of how to develop the CSS3 elastic box model? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 224
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.