[Note-front-end] div + css layout basics, as well as error records, divcss

[Note-front-end] div + css layout basics, as well as error records, divcss

Currently, the website does not use <table> for front-end layout, but uses div + css.

The biggest advantage of using this method is that you can only maintain css while maintaining the page without modifying html. However, this method may not be easy for beginners to understand. Therefore, we will briefly describe the basics of using div + css layout. Is an example of using div + css layout: html and css: Body {font-size: 20px; font-weight: bold; color: white ;} . Back {background-color: gray; width: 1000px; height: 500px ;} . Top {background-color: orange; width: 500px; height: 100px; margin: 1% auto ;} . Middle {background-color: yellow; width: 500px; height: 100px; margin: 0 auto ;} . Middle_a {background-color: red; width: 30%; height: 100%; margin: 0 auto; float: left ;} . Middle_ B {background-color: green; width: 38%; height: 100%; margin: 0 1%; float: left ;} . Middle_c {background-color: blue; width: 30%; height: 100%; margin: 0 auto; float: left ;} . Bottom {background-color: purple; width: 500px; height: 100px; margin: 1% auto ;}</Style> Class = "back"> <Div Class = "top"> TOP </div> <div Class = "middle"> <Div Class = "middle_a"> The MIDDLE-A </div> <div Class = "middle_ B"> The MIDDLE-B </div> <div Class = "middle_c"> MIDDLE-C </div> <div Class = "bottom"> BOTTOM </div> </body> Error 1: mixed use of block div and floating divAt the same time, avoid the mixed use of block div and floating div in parallel div, otherwise it will easily cause display confusion. To cancel the effect of the green block float: left effect. Error 2: An error occurred while adding width to 100%.Here we use the background color to distinguish blocks, but this problem may occur if the border line is used to distinguish blocks. When the width values of middle_a, middle_ B, and middle_c both use percentages, when the sum is exactly 100%, the third block is automatically changed to the next row because the values in the middle cannot be placed. The main reason is that the border line also has width, so the width in <div class = 'middle'> is deemed to exceed the border line width because it exceeds the border line width.