53. CSS Supplement

caution! 1, the default height and width issues

(1) Father and son are block-level elements

 <! DOCTYPE html> div.parent{width:500px;            height:300px; Background:  #  CCC;             } div.son{width:  100%;            height:200px;        Background:green; }  </style>class  ="  parent   " > < div class  = " son   " ></div> </div></body>
View Code
At this point, the child element is set to the parent element width of 100%, then the width of the child element is also 500px;
But if we remove the width of the element, we find that the child element is still equal to the width of the parent element. That is , for block-level elements, the width of the child element defaults to 100% of the parent element. 

 
 

  
  
 
   
When we add padding and margin to child elements, we can find that width is the width of the parent element minus the margin and padding values of the child elements.
 
  
 
 
There is no doubt that if you remove the height of the child element, it will be sent the height of the child element is 0, so height is not 100%, generally we are to add content (child element) to the parent element to brace up.
(2) Parent: block-level element child: inline element
If an inline element is a non-replaceable element (a general element other than Img,input), there is no way to set the width of the element, nor is there a 100% problem. That is, inline elements must rely on their internal content to be open.
If the inline element is a replaceable element (img,input, which itself can be set to long and wide), regardless of how the width and height of the parent element is set, and the IMG is not set wide and high, IMG always behaves as its original width and height. 
<! DOCTYPE html>
From this we can find that although the width is not set, but the performance in the browser is 160px, it does not inherit the parent element of 100% to get 500px, but according to the established height to reduce the width of the ratio.   Similarly, if you set width only, the height will change proportionally. If we set the width of the img to 100%, we can find that it is the same width as the parent element. As we generally do, first determine the width and height of the img parent element, and then set the width and height of the img to bit 100%, so that the image can be covered with the parent element.
Background Management layout
<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>. PG-header{height:48px; Width:100%; Background-color:#2459A2;position:fixed;           top:0;        left:0;            }. left{Position:absolute;            left:0;            top:48px;            bottom:0;            width:200px; Background-color:#ededed;}. right{Position:absolute;            right:0;            left:200px;            top:48px;            bottom:0;        Overflow:auto;            }. content{height:2000px; Width:100%; }    </style>class="Pg-header"></div><div> <divclass=" Left"> </div> <divclass=" Right"> <divclass="content"></div> </div></div></body>CSS-Responsive layouts
<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>/*====================================== initialization ============== =======*/            *{margin:0;                  padding:0; } body{Font-size:12px; } a{Text-Decoration:none; }        /*======================================header Regional Settings =====================*/. header{height:44px; Width:100%; Background-color:#2459A2;position:fixed;               top:0;        left:0; }. header_content{Width:90D;            height:44px; Background-color:#2459A2;margin:0 Auto; Line-height:44px;        position:relative; }/*======header District Part1:logo ===========*/. logo{Float:left;                    width:121px;                    height:23px; Margin-top:9px; }/*======header District Part2:action-menu =====*/. Action-menu{Float:left; Margin-left:30px; }. Action-menu a.tb{Color:#C0cddf;padding:0 10px; Text-Align:center; Margin-left:-3px; Display:inline-Block; }. Action-menu A.tb:hover {color:#FFF;background-Color:lightslategrey; }. Action-menu a.active,. action-menu A.active:hover {color:#FFF;Background-color:#204982;;                            }/*======header District Part3:key-search =====*/. Key-search{margin-top:5px;                    Float:right; }. Key-search A.search-icon-box,. search-txt {float:left; }. Search-txt {color:#333;line-height:25px;                    padding:2px 2px 2px 5px;                    height:25px;                width:91px; }. Key-search a.search-icon-Box {border:1px solid#e0e0e0;Background-color:#F4f4f4;width:30px;                    height:31px; Border-left:0; }. Key-search A.search-icon-box span.search-icon{Background:url ("Images/icon.png") No-repeat 0-197px;                    Float:left;                    height:12px;                    width:11px; Margin-left:10px; Margin-top:9px; }/*======header District Part4:action-nav =====*/. Action-nav {float:right; Margin-right:10px; }. Action-nav a {color:white;                    PADDING:14PX 18px; }. Action-nav a:hover{Background-Color:lightslategrey;                Color:white; } /*======================================content Regional Settings =====================*/. Content-Box {background-color:#ededed;padding-top:44px; Height:100%;                    }. content {width:960px;                    margin:0 Auto;                    Height:auto!important;                    Overflow:hidden; Min-height:713px;                    PADDING:6PX 28px; Background-color:#FFF;/*overflow:hidden; Look at the effect after canceling * *                }        /*===============================-Responsive Layout =====================*/@media (Max-width:1050px) {. Action-menu a.item{Display:none; Background-Color:gold;              border:dashed 1px rebeccapurple;          Color:black; }. Action-menu a.active{padding:0 25px; }. Action-nav{Float:left; Margin-left:80px; }. Key-search{float:right; Margin-right:100px; }. Action-menu:hover a.item{Display:block; }} @media (Max-width:810px) {. Key-search{Display:none; }. Action-nav{Display:none; }        }    </style>class="Header"> <divclass="header_content"> <divclass="logo"> <a href="/">"Images/logo.png"alt=""></a> </div> <divclass="Action-menu"> <a href="#" class="TB Active"> All </a> <a href="#" class="TB Item">42 District </a> <a href="#" class="TB Item"> Satin </a> <a href="#" class="TB Item"> Pictures </a> <a href="#" class="TB Item"> Kick 1024</a> <a href="#" class="TB Item"> You ask me to answer </a> </div> <divclass="Key-search"> <form action="/"Method="Post"> <input type="text" class="Search-txt"> <a href="#" class="Search-icon-box"> <spanclass="Search-icon"></span> </a> </form> </div> <divclass="Action-nav"> <a href="#" class="register-btn"> Registration </a> <a href="#" class="login-btn"> Login </a> </div> </div> </div> <!--content structure--<divclass="Content-box"> <divclass="content"> </div> </div></body>
53. CSS Supplement