Home > Article > Web Front-end > Understanding the basic knowledge of div css layout_html/css_WEB-ITnose
Understanding the basic knowledge of div css layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:34981browse
The Brisket news release system uses a lot of BS technology, and a large part of the beautiful web pages we see are realized by div css technology, which is a web page layout method.
To learn a technology, you must start by mastering its basic concepts. Let’s take a look at the basic concepts in div css.
First let’s take a look at the effect of the div display on the page
First write the tags in the html, where the tag is inline
<span style="font-size:24px;"> <span class="cs">测试1</span> <span class="cs d2">测试2</span> <div class="cs">测试3</div> <div class="cs d1">测试4</div></span>
Set the style in the managed CSS
<span style="font-size:24px;">.cs { /*给所有class是cs的加上边框*/border:2px solid #00f;} </span> Result: The span tag occupies a position size equal to the content The same size, while the div tag occupies a whole row.
Standard flow: It can be understood that the order of content displayed on the web page and the order of content written in HTML are consistent with the standard flow.
As in the above example, test 1, test 2, test 3, test 4, the display order in the web is the same as the order written in html. Because Test 1 and Test 2 are marked with , they will be displayed on the same line. Test 3 should be displayed next to Test 2 but because the Box Model: First look at a picture Content: The content area is equivalent to the size of the object we put in the box. But in the box model, the "size of the object" can be adjusted using the height and width attributes. Padding: padding, divided into top, bottom, left and right. It is equivalent to the distance from the object we put in the box to the border of the box. These four distances are also adjustable. Border: The border, that is, the thickness of the box, is also adjustable. Margin: External margin, divided into top, bottom, left and right. The above three parts can be regarded as a box containing objects, and the distance between boxes and between boxes and other borders is determined by margin. Float : Elements that use float will break away from the standard flow. As shown below The first one is without floating, and the three elements are displayed in order. The second picture is Left floating is used for element 1, so that element 1 is out of the standard stream, so there are only elements 2 and 3 in the standard stream, and they are still displayed in order. Positioning : divided into relative positioning and absolute positioning. Relative positioning : The element is positioned relative to its original position, as in the following example: Before relative positioning is used After using relative right positioning for test 2 It does not break away from the standard flow, it just deviates from its original position . Absolute positioning: The element is positioned relative to its nearest positioned parent tag. Case 1 In HTML In CSS
<span style="font-size:24px;"> <div class=”yellow”> <div class=”green”> <div id="cs1" class="cs">测试一</div> <div id="cs2" class="cs">测试二</div> <div id="cs3" class="cs">测试三</div></span>
<span style="font-size:24px;"> .yellow{ /*不使用position进行定位*/ } .green{ position:absolute;/*使用position进行定位*/ } #cs2{ position:absolute;right:30px; }</span>
Case 2<span style="font-size:24px;"> .yellow{ position:absolute;/*使用position进行定位*/ } .green{ /*不使用position进行定位*/ } #cs2{ position:absolute;right:30px; }</span>