6 ways to introduce CSS and other high-level layouts

The following small series for you to bring a CSS and other high-level layout of 6 ways to introduce. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

Previous words

The equal height layout refers to how the child elements are laid out in the parent element with a high degree of equality. The implementation of such high-level layout including pseudo-high and true high, pseudo-high just look like high, really high is the real high. This article will introduce the four kinds of true-height layouts such as border simulation, negative margin, and table implementation, absolute implementation, flex implementation, and JS judgment.

Pseudo equal height

Border simulation　

Because the element border and element height are always the same height, the color of the border of the element is used to disguise the background color of the two sibling elements. Then the left and right two elements of the transparent background using absolute overlay on the middle element of the border, to achieve a visually high effect

[note] The height of the left and right elements cannot be greater than the height of the middle element, or the container height

CSS Code copy content to clipboard

<style>   body,p{margin:0;}   . parent{       position:relative;   }   . center{       Box-sizing:border-box;       padding:0 20px;       Background-clip:content-box;       border-left:210px solid lightblue;       border-right:310px solid lightgreen;   }   . left{       Position:absolute;       top:0;       left:0;       width:200px;   }   . rightright{       Position:absolute;       top:0;       rightright:0;       width:300px;   }   </style>

xml/html Code copy content to clipboard

<p class= "Parent" style= "Background-color:lightgrey;" >    <p class= "left" >        <p>left</p>    </p>    <p class= "center" style= " Background-color:pink; " >        <p>center</p>        <p>center</p>    </p>    <p class= "right" >        <p>right</p>    </p></p>

Negative margin　

Because the background is displayed in the padding area, set a large value of the Padding-bottom, and then set the same value of the negative margin-bottom, so that the background color is filled with the element area, and conform to the formula of the box model of the element, to achieve visual high effect

[note] If you use the <a> anchor point in the page to jump, you will hide some text information

[note] If the background picture on the page is anchored to the bottom, you will not see the background image

CSS Code copy content to clipboard

<style>   body,p{margin:0;}   . parent{       Overflow:hidden;   }   . left,.centerwrap,.rightright{       Float:left;       width:50%;       padding-bottom:9999px;       Margin-bottom: -9999px;   }   . center{       margin:0 20px;   }   . left,.rightright{       width:25%;   }   </style>

xml/html Code copy content to clipboard

<p class= "Parent" style= "Background-color:lightgrey;" >    <p class= "left" style= "Background-color:lightblue;" >        <p>left</p>    </p>    <p class= "Centerwrap" >        <p class= "center" style= " Background-color:pink; " >            <p>center</p>            <p>center</p>        </p>    </p>    <p class= "Right" style= "Background-color:lightgreen;" >        <p>right</p>    </p></p>

It's so high.

Table

The Table-cell element in the table element defaults to the equal-height

CSS Code copy content to clipboard

<style>   body,p{margin:0;}   . parent{       display:table;       width:100%;       table-layout:fixed;   }   . left,.centerwrap,.rightright{       Display:table-cell;   }   . center{       margin:0 20px;   }   </style>

xml/html Code copy content to clipboard

<p class= "Parent" style= "Background-color:lightgrey;" >    <p class= "left" style= "Background-color:lightblue;" >        <p>left</p>    </p>    <p class= "Centerwrap" >        <p class= "center" style= " Background-color:pink; " >            <p>center</p>            <p>center</p>        </p>    </p>    <p class= "Right" style= "Background-color:lightgreen;" >        <p>right</p>    </p></p>

Absolute　　

Sets the top:0;bottom:0 of a child element so that all child elements are the same height as the parent element, achieving a high effect

CSS Code copy content to clipboard

<style>   body,p{margin:0;}   . parent{       position:relative;       height:40px;   }   . left,.center,.rightright{       Position:absolute;       top:0;       bottombottom:0;   }   . left{       left:0;       width:100px;   }   . center{       left:120px;       rightright:120px;   }   . rightright{       width:100px;       rightright:0;   }   </style>

xml/html Code copy content to clipboard

<p class= "Parent" style= "Background-color:lightgrey;" >    <p class= "left" style= "Background-color:lightblue;" >        <p>left</p>    </p>    <p class= "center" style= "Background-color:pink;" >        <p>center</p>        <p>center</p>    </p>    <p class= "right" style= " Background-color:lightgreen; " >        <p>right</p>    </p></p>

Flex　

The scaling project in Flex is stretched to the height of the parent element by default, and also achieves a high effect

CSS Code copy content to clipboard

<style>   body,p{margin:0;}   . parent{       Display:flex;   }   . left,.center,.rightright{       flex:1;   }   . center{       margin:0 20px;   }   </style>

xml/html Code copy content to clipboard

<p class= "Parent" style= "Background-color:lightgrey;" >    <p class= "left" style= "Background-color:lightblue;" >        <p>left</p>    </p>    <p class= "center" style= "Background-color:pink;" >        <p>center</p>        <p>center</p>    </p>    <p class= "right" Style= "Background-color:lightgreen;" >        <p>right</p>    </p></p>

Js　

When the sub-element height is different, JS judgment is added, and the padding-bottom of the lower sub-elements is increased, which makes the sub-elements achieve the high effect.

CSS Code copy content to clipboard

<style>   body,p{margin:0;}   . Parent{overflow:hidden;}   . left,.center,.rightright{       Float:left;       width:25%;   }       . center{       width:50%;       padding:0 20px;       Background-clip:content-box;       Box-sizing:border-box;   }   </style>

xml/html Code copy content to clipboard

<p class= "Parent" id= "parent" style= "Background-color:lightgrey;" >    <p class= "left" style= "Background-color:lightblue;" >        <p>left</p>    </p>    <p class= "center" style= "Background-color:pink;" >        <p>center</p>        <p>center</p>    </p>    <p class= "right" style= " Background-color:lightgreen; " >        <p>right</p>    </p></p>

JavaScript Code copy content to clipboard

<script>   function Getcss (obj,style) {       if (window.getcomputedstyle) {           return getComputedStyle (obj) [Style];       }       return Obj.currentstyle[style];   }   var oparent = document.getElementById (' parent ');   var oleft = oparent.getelementsbytagname (' P ') [0];   var ocenter = oparent.getelementsbytagname (' P ') [1];   var oright = oparent.getelementsbytagname (' P ') [2];   function Eqheight (obj1,obj2) {       var ODIs = obj1.clientheight-obj2.clientheight;       if (ODIs > 0) {           obj2.style.paddingBottom = parsefloat (Getcss (obj2, ' padding-bottom ')) + ODIs + ' px ';       } else{           obj1.style.paddingBottom = parsefloat (Getcss (obj1, ' padding-bottom ')) +  Math.Abs (ODIs) + ' px ';       }   }   Eqheight (oleft,ocenter);   Eqheight (oleft,oright);   </script>

The above analysis of the CSS and other high-level layout of 6 ways is small to share all the content of everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.